{% 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 %}
  Reply-to email addresses
{% endblock %}

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

{% block maincolumn_content %}

  {{ page_header('Reply-to email addresses') }}

  <div class="user-list">
    {% if not current_service.email_reply_to_addresses %}
      <div class="user-list-item">
        <p class="usa-body user-list-item-blank hint">You have not added any reply-to email addresses yet</p>
      </div>
    {% endif %}
    {% for item in current_service.email_reply_to_addresses %}
      <div class="user-list-item">
        <div class="grid-row">
          <div class="grid-col-9">
            <h2 class="user-list-item-heading">
              <span class="heading-small">{{ item.email_address }}</span>&ensp;<span class="hint">
                {%- if item.is_default -%}
                  (default)
                {% endif %}
              </span>
            </h2>
          </div>
          <div class="grid-col-3">
            {% if current_user.has_permissions('manage_service') %}
              <a class="usa-link user-list-edit-link" href="{{ url_for('.service_edit_email_reply_to', service_id =current_service.id, reply_to_email_id = item.id) }}">
                Change<span class="usa-sr-only"> {{ item.email_address }}</span>
              </a>
            {% endif %}
          </div>
        </div>
        <div class="grid-row">
          <div class="grid-col-12">
            {% if current_service.count_email_reply_to_addresses > 1 %}
              {{ copy_to_clipboard(item.id, name=item.email_address, thing="ID") }}
            {% endif %}
          </div>
        </div>
      </div>
    {% endfor %}
  </div>
  <div class="grid-row">
    <div class="grid-col-12">
      {% if current_user.has_permissions('manage_service') %}
        <div class="js-stick-at-bottom-when-scrolling">
          {{ usaButton({
            "element": "a",
            "text": "Add reply-to email address",
            "href": url_for('.service_add_email_reply_to', service_id=current_service.id),
          }) }}
        </div>
      {% endif %}
    </div>
    <div class="grid-col-10">
      <p>
        You need to add at least one reply-to address so recipients can reply to your messages.
      </p>
      <p>
        Emails with a reply-to address:
      </p>
      <ul class="list list-bullet">
        <li>are less likely to be labelled as spam</li>
        <li>appear more trustworthy</li>
      </ul>
    </div>
  </div>

{% endblock %}