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

{% block title %}{{ item.title }} — {{ site.schoolName }}{% endblock %}
{% block meta_description %}{{ item.excerpt ?: item.title }}{% endblock %}
{% block og_type %}article{% endblock %}
{% block og_image %}{% if item.image %}{{ absolute_url(media_url('uploads/images/' ~ item.image)) }}{% elseif driveCover %}{{ driveCover }}{% else %}{{ parent() }}{% endif %}{% endblock %}

{% block json_ld %}
{% set eventSchema = {
    '@context': 'https://schema.org',
    '@type': 'Event',
    'name': item.title,
    'description': item.excerpt ?: item.title,
    'startDate': item.occurredAt|date('c'),
    'eventAttendanceMode': 'https://schema.org/OfflineEventAttendanceMode',
    'eventStatus': 'https://schema.org/EventScheduled',
    'location': {
        '@type': 'Place',
        'name': site.schoolName,
        'address': {
            '@type': 'PostalAddress',
            'streetAddress': site.address,
            'addressLocality': 'Votorantim',
            'addressRegion': 'SP',
            'postalCode': site.cep,
            'addressCountry': 'BR'
        }
    },
    'organizer': {
        '@type': 'School',
        'name': site.schoolName,
        'url': app.request.schemeAndHttpHost
    }
} %}
{% if item.image %}
    {% set eventSchema = eventSchema|merge({ image: absolute_url(media_url('uploads/images/' ~ item.image)) }) %}
{% endif %}
<script type="application/ld+json">{{ eventSchema|json_encode|raw }}</script>
{% endblock %}

{% block body %}
{% set cover = item.image ? media_url('uploads/images/' ~ item.image) : driveCover %}
{% set body = item.content|striptags|trim %}
{% set excerpt = item.excerpt|trim %}
{% set showBody = body and excerpt and body != excerpt and body|length >= 80 %}
{% set download %}
    {% if item.folderUrl %}
        <a class="btn btn-gold" href="{{ item.folderUrl }}" target="_blank" rel="noopener">
            <i class="fa-solid fa-download"></i> Baixar fotos
        </a>
    {% endif %}
{% endset %}

{% if cover %}
    <section class="event-hero">
        <img class="event-hero__image" src="{{ cover }}" alt="{{ item.title }}" fetchpriority="high" decoding="async">
        <div class="event-hero__shade" aria-hidden="true"></div>
        <div class="wrap event-hero__inner">
            <div class="event-hero__card">
                <time>{{ item.occurredAt|date('d/m/Y') }}</time>
                <h1>{{ item.title }}</h1>
                {% if excerpt %}<p class="lead">{{ item.excerpt }}</p>{% endif %}
                {{ download }}
            </div>
        </div>
    </section>
{% else %}
    <section class="page-hero">
        <div class="wrap">
            <time>{{ item.occurredAt|date('d/m/Y') }}</time>
            <h1>{{ item.title }}</h1>
            {% if excerpt %}<p class="lead">{{ item.excerpt }}</p>{% endif %}
            {{ download }}
        </div>
    </section>
{% endif %}

