{% from "components/live-search.html" import live_search %}
{% from "components/folder-path.html" import folder_path %}
{% from "components/button/macro.njk" import govukButton %}

{% extends "withnav_template.html" %}

{% block service_page_title %}
  Choose a template
{% endblock %}

{% block maincolumn_content %}

<div class="bottom-gutter-1-2">
  <h1 class="heading-large">Choose a template</h1>
  {{ folder_path(template_folder_path, current_service.id, template_type, current_user, root_element='h2') }}
</div>

  {% if not templates_and_folders.templates_to_show %}

    {% if current_user.has_permissions('manage_templates') %}
       <p class="bottom-gutter">
         You need a template before you can send text messages.
       </p>
       {{ govukButton({
        "element": "a",
        "text": "Add a new template",
        "href": url_for('.choose_template', service_id=current_service.id, initial_state='add-new-template')
      }) }}
    {% else %}
      <p class="govuk-body">
        You need to ask your service manager to add templates before you
        can send text messages.
      </p>
    {% endif %}

  {% else %}

    {{ live_search(target_selector='#template-list .govuk-grid-column-full', show=True, form=search_form) }}

    <nav id="template-list">
      {% for item in templates_and_folders %}
        <div class="template-list-item {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
          <h2 class="message-name">
            {% for ancestor in item.ancestors %}
                <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=ancestor.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
                {{ ancestor.name }}
              </a> <span class="message-name-separator">/</span>
            {% endfor %}
            {% if item.is_folder %}
              <a href="{{ url_for('.conversation_reply', service_id=current_service.id, notification_id=notification_id, from_folder=item.id) }}" class="govuk-link govuk-link--no-visited-state template-list-folder">
                <span class="live-search-relevant">{{ item.name }}</span>
              </a>
            {% else %}
              <a class="govuk-link govuk-link--no-visited-state" href="{{ url_for('.conversation_reply_with_template', service_id=current_service.id, template_id=item.id, notification_id=notification_id) }}">
                <span class="live-search-relevant">{{ item.name }}</span>
              </a>
            {% endif %}
          </h2>
          <p class="message-type">
            {{ item.hint }}
          </p>
        </div>
      {% endfor %}
    </nav>


  {% endif %}

{% endblock %}