{% from "components/folder-path.html" import copy_folder_path, page_title_folder_path %}
{% from "components/live-search.html" import live_search %}

{% extends "withnav_template.html" %}
{% set page_title = "Copy an existing template" %}

{% block service_page_title %}
  {{ page_title }}
{% endblock %}

{% block maincolumn_content %}

    <div class="">
      <h1 class="font-body-2xl margin-y-0">{{ page_title }}</h1>
      {{ copy_folder_path(template_folder_path, current_service.id, from_service, current_user) }}
    </div>
    {% if not services_templates_and_folders.templates_to_show %}
      <p class="template-list-empty">
        This folder is empty
      </p>
    {% else %}
      {{ live_search(
        target_selector='#template-list .template-list-item',
        show=True,
        form=search_form,
        autofocus=True
      ) }}
      <nav id="template-list">
        <ul>
        {% for item in services_templates_and_folders %}

          <li class="template-list-item margin-bottom-2 {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
            {% if item.is_service %}
            {% elif item.is_folder %}
            {% else %}
                {% for ancestor in item.ancestors %}
                  {% if ancestor.is_service %}
                    <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_service=ancestor.service_id) }}" class="usa-link template-list-folder">
                  {% else %}
                    <a href="{{ url_for('.choose_template_to_copy', service_id=current_service.id, from_folder=ancestor.id) }}" class="usa-link template-list-folder">
                  {% endif %}
                    {{ ancestor.name }}
                  </a> <span class="message-name-separator"></span>
                {% endfor %}
              <a class="usa-link template-list-template" href="{{ url_for('.copy_template', service_id=current_service.id, template_id=item.id, from_service=item.service_id) }}">
                <span class="live-search-relevant">{{ item.name }}</span>
              </a>
            {% endif %}
          </li>
        {% endfor %}
        </ul>
      </nav>
    {% endif %}

{% endblock %}
