{% extends "withnav_template.html" %}
{% from "components/copy-to-clipboard.html" import copy_to_clipboard %}
{% 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/components/button/macro.njk" import usaButton %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

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

{% block backLink %}
  {{ usaBackLink({ "href": url_for('main.service_settings', service_id=current_service.id) }) }}
{% endblock %}

{% block maincolumn_content %}

  {{ page_header('Text message senders') }}

  <div class="user-list">
    {% if not current_service.sms_senders %}
      <div class="user-list-item">
        <p class="usa-body user-list-item-blank hint">You have not added any text message senders yet</p>
      </div>
    {% endif %}
    {% for item in current_service.sms_senders_with_hints %}
      <div class="user-list-item">
        <div class="grid-row">
          <div class="grid-col">
            <h2 class="user-list-item-heading">
              <span class="font-body-lg">{{ item.sms_sender }}</span>
              {% if item.hint %}
                &ensp;
                <span class="usa-hint">
                  {{ item.hint }}
                </span>
              {% endif %}
            </h2>
          </div>
          <div class="grid-col">
            {% if current_user.has_permissions('manage_service') %}
              <a class="usa-link user-list-edit-link" href="{{ url_for('.service_edit_sms_sender', service_id=current_service.id, sms_sender_id = item.id) }}">
               Change<span class="usa-sr-only"> {{ item.sms_sender }}</span>
              </a>
            {% endif %}
          </div>
        </div>
        {% if current_service.count_sms_senders > 1 %}
          {{ copy_to_clipboard(item.id, name=item.sms_sender, thing="ID") }}
        {% endif %}
      </div>
    {% endfor %}
  </div>

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