{% extends 'base.html.twig' %}
{% block title %}{{ story.title }} | Bajki TROPO{% endblock %}
{% block meta_description %}{{ story.excerpt }}{% endblock %}

{% block body %}
<article class="py-20">
    <div class="max-w-4xl mx-auto px-4">
        {# Nawigacja powrotna #}
        <a href="{{ path('app_stories') }}" class="text-sm text-gray-500 hover:text-dark transition">&larr; {{ 'stories.show.all_stories'|trans }}</a>

        {# Nagłówek #}
        <div class="mt-6 mb-10">
            <div class="flex items-center gap-3 mb-3">
                <span class="text-sm font-medium text-nova">{{ 'stories.index.season'|trans({'%number%': story.season}) }}</span>
                <span class="text-gray-300">&middot;</span>
                <span class="text-sm font-medium text-gray-400">{{ 'stories.show.episode'|trans({'%number%': story.episode}) }}</span>
                <span class="text-sm text-gray-400">{{ 'stories.show.reading_time'|trans({'%time%': story.readingTime}) }}</span>
                {% if character %}
                <span class="px-2.5 py-0.5 rounded-full text-xs font-semibold"
                      style="background-color: {{ character.color }}15; color: {{ character.color }}">
                    {{ character.emoji }} {{ character.name }}
                </span>
                {% endif %}
            </div>
            <h1 class="text-3xl sm:text-4xl font-extrabold text-dark leading-tight">{{ story.title }}</h1>
            <div class="flex items-center gap-3 mt-4">
                <a href="{{ path('app_story_pdf', {slug: story.slug}) }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-200 text-gray-600 text-sm font-medium rounded-full hover:bg-gray-50 hover:text-dark transition">
                    <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/></svg>
                    {{ 'stories.show.download_pdf'|trans }}
                </a>
                {% if is_granted('ROLE_ADMIN') %}
                <a href="{{ path('app_story_md', {slug: story.slug}) }}"
                   class="inline-flex items-center gap-2 px-5 py-2.5 bg-white border border-gray-200 text-gray-600 text-sm font-medium rounded-full hover:bg-gray-50 hover:text-dark transition">
                    <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="M4 16v1a3 3 0 003 3h10a3 3 0 003-3v-1m-4-4l-4 4m0 0l-4-4m4 4V4"/></svg>
                    Pobierz MD
                </a>
                {% endif %}
            </div>
        </div>

        {# Treść bajki — include odcinka #}
        <div class="story-content text-lg text-gray-700 leading-relaxed">
            {% include 'story/episodes/' ~ story.slug ~ '.html.twig' %}
        </div>

        {# Następny odcinek #}
        <div class="mt-16 pt-8 border-t border-gray-200">
            {% if story.nextEpisode %}
            <div class="bg-cream rounded-2xl border border-gray-200 p-6 text-center">
                <p class="text-sm text-gray-400 mb-1">{{ 'stories.show.next_episode'|trans }}</p>
                {% if story.nextEpisode.slug %}
                <a href="{{ path('app_story_show', {slug: story.nextEpisode.slug}) }}" class="text-lg font-bold text-dark hover:text-scout transition">
                    {{ story.nextEpisode.title }} &rarr;
                </a>
                {% else %}
                <p class="text-lg font-bold text-gray-400">{{ 'stories.show.coming_soon'|trans({'%title%': story.nextEpisode.title}) }}</p>
                {% endif %}
            </div>
            {% endif %}

            {# CTA #}
            <div class="mt-8 text-center">
                <p class="text-gray-500 mb-4">{{ 'stories.show.play_cta'|trans({'%name%': character ? character.name : 'Scoutem'}) }}</p>
                <a href="{{ path('app_download') }}" class="inline-flex items-center px-6 py-3 bg-blitz text-white font-semibold rounded-full hover:bg-blitz/90 transition">
                    {{ 'stories.show.download'|trans }}
                </a>
            </div>

            {% if story.youtubeUrl %}
            <div class="mt-6 text-center">
                <a href="{{ story.youtubeUrl }}" target="_blank" rel="noopener" class="text-sm font-medium text-gray-500 hover:text-red-500 transition">
                    {{ 'stories.show.watch_youtube'|trans }}
                </a>
            </div>
            {% endif %}
        </div>
    </div>
</article>
{% endblock %}