{% extends '@admin/index.twig' %}

{% block content %}
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 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="./category/add" id="addCategoryModal">
        <i aria-hidden="true" class="bi bi-plus"></i> {{ 'msgAddCategory' | translate }}
      </a>
      <a class="btn btn-outline-info" href="./category/hierarchy">
        <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>


<div class="modal fade" id="deleteConfirmModal" tabindex="-1" aria-labelledby="deleteConfirmModalLabel"
     aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteConfirmModalLabel">{{ 'ad_categ_delete' | translate }}</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Schließen"></button>
      </div>
      <div class="modal-body">
        {{ 'ad_categ_deletesure' | translate }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ 'msgCancel' | translate }}</button>
        <button type="button" class="btn btn-danger" id="confirmDeleteButton">{{ 'msgDelete' | translate }}</button>
      </div>
    </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 %}
              <span class="badge bg-warning ms-1">
                <i class="bi bi-star" aria-hidden="true"></i>
              </span>

            {% endif %}

            {% if categoryInfo[key]['image'] is not empty %}
              <span class="badge bg-warning ms-1">
                <i class="bi bi-image" aria-hidden="true"></i>
              </span>
            {% endif %}

          </h6>
          {% else %}
            <a href="./category">{{ 'msgNewTranslationHeader' | translate }}</a>
          {% endif %}

        <div class="pmf-category-actions">
          <!-- Add FAQ to the category -->
          {% if categoryInfo[key]['id'] is not empty %}
          <a class="btn btn-info mb-1 mt-1"
             href="./faq/add/{{ categoryInfo[key]['id'] }}/{{ 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>
          {% endif %}

          <!-- Add subcategory (if current language) -->
          {% if categoryInfo[key]['id'] is not empty %}
          <a class="btn btn-info"
             href="./category/add/{{ categoryInfo[key]['id'] }}/{{ categoryInfo[key]['lang'] }}"
             title="{{ 'ad_quick_sub_category' | translate }}" data-bs-toggle="tooltip" data-bs-placement="top">
            <i aria-hidden="true" class="bi bi-plus-square"></i>
          </a>
          {% endif %}

          <!-- Edit category (if current language) -->
          {% if categoryInfo[key]['id'] is not empty %}
          <a class="btn btn-info"
             href="./category/edit/{{ 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>
          {% endif %}

          <!-- Translate category -->
          {% if categoryInfo[key]['id'] is not empty %}
          <a class="btn btn-info"
             href="./category/translate/{{ 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>
          {% endif %}

          <!-- 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>
      <div class="list-group nested-sortable">
        {% if children is not empty %}
          {{ _self.renderCategories(children, categoryInfo, depth + 1) }}
        {% endif %}
      </div>
    </div>
  {% endfor %}
{% endmacro %}

{% endblock %}