{% extends 'front/base_public.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" class="public__access" data-controller="listmobiletoggle">
    {{ include('front/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">

        <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>
                </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('front/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>
                </div>
                <ul>
                    {% if recipes is not empty %}
                        {% for recipe in recipes %}
                            <li>
                                {{ include('front/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('front/grocery_list/_comments_form.html.twig') }}
        </div>

        <hr>

        <div id="list__owner">
            <div class="list__owner-avatar" 
                {% if grocery_list.user is not empty and grocery_list.user.picture is not empty and grocery_list.user.picture.url is not empty %}
                    style="background-image:url({{ grocery_list.user.picture.url }})"
                {% endif %}>
            </div>
            <div class="list__owner-username">
                <span id="nav-footer-username">{{ 'app.front.list.owner.username'|trans}} <strong>{{ grocery_list.user.username }}</strong></span>
            </div>
        </div>

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