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

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

{% block body %}

    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bxs-category' ></i>",
        'title': 'app.admin.sections.title'|trans,
        'links': [
            {
                'url': path('admin.ingredient.index'),
                'label': 'app.admin.ingredients.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="section" type="button" >
            {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.sections.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
        </button>
        {#<button class="btn btn-primary mb-2" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.sections.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
        </button>
        {#<div class="collapse" id="collapseExample">
            <div class="card card-body">
                {{ include('admin/section/_form.html.twig') }}
            </div>
        </div>#]

        {# total items count #}
        <div class="table__count">
            {{ 'app.admin.lists.count'|trans({'%entity%': 1}) }} : {{ sections|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 sections is not empty %}
            <tbody id="listhandler" data-controller="sortablesections">
                {% for section in sections %}
                    <tr data-id="{{ section.section.id }}">
                        <td class="td__handle"><div class="handle"><i class='bx bx-move-vertical' ></i></div></td>
                        <td><a href="{{ path('admin.section.show', {'slug': section.section.slug,'id': section.section.id}) }}">{{ section.section.title }}</a></td>
                        <td class="mobile__hide">{{ section.section.slug }}</td>
                        <td>{{ section.total }}</td>
                        <td class="actions">
                            {{ include('admin/section/_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="section" 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.sections.entity'|trans({'%entity%': 1}) }}</h5>
      </div>
      <div class="modal-body modal__txts">
        {{ include('admin/section/_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 %}