{% extends 'base.html.twig' %}
{% block title %}{{ 'stories.index.title'|trans }}{% endblock %}
{% block meta_description %}{{ 'stories.index.meta_description'|trans }}{% endblock %}

{% from '_macros/image.html.twig' import picture %}
{% block body %}

{# Hero #}
<section class="pt-20 pb-8">
    <div class="max-w-6xl mx-auto px-4">
        <h1 class="font-display text-4xl sm:text-5xl font-extrabold text-dark tracking-tight" style="text-wrap: balance">{{ 'stories.index.heading'|trans }}</h1>
        <p class="mt-3 text-gray-500 text-lg">{{ 'stories.index.subtitle'|trans }}</p>
    </div>
</section>

{% if seasons is empty %}
<p class="text-gray-400 text-center py-20 text-lg">{{ 'stories.index.empty'|trans }}</p>
{% else %}
<div class="max-w-6xl mx-auto px-4 pb-20 lg:grid lg:grid-cols-[15rem_1fr] lg:gap-10 scroll-mt-20" data-controller="story-library">

    {# Season menu: chips on mobile, sticky sidebar on desktop #}
    <aside class="sticky top-16 z-10 -mx-4 px-4 py-3 mb-6 bg-white/90 backdrop-blur-sm lg:top-24 lg:self-start lg:m-0 lg:p-0 lg:bg-transparent lg:backdrop-blur-none">
        <p class="hidden lg:block mb-3 text-xs font-bold uppercase tracking-widest text-gray-400">{{ 'stories.index.seasons'|trans }}</p>
        <div class="season-tabs" role="tablist" aria-label="{{ 'stories.index.seasons'|trans }}">
            {% for season in seasons %}
            {% set count = season.stories|length %}
            <a href="#sezon-{{ season.number }}"
               id="season-tab-{{ season.number }}"
               class="season-tab"
               role="tab"
               aria-controls="sezon-{{ season.number }}"
               aria-selected="{{ loop.first ? 'true' : 'false' }}"
               data-season="{{ season.number }}"
               data-story-library-target="tab"
               data-action="click->story-library#show keydown->story-library#navigate">
                <span class="season-tab-label">{{ 'stories.index.season'|trans({'%number%': season.number}) }}</span>
                <span class="season-tab-name">{{ season.name }}</span>
                <span class="season-tab-meta" data-story-library-target="count" data-season="{{ season.number }}">{{ count }} {{ count == 1 ? 'odcinek' : (count < 5 ? 'odcinki' : 'odcinków') }}</span>
                <span class="season-tab-progress" aria-hidden="true"><span data-story-library-target="progress" data-season="{{ season.number }}"></span></span>
            </a>
            {% endfor %}
        </div>
        <p class="hidden lg:block mt-4 text-xs leading-relaxed text-gray-400">{{ 'stories.index.progress_note'|trans }}</p>
    </aside>

    {# Episodes of one season, as tiles #}
    <div>
        {% for season in seasons %}
        {% set first = season.stories|first %}
        <section id="sezon-{{ season.number }}"
                 class="scroll-mt-24 {{ not loop.first ? 'mt-16 lg:mt-0' }}"
                 role="tabpanel"
                 aria-labelledby="season-tab-{{ season.number }}"
                 data-season="{{ season.number }}"
                 data-story-library-target="panel">

            <header class="season-panel-header">
                <div>
                    <p class="season-panel-label">{{ 'stories.index.season'|trans({'%number%': season.number}) }}</p>
                    <h2 class="season-panel-title">{{ season.name }}</h2>
                </div>
                {% if first %}
                <a href="{{ path('app_story_show', {slug: first.slug}) }}" class="season-resume"
                   data-story-library-target="resume" data-season="{{ season.number }}">
                    <span class="season-resume-icon" aria-hidden="true">
                        <svg class="w-3.5 h-3.5" fill="currentColor" viewBox="0 0 24 24"><path d="M8 5v14l11-7z"/></svg>
                    </span>
                    <span data-story-library-target="resumeLabel" data-season="{{ season.number }}">{{ 'stories.index.start'|trans }}</span>
                </a>
                {% endif %}
            </header>

            <div class="grid gap-x-5 gap-y-9 sm:grid-cols-2 xl:grid-cols-3">
                {% for story in season.stories %}
                {% set char = characters[story.character] ?? null %}
                {% set accent = char ? char.color : '#4A90D9' %}
                <a href="{{ path('app_story_show', {slug: story.slug}) }}"
                   class="story-tile"
                   style="--card-accent: {{ accent }}; animation-delay: {{ loop.index0 * 60 }}ms"
                   data-story-library-target="tile"
                   data-slug="{{ story.slug }}"
                   data-episode="{{ story.episode }}">

                    <div class="story-tile-thumb">
                        {% if story.cover is defined %}
                            {{ picture(story.cover, 'story_thumb', story.title, '', (loop.parent.loop.first and loop.index <= 3) ? 'eager' : 'lazy', 640, 360) }}
                        {% else %}
                            <div class="story-tile-fallback">
                                {% if char %}
                                <div class="story-tile-fallback-icon">
                                    {{ picture('images/characters/' ~ story.character ~ '_ikona.png', 'char_icon', char.name, 'w-full h-full object-cover') }}
                                </div>
                                {% endif %}
                            </div>
                        {% endif %}

                        <span class="story-tile-chip story-tile-ep">{{ 'stories.index.episode_short'|trans({'%number%': story.episode}) }}</span>
                        <span class="story-tile-badges">
                            {% if story.isNew|default(false) %}<span class="story-tile-chip story-tile-new">{{ 'stories.index.new_badge'|trans }}</span>{% endif %}
                            {% if story.isSeasonFinale|default(false) %}<span class="story-tile-chip story-tile-finale">{{ 'stories.index.finale_badge'|trans }}</span>{% endif %}
                        </span>
                        <span class="story-tile-corner">
                            {% if story.youtubeUrl %}<span class="story-tile-chip" title="{{ 'stories.show.mode_watch'|trans }}">▶</span>{% endif %}
                            {% if story.audio ?? null %}<span class="story-tile-chip" title="{{ 'stories.show.mode_listen'|trans }}">🎧</span>{% endif %}
                            <span class="story-tile-chip">{{ 'stories.index.minutes'|trans({'%time%': story.readingTime}) }}</span>
                        </span>
                        <span class="story-tile-chip story-tile-read" data-read-only hidden>✓ {{ 'stories.index.read_mark'|trans }}</span>
                        <span class="story-tile-progress" data-read-only hidden></span>
                        <span class="story-tile-hover" aria-hidden="true">
                            <span>
                                <svg class="w-4 h-4" fill="none" stroke="currentColor" stroke-width="2" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253"/></svg>
                                {{ 'stories.index.read'|trans }}
                            </span>
                        </span>
                    </div>

                    <div class="story-tile-info">
                        {% if char %}
                        <div class="story-tile-avatar">
                            {{ picture('images/characters/' ~ story.character ~ '_ikona.png', 'char_icon', '', 'w-full h-full object-cover') }}
                        </div>
                        {% endif %}
                        <div class="min-w-0">
                            <h3 class="story-tile-title">{{ story.title }}</h3>
                            <p class="story-tile-meta">{{ char ? char.name ~ ' · ' }}{{ 'stories.index.episode'|trans({'%number%': story.episode}) }}</p>
                            <p class="story-tile-excerpt">{{ story.excerpt }}</p>
                        </div>
                    </div>
                </a>
                {% endfor %}
            </div>
        </section>
        {% endfor %}
    </div>
</div>
{% endif %}
{% endblock %}