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

{% block title %}Association TAM : Ressources{% endblock %}

{% block body %}
    <main>
        {% include "partials/_left_banner.html.twig" %}
            <section class="resources section">
                {% if rubricInfo.title is not empty or rubricInfo.getGalleryImage.path is defined or rubricInfo.text is empty %}
                <section>
                    <h1 class="section__title">{{ rubricInfo.title }}</h1>
                    {% if rubricInfo.getGalleryImage is not empty %}
                    <img  class="section__image" src="{{ asset(rubricInfo.getGalleryImage.path) }}" alt="{{ rubricInfo.getGalleryImage.alt }}">
                    {% endif %}
                    <div class="subsection__text">{{ rubricInfo.text|quill_html|raw }}</div>
                </section>
                {% endif %}
                {% for resourcesSection in resourcesSections %}
                <section class="subsection">
                    {% if resourcesSection.title is not empty %}
                        <h2
                            class="section__title {{ resourcesSection.aside|default ? 'subsection__title-grid' : '' }}">
                            {{ resourcesSection.title }}
                        </h2>
                    {% endif %}
                    <div>
                    <div class="subsection__text">{{ resourcesSection.text|quill_html|raw }}</div>
                    </div>
                    {% if resourcesSection.aside is not empty %}
                        <aside class="subsection__quote {{ resourcesSection.leftSide ? 'left' : '' }}">
                            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewbox="0 -960 960 960" width="24px" fill="currentColor"><path d="m354-287 126-76 126 77-33-144 111-96-146-13-58-136-58 135-146 13 111 97-33 143ZM233-120l65-281L80-590l288-25 112-265 112 265 288 25-218 189 65 281-247-149-247 149Zm457-560 21-89-71-59 94-8 36-84 36 84 94 8-71 59 21 89-80-47-80 47ZM480-481Z"/></svg>
                            <blockquote>"{{ resourcesSection.aside }}"</blockquote>
                        </aside>
                    {% endif %}
                </section>

                {% endfor %}
                <section>
                    <h2 class="subsection__title">Vidéos</h2>
                    <p id="youtube-notice" class="youtube-placeholder__notice">
                        En cliquant sur le bouton de lecture
                        &nbsp;
                        <svg viewBox="0 0 68 48" width="34" height="24" aria-hidden="true">
                            <path fill="#f00" d="M66.52 7.74a8 8 0 0 0-5.64-5.66C56.1.8 34 .8 34 .8S11.9.8 7.12 2.08A8 8 0 0 0 1.48 7.74 83.4 83.4 0 0 0 0 24a83.4 83.4 0 0 0 1.48 16.26 8 8 0 0 0 5.64 5.66C11.9 47.2 34 47.2 34 47.2s22.1 0 26.88-1.28a8 8 0 0 0 5.64-5.66A83.4 83.4 0 0 0 68 24a83.4 83.4 0 0 0-1.48-16.26z"/>
                            <path fill="#fff" d="M45 24 27 14v20"/>
                        </svg>
                        , vous acceptez le chargement de YouTube,
                        susceptible de déposer des cookies.
                    </p>
                    <ul class="resources__videos">
                        {% for video in videos %}
                        <li>
                            {% if video.type == 'local' %}
                            <video width="320" height="240" controls>
                                <source src="{{ asset(video.path) }}" type="video/mp4">
                            </video>
                            {% elseif video.type == 'youtube' %}
                            <div class="youtube-placeholder"
                                data-src="{{ video.path }}">
                                <img
                                    src="https://i.ytimg.com/vi/{{ video.youtubeId }}/mqdefault.jpg"
                                    alt="">

                                <button type="button" class="youtube-placeholder__play" aria-label="Lire la vidéo" aria-describedby="youtube-notice">
                                    <svg viewBox="0 0 68 48" width="68" height="48" aria-hidden="true">
                                        <path fill="#f00" d="M66.52 7.74a8 8 0 0 0-5.64-5.66C56.1.8 34 .8 34 .8S11.9.8 7.12 2.08A8 8 0 0 0 1.48 7.74 83.4 83.4 0 0 0 0 24a83.4 83.4 0 0 0 1.48 16.26 8 8 0 0 0 5.64 5.66C11.9 47.2 34 47.2 34 47.2s22.1 0 26.88-1.28a8 8 0 0 0 5.64-5.66A83.4 83.4 0 0 0 68 24a83.4 83.4 0 0 0-1.48-16.26z"/>
                                        <path fill="#fff" d="M45 24 27 14v20"/>
                                    </svg>
                                </button>
                            </div>
                            {% endif %}
                        </li>
                        {% endfor %}
                    </ul>
                </section>
                {% include "partials/_gallery.html.twig" %}
                <section>
                    <h2 class="subsection__title">Supports visuels</h2>
                    <ul>
                        {% for visual in visuals %}
                        <li class="resources__visuals">
                            <div class="resources__visuals-content">
                                <div class="resources__visual-name">{{ visual.name }} :</div>
                                {% if visual.path is not empty %}
                                <div class="resources__visuals-image">
                                    <a href="{{ asset(visual.path) }}" target="_blank">
                                        <img src="{{ asset(visual.image) }}" alt="{{ visual.name }} ">
                                    </a>
                                </div>
                                {% else %}
                                <div class="resources__visuals-image">
                                    <img src="{{ asset(visual.image) }}" alt="{{ visual.name }} ">
                                </div>
                                {% endif %}
                                <p class="resources__visuals-description">{{ visual.description }}</p>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </section>
                <p>Ces ressources témoignent de notre travail de terrain, de notre démarche clinique et nos recherches.</p>
            </section>
        {% include "partials/_right_banner.html.twig" %}
    </main>
{% endblock %}