{% extends "withnav_template.html" %}
{% from "components/api-key.html" import api_key %}
{% from "components/page-header.html" import page_header %}
{% from "components/table.html" import row_group, row, text_field, edit_field, field, boolean_field, list_table with context%}
{% from "components/button/macro.njk" import govukButton %}

{% block service_page_title %}
  Text message senders
{% endblock %}

{% block maincolumn_content %}

  {{ page_header(
    'Text message senders',
    back_link=url_for('main.service_settings', service_id=current_service.id)
  ) }}

  <div class="user-list">
    {% if not current_service.sms_senders %}
      <div class="user-list-item">
        <span class="hint">You have not added any text message senders yet</span>
      </div>
    {% endif %}
    {% for item in current_service.sms_senders_with_hints %}
      <div class="user-list-item">
        <h3>
          <span class="heading-small">{{ item.sms_sender }}</span>
          {% if item.hint %}
            &ensp;
            <span class="hint">
              {{ item.hint }}
            </span>
          {% endif %}
        </h3>
        {% if current_user.has_permissions('manage_service') %}
          <a class="govuk-link govuk-link--no-visited-state user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">Change</a>
        {% endif %}
        {% if current_service.count_sms_senders > 1 %}
          {{ api_key(item.id, thing="ID") }}
        {% endif %}
      </div>
    {% endfor %}
  </div>

  {% if current_user.has_permissions('manage_service') %}
    <div class="govuk-grid-row bottom-gutter">
      <div class="govuk-grid-column-full">
        {{ govukButton({
          "element": "a",
          "text": "Add text message sender",
          "href": url_for('.service_add_sms_sender', service_id=current_service.id)
        }) }}
      </div>
    </div>
  {% endif %}
  <p class="govuk-body">
    The text message sender tells your users who the message is from.
  </p>
{% endblock %}