{% from "components/checkbox.html" import unlabelled_checkbox %}
{% from "components/message-count-label.html" import folder_contents_count, message_count_label %}

{% if template_list.template_folder_id and not template_list.templates_to_show %}
  <p class="template-list-empty">
    {% if template_list.folder_is_empty %}
      This folder is empty
    {% else %}
      There are no {{ message_count_label(1, template_type, suffix='') }} templates in this folder
    {% endif %}
  </p>
{% else %}
  <nav id=template-list>
    {% for item in template_list %}
      <div class="template-list-item {% if current_user.has_permissions('manage_templates') %}template-list-item-with-checkbox{% endif %} {% if item.ancestors %}template-list-item-hidden-by-default{% endif %} {% if not item.ancestors %}template-list-item-without-ancestors{% endif %}">
        {% if current_user.has_permissions('manage_templates') %}
          {{ unlabelled_checkbox(
            id='templates-or-folder-{}'.format(item.id),
            name='templates_and_folders',
            data=templates_and_folders_form.is_selected(item.id),
            value=item.id,
          ) }}
        {% endif %}
        <h2 class="message-name">
          {% for ancestor in item.ancestors %}
            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=ancestor.id) }}" class="template-list-folder">
              {{ ancestor.name }}
            </a> <span class="message-name-separator">/</span>
          {% endfor %}
          {% if item.is_folder %}
            <a href="{{ url_for('.choose_template', service_id=current_service.id, template_type=template_type, template_folder_id=item.id) }}" class="template-list-folder">
              <span class="live-search-relevant">{{ item.name }}</span>
            </a>
          {% else %}
            <a href="{{ url_for('.view_template', service_id=current_service.id, template_id=item.id) }}" class="template-list-template">
              <span class="live-search-relevant">{{ item.name }}</span>
            </a>
          {% endif %}
        </h2>
        <p class="message-type">
          {{ item.hint }}
        </p>
      </div>
    {% endfor %}
  </nav>
{% endif %}