{% 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 %}

{% extends "withnav_template.html" %}

{% block service_page_title %}
  Choose where to broadcast to
{% 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 maincolumn_content %}

  {{ page_header(
    "Choose where to broadcast to",
    back_link=back_link
  ) }}

  {% 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" href="{{ url_for('.remove_broadcast_area', service_id=current_service.id, broadcast_message_id=broadcast_message.id, area_slug=area.id) }}">remove</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) }}
    <form action="{{ url_for('.preview_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" method="get" class="govuk-!-margin-top-1">
      {{ page_footer('Continue to preview') }}
    </form>
  {% endif %}

{% endblock %}