{% from "components/folder-path.html" import folder_path, page_title_folder_path %}
{% from "components/pill.html" import pill %}
{% from "components/live-search.html" import live_search %}
{% from "components/form.html" import form_wrapper %}
{% from "components/page-header.html" import page_header %}
{% from "components/page-footer.html" import page_footer %}
{% from "components/components/alert/macro.njk" import usaAlert %}


{% extends "withnav_template.html" %}

{% set page_title = 'Templates' %}

{% block service_page_title %}
  {{ page_title_folder_path(template_folder_path) }}
{% endblock %}

{% block maincolumn_content %}

  {% if (not current_service.all_templates) and (not current_service.all_template_folders) %}

     {{ page_header(page_title, size='medium') }}

     <p>
        Every message starts with a template. You can change it later.
              
        {% if current_user.has_permissions('manage_templates') %}
          You need a template before you can
        {% else %}
          You need to ask your service manager to add templates before you can
        {% endif %}
        send messages.
     </p>

  {% else %}

    <div class="grid-row">
      <div class="{% if current_user.has_permissions('manage_templates') %} grid-col-10 {% else %} grid-col-12 {% endif %}">
        {{ usaAlert({
          "text": "Every message starts with a template. To send, choose or create a template.",
          "slim": true,
          "type": "info",
        }) }}
        {{ folder_path(
          folders=template_folder_path,
          service_id=current_service.id,
          template_type=template_type,
          current_user=current_user
        ) }}
      </div>
      {% if current_user.has_permissions('manage_templates') and current_template_folder_id and user_has_template_folder_permission %}
        <div class="grid-col-2">
          <a href="{{ url_for('.manage_template_folder', service_id=current_service.id, template_folder_id=current_template_folder_id) }}" class="usa-link folder-heading-manage-link">Manage<span class="usa-sr-only"> this folder</span></a>
        </div>
      {% endif %}
    </div>
  {% endif %}
    {% if show_template_nav %}
      <div class="bottom-gutter-2-3">
        {{ pill(template_nav_items, current_value=template_type, show_count=False) }}
      </div>
    {% endif %}

    {{ live_search(target_selector='#template-list .template-list-item', show=show_search_box, form=search_form) }}

    {% if current_user.has_permissions('manage_templates') and user_has_template_folder_permission %}
      {% call form_wrapper(
          class='sticky-scroll-area',
          module='template-folder-form',
          data_kwargs={'prev-state': templates_and_folders_form.op or None}
      ) %}
        {% include 'views/templates/_template_list.html' %}
        {% include 'views/templates/_move_to.html' %}
      {% endcall %}

    {% else %}
      {% include 'views/templates/_template_list.html' %}
    {% endif %}


{% endblock %}