<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
  <h1 class="h2">
    <i aria-hidden="true" class="bi bi-folder"></i> {{ 'msgHeaderCategoryOverview' | translate }}
  </h1>
  <div class="btn-toolbar mb-2 mb-md-0">
    <div class="btn-group mr-2">
      <a class="btn btn-outline-success" href="?action=addcategory" id="addCategoryModal">
        <i aria-hidden="true" class="bi bi-plus"></i> {{ 'msgAddCategory' | translate }}
      </a>
      <a class="btn btn-outline-info" href="?action=showcategory">
        <i aria-hidden="true" class="bi bi-list"></i> {{ 'msgCategoryMatrix' | translate }}
      </a>
    </div>
  </div>
</div>

<div class="row mb-2">
  <div class="col">
    <form method="post">
      {{ csrfTokenInput | raw }}
      <div id="pmf-category-tree" class="list-group nested-sortable shadow">
        {{ _self.renderCategories(categoryTree, categoryInfo) }}
      </div>
    </form>
  </div>
</div>

<div class="row mt-4">
  <div class="col">
    <div class="alert alert-info">
      {{ 'msgCategoryRemark' | translate }}
    </div>
  </div>
</div>

{% macro renderCategories(categories, categoryInfo, depth = 1) %}
  {% for key, children in categories %}
    <div class="list-group-item nested-{{ depth }}" id="pmf-category-{{ categoryInfo[key]['id'] }}"
         data-pmf-catid="{{ categoryInfo[key]['id'] }}">
      <div class="border-left-0 border-right-0 d-flex justify-content-between align-items-center">
        {% if categoryInfo[key]['name'] != '' %}
          <h6 class="m-2">
            {{ categoryInfo[key]['name'] | raw }}

            {% if categoryInfo[key]['show_home'] == 1 %}
              <i class="bi bi-star" aria-hidden="true"></i>
            {% endif %}
          </h6>
          {% else %}
            <a href="?action=showcategory">{{ 'msgNewTranslationHeader' | translate }}</a>
          {% endif %}

        <div class="pmf-category-actions">
          <!-- Add FAQ to category (always) -->
          <a class="btn btn-info mb-1 mt-1"
             href="?action=editentry&cat={{ categoryInfo[key]['id'] }}&lang={{ categoryInfo[key]['lang'] }}"
             title="{{ 'ad_quick_entry'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
            <i aria-hidden="true" class="bi bi-indent"></i>
          </a>

          <!-- Add subcategory (if current language) -->
          <a class="btn btn-info"
             href="?action=addcategory&cat={{ categoryInfo[key]['id'] }}&lang={{ categoryInfo[key]['lang'] }}"
             title="{{ 'ad_quick_category'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
            <i aria-hidden="true" class="bi bi-plus-square"></i>
          </a>

          <!-- Edit category (if current language) -->
          <a class="btn btn-info"
             href="?action=editcategory&cat={{ categoryInfo[key]['id'] }}"
             title="{{ 'ad_kateg_rename'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
            <i aria-hidden="true" class="bi bi-pencil"></i>
          </a>

          <!-- Translate category -->
          <a class="btn btn-info"
             href="?action=translatecategory&cat={{ categoryInfo[key]['id'] }}"
             title="{{ 'ad_categ_translate'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
            <i aria-hidden="true" class="bi bi-globe"></i>
          </a>

          <!-- Delete category (if no subcategories) -->
          {% if children is empty %}
            <button type="button" class="btn btn-danger" name="pmf-category-delete-button"
                    data-pmf-category-id="{{ categoryInfo[key]['id'] }}"
                    data-pmf-language="{{ categoryInfo[key]['lang'] }}"
                    title="{{ 'msgDelete'|translate }}" data-bs-toggle="tooltip" data-bs-placement="top"
            >
              <i aria-hidden="true" class="bi bi-trash"
                 data-pmf-category-id="{{ categoryInfo[key]['id'] }}"
                 data-pmf-language="{{ categoryInfo[key]['lang'] }}"></i>
            </button>
          {% else %}
            <div class="btn btn-inverse border" style="cursor: not-allowed;">
              <i aria-hidden="true" class="bi bi-trash"></i>
            </div>
          {% endif %}
        </div>
      </div>
      {% if children is not empty %}
        <div class="list-group nested-sortable">
          {{ _self.renderCategories(children, categoryInfo, depth + 1) }}
        </div>
      {% endif %}
    </div>
  {% endfor %}
{% endmacro %}
