{% extends 'admin/base.html.twig' %}

{% block title %}{{ 'app.admin.categories.title'|trans }}{% endblock %}

{% block body %}
    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bxs-category-alt' ></i>",
        'title': 'app.admin.categories.title'|trans,
        'links': [
            {
                'url': path('admin.recipe.index'),
                'label': 'app.admin.recipes.title'|trans ~ "<i class='bx bx-transfer-alt'></i>",
                'class': 'btn_page_title_overflow btn-primary btn'
            }
        ]
    }) }}

<div class="container">
    <button class="btn btn-primary mb-2 btn_modal_entity" data-entity="category" type="button" >
        {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.categories.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
    </button>

    {# total items count #}
    <div class="table__count">
        {{ 'app.admin.lists.count'|trans({'%entity%': 1}) }} : {{ categories|length }}
    </div>
    
    <div class="table__container">
    <table class="table table__thead__tbody">
        <thead>
        <tr>
            <th></th>
            <th>Title</th>
            <th class="mobile__hide">Slug</th>
            <th>Count</th>
            <th class="actions">Actions</th>
        </tr>

        </thead>

        {% if categories is not empty %}
        <tbody id="listhandler" data-controller="sortablecategories">
            {% for category in categories %}
                <tr data-id="{{ category.category.id }}">
                    <td class="td__handle"><div class="handle"><i class='bx bx-move-vertical' ></i></div></td>
                    <td><a href="{{ url('admin.category.show', {slug: category.category.slug, id: category.category.id}) }}">{{ category.category.title }}</a></td>
                    <td class="mobile__hide">{{ category.category.slug }}</td>
                    <td>{{ category.total }}</td>
                    <td class="actions">
                        {{ include('admin/category/_delete_form.html.twig') }}
                    </td>
                </tr>
            {% endfor %}
        </tbody>
        {% else %}
        <tbody>
            <tr>
                <td colspan="6">{{ 'app.err.norecordfound'|trans }}</td>
            </tr>
        </tbody>
        {% endif %}
    </table>
    </div>
</div>
{% endblock %}

{% block outside_body %}
<div class="modal modal_entity fade" role="dialog" aria-hidden="true" data-entity="category" data-controller="modalscreate">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title modal__title">{{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.categories.entity'|trans({'%entity%': 1}) }}</h5>
      </div>
      <div class="modal-body modal__txts">
        {{ include('admin/category/_form.html.twig') }}
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary modal__cancel" data-dismiss="modal"><i class='bx bx-arrow-back'></i></button>
        <button type="button" class="btn btn-primary modal__confirm">{{ 'app.admin.action.save'|trans }}</button>
      </div>
    </div>
  </div>
</div>
{% endblock %}