{% extends "withnav_template.html" %}
{% from "components/button/macro.njk" import govukButton %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "views/broadcast/macros/area-map.html" import map %}
{% from "components/back-link/macro.njk" import govukBackLink %}

{% block service_page_title %}
  Choose where to send this alert
{% endblock %}

{% block extra_stylesheets %}
  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
{% endblock %}

{% block extra_javascripts %}
  {% include "views/broadcast/partials/area-map-javascripts.html" %}
{% endblock %}

{% block backLink %}
  {{ govukBackLink({ "href": back_link }) }}
{% endblock %}

{% block maincolumn_content %}

  {{ page_header("Choose where to send this alert") }}

  {% for area in broadcast_message.areas %}
    {% if loop.first %}
      <ul class="area-list">
    {% endif %}
        <li class="area-list-item">
          {{ area.name }}
          <a class="area-list-item-remove govuk-button" data-module="govuk-button" role="button" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">
            <svg id="area-list-item-remove__icon" width="11" height="11" viewbox="0 0 10 10" aria-labelledby="area__{{ loop.index }}" role="img" xmlns="http://www.w3.org/2000/svg">
              <title id="area__{{ loop.index }}">Remove {{ area.name }}</title>
              <g transform="rotate(45),translate(1, -6)">
                <line stroke-width="1.75" id="svg_1" y2="0" x2="6" y1="12" x1="6" stroke="currentColor" fill="none"/>
                <line stroke-width="1.75" id="svg_3" y2="6" x2="0" y1="6" x1="12" stroke="currentColor" fill="none"/>
              </g>
            </svg>
          </a>
        </li>
    {% if loop.last %}
      </ul>
      {{ govukButton({
        "element": "a",
        "text": "Add another area",
        "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
        "classes": "govuk-button--secondary govuk-!-margin-bottom-5"
      }) }}
    {% endif %}
  {% else %}
    <p class="govuk-body">
      {{ govukButton({
        "element": "a",
        "text": "Add broadcast areas",
        "href": url_for('.choose_broadcast_library', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
        "classes": "govuk-button--secondary"
      }) }}
    </p>
  {% endfor %}

  {% if broadcast_message.areas %}
    {{ map(broadcast_message) }}
    {{ govukButton({
      "element": "a",
      "text": "Preview this alert",
      "href": url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
      "classes": "govuk-button"
    }) }}
  {% endif %}

{% endblock %}