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

{% block title %}{{ recipe.title }}{% endblock %}

{% block body %}

<div id="single__recipe">

    {{ include('admin/partials/page_title.html.twig', {
        'icon': "<i class='icon__page_title bx bxs-bowl-hot' ></i>",
        'title': recipe.title,
        'links': [
            {
                'url': path('admin.recipe.index'),
                'label': "<i class='bx bx-left-arrow-alt'></i>" ~ 'app.admin.recipes.title'|trans,
                'class': 'btn_page_title_overflow btn-primary btn'
            }
        ]
    }) }}

    <div class="container">

        <div class="cols">
            <div class="col__left">
                <div class="single__image">
                {% if recipe.thumbnail is not empty and recipe.thumbnail.url is not empty %}
                    <img src="{{ recipe.thumbnail.url }}" alt="{{ recipe.thumbnail.title }}">
                {% else %}
                    <img src="{{ asset('images/_grocerylist-placeholder.jpg') }}" alt="placeholder">
                {% endif %}
                </div>

                <div class="card">
                    <div class="single__categories">
                        {% if recipe.category is defined and recipe.category.title is defined and recipe.category.title is not empty %}
                            <span><a href="{{ url('admin.category.show', {id: recipe.category.id,slug: recipe.category.slug}) }}">{{ recipe.category.title }}</a></span>
                        {% else %}
                            <span>---</span>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col__right">
                <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
                    <i class='bx bx-edit-alt' ></i>
                </button>
                <div class="single__edit">
                    <div class="collapse" id="collapseExample">
                        <div class="card card-body">
                            {{ include('admin/recipe/_form.html.twig', {'button_label': "<i class='bx bx-edit-alt' ></i>"|raw}) }}
                        </div>
                    </div>
                </div>

                <div class="single__pres">
                    {% if recipe.content is not empty %}
                    <div class="single__content">
                        <div class="collapse show reducable_item" id="collapseExample" data-controller="reducable">
                            <div class="card card-body">
                                {{ recipe.content | raw | nl2br }}
                            </div>
                        </div>
                    </div>
                    {% endif %}
                </div>

                <div class="single__form">
                    <div class="collapse show" id="collapseExample">
                        <div class="card card-body">
                            {{ include('admin/recipe/_form_to_list.html.twig') }}
                        </div>
                    </div>
                </div>
            </div>
        </div>

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