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

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

{% block body %}

    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bx-list-ul' ></i>",
        'title': 'app.admin.lists.title'|trans
    }) }}
   
    <div class="container">

        <button class="btn btn-primary mb-2 btn_modal_entity" data-entity="list" type="button" >
            {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.lists.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.lists.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
        </button>
        <div class="collapse" id="collapseExample">
            <div class="card card-body">
                {{ include('admin/grocery_list/_form.html.twig') }}
            </div>
        </div>#}

        {# total items count #}
        <div class="table__count">
            {{ 'app.admin.lists.count'|trans({'%entity%': 1}) }} : {{ grocery_lists.getTotalItemCount }}
        </div>
        
        <div class="table__container">
        <table class="table table__thead__tbody">
            <thead>
            <tr>
                <th{% if grocery_lists.isSorted('a.title') %} class="sorted"{% endif %}>
                    {{ knp_pagination_sortable(grocery_lists, 'Title', 'l.title') }}
                </th>
                <th class="mobile__hide {% if grocery_lists.isSorted('li.slug') %}sorted{% endif %}">
                    {{ knp_pagination_sortable(grocery_lists, 'Slug', 'l.slug') }}
                </th>
                {#<th>CreatedAt</th>
                <th>UpdatedAt</th>#}
                <th class="actions">delete</th>
            </tr>
            </thead>
            <tbody>
            {% for grocery_list in grocery_lists %}
                <tr>
                    <td><a href="{{ path('admin.list.show', {'slug': grocery_list.slug,'id': grocery_list.id}) }}">{{ grocery_list.title }}</a></td>
                    <td class="mobile__hide">{{ grocery_list.slug }}</td>
                    {#<td>{{ grocery_list.createdAt ? grocery_list.createdAt|date('Y-m-d H:i:s') : '' }}</td>
                    <td>{{ grocery_list.updatedAt ? grocery_list.updatedAt|date('Y-m-d H:i:s') : '' }}</td>#}
                    <td class="actions__delete">
                        {{ include('admin/grocery_list/_delete_form.html.twig') }}
                    </td>
                </tr>
            {% else %}
                <tr>
                    <td colspan="5">{{ 'app.err.norecordfound'|trans }}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
        </div>

        {# display navigation #}
        <div class="navigation">
            {{ knp_pagination_render(grocery_lists) }}
        </div>

    </div>
{% endblock %}

{% block outside_body %}
<div class="modal modal_entity fade" role="dialog" aria-hidden="true" data-entity="list" 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.lists.entity'|trans({'%entity%': 1}) }}</h5>
      </div>
      <div class="modal-body modal__txts">
        {{ include('admin/grocery_list/_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 %}