{% extends 'front/base.html.twig' %}
{% block title %}
    {{ visual.name }}
{% endblock %}
{% block body %}
    <section class="py-3" id="section-library">
        <div class="container" id="#library-item">
            <div class="row row-cols-1 row-cols-md-2 g-3">
                <div class="col">
                    <img src="{{ vich_uploader_asset(visual, 'imageFile', 'App\\LibraryBundle\\Entity\\LibraryVisual') | mediaCache('large') }}"
                         class="js-library_canvas img-fluid" alt=""/>
                    {# <object type="image/svg+xml" id="js-mySvg" data="{{ visual.imagePath }}"></object> #}
                </div>
                <div class="col">
                    <div class="flex-between-center">
                        <h2 class="">
                            {{ visual.name }}
                        </h2>
                        <div class="btn-group" role="group">
                            {% include '@Library/front/_btn_favorite.html.twig' %}
                            <a download href="{{ vich_uploader_asset(visual, 'imageFile', 'App\\LibraryBundle\\Entity\\LibraryVisual') | mediaCache('watermark') }}" class="btn btn-outline-secondary"><i class="bi bi-cloud-download"></i></a>
                        </div>

                    </div>
                    {# <hr/>
                    <input type="text" id="js-svgUpdateText" placeholder="Entrez votre texte" data-svg-field="#customText" data-svg="#js-mySvg" /> #}
                    <hr/>
                    <div>
                        {{ include('common/editorjs/_block.html.twig', {blocks:visual.description|cmsBlocks}) }}
                    </div>
                    <ul>
                        {% if visual.visualType is not empty %}
                            <li>
                                Type de visuel :
                                {{ visual.visualType.name }}
                            </li>
                        {% endif %}
                        {% if visual.category is not empty %}
                            <li>
                                Catégorie :
                                {{ visual.category.name }}
                            </li>
                        {% endif %}
                        {% if visual.complexity is not empty %}
                            <li>
                                Complexité :
                                {{ visual.complexity.name }}
                            </li>
                        {% endif %}
                        {% if visual.subjectOrientation is not empty %}
                            <li>
                                Orientation du sujet :
                                {{ visual.subjectOrientation.name }}
                            </li>
                        {% endif %}
                        {% if visual.colorDensity is not empty %}
                            <li>
                                Densité de couleur :
                                {{ visual.colorDensity.name }}
                            </li>
                        {% endif %}
                        {% if visual.format is not empty %}
                            <li>
                                Format :
                                {{ visual.format.name }}
                            </li>
                        {% endif %}

                        {% if visual.placements is not empty %}
                            <li>
                                Idée de placement :
                                <ul>
                                    {% for placement in visual.placements %}
                                        <li>
                                            {{ placement.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.tags is not empty %}
                            <li>
                                Mots clés :
                                <ul>
                                    {% for tag in visual.tags %}
                                        <li>
                                            {{ tag.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.colors is not empty %}
                            <li>
                                Couleurs :
                                <ul>
                                    {% for color in visual.colors %}
                                        <li>
                                            {{ color.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.moods is not empty %}
                            <li>
                                Ambiance :
                                <ul>
                                    {% for mood in visual.moods %}
                                        <li>
                                            {{ mood.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.styles is not empty %}
                            <li>
                                Esprits :
                                <ul>
                                    {% for style in visual.styles %}
                                        <li>
                                            {{ style.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.graphicStyles is not empty %}
                            <li>
                                Style graphique :
                                <ul>
                                    {% for graphicStyle in visual.graphicStyles %}
                                        <li>
                                            {{ graphicStyle.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                        {% if visual.themes is not empty %}
                            <li>
                                Thématiques :
                                <ul>
                                    {% for theme in visual.themes %}
                                        <li>
                                            {{ theme.name }}
                                        </li>
                                    {% endfor %}
                                </ul>
                            </li>
                        {% endif %}
                    </ul>
                </div>
            </div>
        </div>
    </section>
{% endblock %}