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

{% block title %}{{ grocery_list.title }}{% endblock %}

{% set group = app.request.query.get('group') %}
{% set id = app.request.query.get('gid') %}

{% block body %}
<div id="grocerylist__single" data-controller="listmobiletoggle">
    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bx-list-ul' ></i>",
        'title': grocery_list.title,
        'links': [
            {
                'url': path('admin.list.index'),
                'label': "<i class='bx bx-left-arrow-alt'></i>" ~ 'app.admin.lists.title'|trans,
                'class': 'btn_page_title_overflow btn-primary btn'
            }
        ]
    }) }}

    <div class="container">
        <i class='bx bxs-star current__list__notice'></i>

        <div class="mobile__btns navigation desktop__hide">
            <nav>
                <ul class="pagination">
                    <li class="page-item {% if group != 'grocerylist' or id != 'recipes' %}disabled{% endif %}">
                        <span data-group="grocerylist" data-id="ingredients" class="btn-toggler page-link">
                            {{ 'app.admin.ingredients.title'|trans }}
                        </span>
                    </li>
                    <li class="page-item {% if group == 'grocerylist' and id == 'recipes' %}disabled{% endif %}">
                        <span data-group="grocerylist" data-id="recipes" class="btn-toggler page-link">
                            {{ 'app.admin.recipes.title'|trans }}
                        </span>
                    </li>
                </ul>
            </nav>
        </div>
                   
        <div class="grocerylist__cols">
            <div data-group="grocerylist" data-id="ingredients" 
            class="{% if group == 'grocerylist' and id == 'recipes' %}mobile__hide{% else %}mobile__show{% endif %} area-toggler grocerylist__col__left ingredients__products">
                <div class="list__title">
                    <h2 class="mobile__hide">{{ 'app.admin.ingredients.title'|trans }}</h2>
                    <a class="btn-primary btn mb-2" href="{{ path('admin.ingredient.index') }}"><i class='bx bx-search'></i></a>
                    <a class="btn-primary btn mb-2" href="{{ path('admin.ingredient.index', { create: 'ingredient' }) }}"><i class='bx bx-plus'></i></a>
                </div>
                <ul class="listelementchecker" data-controller="listelementchecker">
                    {% if elements is not empty %}
                        {% for element in elements %}
                            {% if element.hasElement is same as true %}
                                <li class="section">
                                    {{ include('admin/partials/grocerylist_section_card.html.twig') }}
                                </li>
                            {% endif %}
                        {% endfor %}
                    {% else %}
                        <li><strong class="section__elements__none">{{ 'app.admin.ingredients.none'|trans }}</strong></li>
                    {% endif %}
                </ul>
            </div>
            <div data-group="grocerylist" data-id="recipes" 
            class="{% if group == 'grocerylist' and id == 'recipes' %}mobile__show{% else %}mobile__hide{% endif %} area-toggler grocerylist__col__right recipes">
                <div class="list__title">
                    <h2 class="mobile__hide">{{ 'app.admin.recipes.title'|trans }}</h2>
                    <a class="btn-primary btn mb-2" href="{{ path('admin.recipe.index') }}"><i class='bx bx-search'></i></a>
                    <a class="btn-primary btn mb-2" href="{{ path('admin.recipe.index', { create: 'recipe' }) }}"><i class='bx bx-plus'></i></a>
                </div>
                <ul>
                    {% if recipes is not empty %}
                        {% for recipe in recipes %}
                            <li>
                                {{ include('admin/partials/grocerylist_recipe_card.html.twig') }}
                            </li>
                        {% endfor %}
                    {% else %}
                        <li><strong class="section__elements__none">{{ 'app.admin.recipes.none'|trans }}</strong></li>
                    {% endif %}
                </ul>
            </div>
        </div>

        <hr>

        <div data-controller="textareaautosize">
            {{ include('admin/grocery_list/_comments_form.html.twig') }}
        </div>

        {% if grocery_list.publicSlug is not empty %}
            
        <span>{{ 'app.admin.lists.publicslug.notice'|trans }}</span>
        <input type="text" value="{{ url('page.list.show', {'publicSlug': grocery_list.publicSlug}) }}">
        <hr>

        {% endif %}

        <div class="page__actions">
            <a class="btn-primary btn mb-2" href="{{ path('admin.list.edit', {'id': grocery_list.id}) }}"><i class='bx bx-edit-alt' ></i></a>
            {{ include('admin/grocery_list/_delete_form.html.twig') }}
        </div>

    </div>
</div>
{% endblock %}

{% block outside_body %}
<div class="modal modal_comments fade" role="dialog" aria-hidden="true" data-controller="modallistcomment">
  <div class="modal-dialog modal-dialog-scrollable" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title modal__title"><span class="ingredient"></span><span class="comment__title">{{ 'app.modal.comments.title'|trans }}</span></h5>
      </div>
      <div class="modal-body modal__txts">
        <p>{{ 'app.modal.comments.notice'|trans }}</p>
        <div class="inputs">
        </div>
      </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"><i class="bx bx-check"></i></button>
      </div>
    </div>
  </div>
</div>
{% endblock %}