{% set item = this.item %}

<article {{ attributes.defaults({ class: 'news-detail' }) }}>
    {% if item %}
        {% set image = this.primaryImage %}

        <header class="mx-auto max-w-4xl text-center">
            <div class="mb-4 flex flex-wrap justify-center gap-3 text-xs uppercase text-foreground/60">
                {% if item.eventAt %}
                    <time datetime="{{ item.eventAt|date('Y-m-d') }}">{{ item.eventAt|date('d/m/Y') }}</time>
                {% endif %}
                {% if item.category %}
                    <span>{{ item.category.name }}</span>
                {% endif %}
            </div>

            <h1 class="font-serif text-4xl uppercase text-foreground sm:text-5xl">{{ item.title }}</h1>

            {% if item.title2 %}
                <p class="mx-auto mt-4 max-w-2xl text-base uppercase text-accent">{{ item.title2 }}</p>
            {% endif %}
        </header>

        {% if image %}
            <div class="mx-auto mt-10 max-w-5xl overflow-hidden border border-foreground/10">
                <twig:Image
                    mapping="image"
                    class="h-[28rem] w-full"
                    picture:class="h-full w-full"
                    img:class="h-full w-full object-cover"
                    path="{{ image.path }}"
                    pathLandscape="{{ image.path }}"
                    ratio="16/9"
                    imageWidth="{{ image.width ?: 1200 }}"
                    imageHeight="{{ image.height ?: 675 }}"
                    alt="{{ image.title ?: item.title }}"
                />
            </div>
        {% endif %}

        <div class="mx-auto mt-10 max-w-3xl text-base leading-8 text-foreground/80 [&_a]:text-accent [&_a]:underline [&_h2]:mt-10 [&_h2]:font-serif [&_h2]:text-2xl [&_h2]:uppercase [&_h3]:mt-8 [&_h3]:font-serif [&_h3]:text-xl [&_h3]:uppercase [&_p]:mb-5 [&_p]:mt-0 [&_ul]:mb-5 [&_ul]:list-disc [&_ul]:pl-6">
            {{ item.text|raw }}
        </div>

        {% if item.moreInfo %}
            <section class="mx-auto mt-10 max-w-3xl border border-foreground/10 bg-surface p-6">
                <h2 class="font-serif text-xl uppercase text-foreground">{{ 'news.detail.more_info'|trans }}</h2>
                <div class="mt-4 text-sm leading-7 text-foreground/75 [&_a]:text-accent [&_a]:underline [&_p]:mb-4 [&_p]:mt-0">
                    {{ item.moreInfo|raw }}
                </div>
            </section>
        {% endif %}

        {% if item.file %}
            <div class="mx-auto mt-8 max-w-3xl">
                <a href="{{ item.file.path|file_path }}" target="_blank" class="inline-flex items-center border border-foreground px-5 py-3 text-sm uppercase text-foreground transition hover:border-accent hover:text-accent">
                    {{ 'news.detail.download_file'|trans }}
                </a>
            </div>
        {% endif %}

        {% set back_url = this.backUrl %}
        {% if back_url %}
            <div class="mx-auto mt-12 max-w-3xl">
                <a href="{{ back_url }}" class="inline-flex items-center border border-accent bg-accent px-5 py-3 text-sm uppercase text-on-accent transition hover:opacity-80">
                    {{ 'news.detail.back'|trans }}
                </a>
            </div>
        {% endif %}
    {% else %}
        <p class="text-center text-foreground/70">{{ 'news.detail.not_found'|trans }}</p>
    {% endif %}
</article>
