{% extends "withnav_template.html" %}
{% from "components/textbox.html" import textbox %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/form.html" import form_wrapper %}
{% from "components/components/back-link/macro.njk" import usaBackLink %}

{% block service_page_title %}
  {{ heading_action }} text message template
{% endblock %}

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

{% block maincolumn_content %}

    {{ page_header('{} text message template'.format(heading_action)) }}

    <a class="usa-link display-inline-flex margin-top-05" href="#help">
      How to customize your message
    </a>

    {% if current_service.prefix_sms %}
      {% set content_hint = 'Your service name will be added to the start of your message. You can turn this off in Settings.' %}
    {% endif %}

    {% call form_wrapper() %}
      <div class="grid-row">
        <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
          {{ form.name(param_extensions={
            "extra_form_group_classes": "margin-bottom-2",
            "hint": {"text": "Your recipients will not see this"}
          }) }}
          {{ textbox(
            form.template_content,
            highlight_placeholders=True,
            width='1-1',
            hint=content_hint,
            rows=5,
            extra_form_group_classes='margin-bottom-1',
            placeholder='Edit me! Check out the Personalization section below for details on cool ((stuff)) you can do with your messages!'
          ) }}
          {% if current_user.platform_admin %}
            {{ form.process_type }}
          {% endif %}
        </div>
        <div class="grid-row">
          <div class="grid-col-12">
            <div class="template-content-count" bg-color="red">
              <div data-module="update-status" data-target="template_content"
                data-updates-url="{{ url_for('.count_content_length', service_id=current_service.id, template_type='sms') }}"
                aria-live="polite">
                &nbsp;
              </div>
            </div>
          </div>
        </div>
        <div class="grid-row width-full">
            <div class="tablet:grid-col-2 mobile-lg:grid-col-12">
              {{ page_footer('Save') }}
            </div>
          <div class="tablet:grid-col-10 mobile-lg:grid-col-12">
              <p class="usa-hint margin-top-5 tablet:margin-left-neg-2">
                After saving, you'll have the option to send.
              </p>
          </div>
        </div>

        <div class="tablet:grid-col-9 mobile-lg:grid-col-12">
          <h2 id="help" class="font-body-xl margin-top-2">How to customize your message</h2>
          <div class="usa-accordion usa-accordion--bordered usa-accordion--multiselectable maxw-mobile-lg" data-allow-multiple>
            {% include "partials/templates/guidance-personalization.html" %}
            {% include "partials/templates/guidance-optional-content.html" %}
            {% include "partials/templates/guidance-links.html" %}
            {% include "partials/templates/guidance-character-count.html" %}
          </div>
        </div>
      </div>
    {% endcall %}


{% endblock %}