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

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

{% block body %}

    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bxs-bowl-hot' ></i>",
        'title': 'app.admin.recipes.title'|trans,
        'links': [
            {
                'url': path('admin.category.index'),
                'label': 'app.admin.categories.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="recipe" type="button" >
        {{ 'app.admin.action.new'|trans({'%gender%': 'female'}) }} {{ 'app.admin.recipes.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
    </button>
    <a href="{{ path('admin.recipe.index',{order:'random'}) }}" class="btn btn-primary mb-2 btn_rndm" type="button">
        <i class='bx bx-dice-5'></i>
    </a>
    {% if isRandom %}
    <a href="{{ path('admin.recipe.index') }}" class="btn btn-primary mb-2 btn_rndm" type="button">
        <i class='bx bx-reset'></i>
    </a>
    {% endif %}
    {#<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.recipes.entity'|trans({'%entity%': 1}) }} <i class='bx bx-plus-circle' ></i>
    </button>
    <div class="collapse" id="collapseExample">
        <div class="card card-body">
            {{ include('admin/recipe/_form.html.twig') }}
        </div>
    </div>#}

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

    <div class="table__search">
        {{ include('admin/partials/_search.html.twig') }}
    </div>

    <div class="grid__archive row">
    
        {% for recipe in recipes %}
            <div class="col grid__item recipe__item">

                {% if recipe.thumbnail is not empty and recipe.thumbnail.url is not empty %}
                    <div class="img" style="background-image:url({{ recipe.thumbnail.url }})">
                        <div class="category">{{ recipe.category.title | default('---') }}</div>
                    </div>
                {% else %}
                    <div class="img img__placeholder" style="background-image:url({{ asset('images/_grocerylist-placeholder.jpg') }})">
                        <div class="category">{{ recipe.category.title | default('---') }}</div>
                    </div>
                {% endif %}

                <div class="title"><a href="{{ url('admin.recipe.show', {slug: recipe.slug, id: recipe.id}) }}">{{ recipe.title }}</a></div>
                
                {{ include('admin/recipe/_delete_form.html.twig') }}
            </div>
        {% else %}
                <span>{{ 'app.err.norecordfound'|trans }}</span>
        {% endfor %}

    </div>
    {% if isRandom == false %}
        {# display navigation #}
        <div class="navigation">
            {{ knp_pagination_render(recipes) }}
        </div>
    {% endif %}
</div>
{% endblock %}

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