{% from "components/back-link/macro.njk" import govukBackLink %}
{% from "components/button/macro.njk" import govukButton %}
{% from "components/details/macro.njk" import govukDetails %}
{% from "components/form.html" import form_wrapper %}
{% from "components/banner.html" import banner %}
{% 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 extra_stylesheets %}
  {% include "views/broadcast/partials/area-map-stylesheets.html" %}
{% endblock %}

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

{% block service_page_title %}
  {% if broadcast_message.status == 'pending-approval' %}
    {% if broadcast_message.created_by == current_user and current_user.has_permissions('send_messages') %}
      {{ broadcast_message.template_name }} is waiting for approval
    {% elif current_user.has_permissions('send_messages') %}
      {{ broadcast_message.created_by.name }} wants to broadcast
      {{ broadcast_message.template_name }}
    {% else %}
      This alert is waiting for approval
    {% endif %}
  {% else %}
    {{ broadcast_message.template_name }}
  {% endif %}
{% endblock %}

{% block maincolumn_content %}

  {{ govukBackLink({ "href": back_link }) }}

  {% if broadcast_message.status == 'pending-approval' %}
    {% if broadcast_message.created_by == current_user and current_user.has_permissions('send_messages') %}
      <div class="banner govuk-!-margin-bottom-6">
        <h1 class="govuk-heading-m govuk-!-margin-bottom-3">
          {{ broadcast_message.template_name }} is waiting for approval
        </h1>
        {% if current_service.live %}
          <p class="govuk-body">
            You need another member of your team to approve your alert.
          </p>
          {{ page_footer(
            delete_link=url_for('main.reject_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
            delete_link_text='Withdraw this alert'
          ) }}
        {% else %}
          <p class="govuk-body govuk-!-margin-bottom-3">
            When you use a live account you’ll need another member of
            your team to approve your alert.
          </p>
          <details class="govuk-details govuk-!-margin-bottom-0" data-module="govuk-details">
            <summary class="govuk-details__summary govuk-clearfix">
              Approve your own alert
            </summary>
            {% call form_wrapper() %}
              <p class="govuk-body govuk-!-margin-top-2 govuk-!-margin-bottom-3">
                Because you’re in training mode you can approve
                your own alerts, to see how it works.
              </p>
              <p class="govuk-body govuk-!-margin-top-0 govuk-!-margin-bottom-3">
                No real alerts will be broadcast to anyone’s phone.
              </p>
              {{ page_footer(
                "Start broadcasting now",
                delete_link=url_for('main.reject_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
                delete_link_text='Cancel this alert'
              ) }}
            {% endcall %}
          </details>
        {% endif %}
      </div>
    {% elif current_user.has_permissions('send_messages') %}
      {% call form_wrapper(class="banner govuk-!-margin-bottom-6") %}
        <h1 class="govuk-heading-m govuk-!-margin-top-0 govuk-!-margin-bottom-3">
          {{ broadcast_message.created_by.name }} wants to broadcast
          {{ broadcast_message.template_name }}
        </h1>
        {{ page_footer(
          "Start broadcasting now",
          delete_link=url_for('main.reject_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id),
          delete_link_text='Reject this alert'
        ) }}
      {% endcall %}
    {% else %}
      <div class="banner govuk-!-margin-bottom-6">
        <h1 class="govuk-heading-m govuk-!-margin-bottom-3">This alert is waiting for approval</h1>
        <p class="govuk-body">
          You don’t have permission to approve alerts.
        </p>
      </div>
    {% endif %}
  {% else %}
    {{ page_header(broadcast_message.template_name) }}

    {% if broadcast_message.status == 'broadcasting' %}
      <p class="govuk-body govuk-!-margin-bottom-2 live-broadcast live-broadcast--left">
        Live since {{ broadcast_message.starts_at|format_datetime_relative }}&ensp;
        {%- if not hide_stop_link %}
          <a href="{{ url_for('.cancel_broadcast_message', service_id=current_service.id, broadcast_message_id=broadcast_message.id) }}" class="destructive-link destructive-link--no-visited-state">Stop broadcasting</a>
        {% endif %}
      </p>
    {% else %}
      <p class="govuk-body govuk-!-margin-bottom-4">
        Broadcast
        {{ broadcast_message.starts_at|format_datetime_human }}.
      </p>
    {% endif %}

  {% endif %}

  {{ broadcast_message.template|string }}

  {% for area in broadcast_message.areas %}
    {% if loop.first %}
      <ul class="area-list">
    {% endif %}
        <li class="area-list-item area-list-item--unremoveable">
          {{ area.name }}
        </li>
    {% if loop.last %}
      </ul>
    {% endif %}
  {% endfor %}

  <div class="area-list-map-details">
    {{ govukDetails({
      "summaryText": "Show map of areas",
      "html": map(broadcast_message)
    }) }}
  </div>

  {% if broadcast_message.status != 'pending-approval' %}
    <p class="govuk-body govuk-!-margin-bottom-3">
      Prepared by {{ broadcast_message.created_by.name }} and approved by
      {{ broadcast_message.approved_by.name }}.
    </p>
  {% endif %}

  {% if broadcast_message.status == 'broadcasting' %}
    <p class="govuk-body">
      Broadcasting stops {{ broadcast_message.finishes_at|format_datetime_human }}.
    </p>
  {% elif broadcast_message.status == 'cancelled' %}
    <p class="govuk-body">
      Stopped by {{ broadcast_message.cancelled_by.name }}
      {{ broadcast_message.cancelled_at|format_datetime_human }}.
    </p>
  {% elif broadcast_message.status == 'completed' %}
    <p class="govuk-body">
      Finished broadcasting {{ broadcast_message.finishes_at|format_datetime_human }}.
    </p>
  {% endif %}

{% endblock %}