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

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

{% block body %}

    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bxs-bowl-rice' ></i>",
        'title': 'app.admin.ingredients.title'|trans,
        'links': [
            {
                'url': path('admin.section.index'),
                'label': 'app.admin.sections.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="ingredient" type="button" >
        {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.ingredients.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%': 'male'}) }} {{ 'app.admin.ingredients.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
    </button>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            {{ include('admin/ingredient/_form.html.twig') }}
        </div>
    </div>#}

    {# total items count #}
    <div class="table__count">
        {{ 'app.admin.lists.count'|trans({'%entity%': 1}) }} : {{ ingredients.getTotalItemCount }}
    </div>

    <div class="table__search">
        {{ include('admin/partials/_search.html.twig') }}
    </div>
    
    <div class="table__container">
    <table class="table table__thead__tbody">
        <thead>
        <tr>
            {# sorting of properties based on query components #}
            <th{% if ingredients.isSorted('a.title') %} class="sorted"{% endif %}>
                {{ knp_pagination_sortable(ingredients, 'Title', 'i.title') }}
            </th>
            <th>Sections</th>
            <th>Recipes ready</th>
            <th class="mobile__hide {% if ingredients.isSorted('i.slug') %}sorted{% endif %}">
                {{ knp_pagination_sortable(ingredients, 'Slug', 'i.slug') }}
            </th>
            <th class="actions">Actions</th>
        </tr>
        </thead>
        <tbody>

        {# table body #}
        {% for ingredient in ingredients %}
            <tr {% if loop.index is odd %}class="color"{% endif %}>
                <td><a href="{{ url('admin.ingredient.show', {slug: ingredient.slug, id: ingredient.id}) }}">{{ ingredient.title }}</a></td>
                <td>{{ ingredient.section.title | default('---') }}</td>
                <td>
                {% if ingredient.availableRecipe is not empty %}
                    <div class="table__notice good"><i class='bx bx-check'></i></div>
                {% else %}
                    <div class="table__notice bad"><i class='bx bx-block' ></i></div>
                {% endif %}
                </td>
                <td class="mobile__hide">{{ ingredient.slug }}</td>
                <td class="actions">
                    {{ include('admin/ingredient/_delete_form.html.twig') }}
                </td>
            </tr>
            {% else %}
                <tr>
                    <td colspan="6">{{ 'app.err.norecordfound'|trans }}</td>
                </tr>
            {% endfor %}

        </tbody>
    </table>
    </div>
    
    {# display navigation #}
    <div class="navigation">
        {{ knp_pagination_render(ingredients) }}
    </div>
</div>
{% endblock %}

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