<article class="wrap event-page">
    {% if showBody %}
        <div class="event-page__card">
            <div class="prose">{{ item.content|raw }}</div>
        </div>
    {% endif %}

    {% if images %}
        <section class="event-gallery" data-controller="lightbox">
            <div class="event-gallery__head">
                <h2>Fotos</h2>
            </div>
            <div hidden>
                {% for image in images %}
                    <span data-lightbox-target="item" data-src="{{ image.viewUrl }}" data-alt="{{ image.name }}" data-download="{{ image.downloadUrl }}"></span>
                {% endfor %}
            </div>
            <div class="event-gallery__stage">
                {% if images|length > 1 %}
                    <button type="button" class="event-gallery__nav event-gallery__nav--prev" data-action="lightbox#prev" aria-label="Foto anterior">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                {% endif %}
                <div class="event-gallery__frame">
                    <div class="event-gallery__shot">
                        <button type="button" class="event-gallery__main" data-action="lightbox#open" aria-label="Ampliar foto">
                            <img data-lightbox-target="preview" src="{{ images[0].viewUrl }}" alt="{{ images[0].name }}" loading="lazy">
                        </button>
                        <a class="photo-dl photo-dl--main" data-lightbox-target="download" href="{{ images[0].downloadUrl }}" target="_blank" rel="noopener" aria-label="Baixar esta foto">
                            <i class="fa-solid fa-download" aria-hidden="true"></i>
                        </a>
                    </div>
                </div>
                {% if images|length > 1 %}
                    <button type="button" class="event-gallery__nav event-gallery__nav--next" data-action="lightbox#next" aria-label="Próxima foto">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                {% endif %}
            </div>
            {% if images|length > 1 %}
                <div class="event-gallery__strip">
                    <button type="button" class="event-gallery__scroll" data-lightbox-target="scrollButton" data-lightbox-direction-param="-1" data-action="lightbox#scrollThumbs" aria-label="Rolar miniaturas para a esquerda" hidden>
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <div class="event-gallery__thumbs" data-lightbox-target="scroller">
                        {% for image in images %}
                            <div class="event-gallery__thumb">
                                <button
                                    type="button"
                                    data-lightbox-target="thumb"
                                    data-action="lightbox#select"
                                    data-lightbox-index-param="{{ loop.index0 }}"
                                    aria-label="{{ image.name }}"
                                >
                                    <img src="{{ image.thumbnail }}" alt="" loading="lazy">
                                </button>
                                <a class="photo-dl photo-dl--thumb" href="{{ image.downloadUrl }}" target="_blank" rel="noopener" aria-label="Baixar {{ image.name }}">
                                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                                </a>
                            </div>
                        {% endfor %}
                    </div>
                    <button type="button" class="event-gallery__scroll" data-lightbox-target="scrollButton" data-lightbox-direction-param="1" data-action="lightbox#scrollThumbs" aria-label="Rolar miniaturas para a direita" hidden>
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                </div>
            {% endif %}
            <div
                class="lightbox"
                data-lightbox-target="overlay"
                data-action="click->lightbox#onBackdrop"
                hidden
                tabindex="-1"
                role="dialog"
                aria-modal="true"
                aria-label="Galeria de fotos"
            >
                <a class="lightbox__download" data-lightbox-target="download" href="{{ images[0].downloadUrl }}" target="_blank" rel="noopener" aria-label="Baixar esta foto">
                    <i class="fa-solid fa-download" aria-hidden="true"></i>
                </a>
                <button type="button" class="lightbox__close" data-action="lightbox#close" aria-label="Fechar">
                    <i class="fa-solid fa-xmark"></i>
                </button>
                {% if images|length > 1 %}
                    <button type="button" class="lightbox__nav lightbox__nav--prev" data-action="lightbox#prev" aria-label="Anterior">
                        <i class="fa-solid fa-chevron-left"></i>
                    </button>
                    <button type="button" class="lightbox__nav lightbox__nav--next" data-action="lightbox#next" aria-label="Próximo">
                        <i class="fa-solid fa-chevron-right"></i>
                    </button>
                {% endif %}
                <figure class="lightbox__stage">
                    <img data-lightbox-target="stage" alt="">
                    <figcaption data-lightbox-target="caption"></figcaption>
                </figure>
            </div>
        </section>
    {% elseif item.embedUrl %}
        <section class="event-gallery">
            <div class="event-gallery__head">
                <h2>Fotos</h2>
            </div>
            <iframe class="drive-embed" title="{{ item.title }}" src="{{ item.embedUrl }}" loading="lazy"></iframe>
        </section>
    {% endif %}

    {% include '_share.html.twig' with { title: item.title } %}
</article>
{% endblock %}