{#
 # Fragment: Castia Podcast Card
 # NE PAS étendre base.html.twig — utilisé via include et renderView()
 # Requiert: podcast (CastiaPodcast)
 #}
{% set barHeights = [30,55,80,45,90,35,70,60,85,40,75,50,95,30,65,80,45,90,35,70,55,85,40,75,60,50,80,35,90,45,70,55,85,30,65,75,50,90,40,80,35,70,60,85,45,75,55,90,30,65,80,40,85,50,70,35,90,45,75,60,55,80,30,65,90,40,70,55,85,35,75,50,80,45,60,90,30,70,55,85,40,65,75,50,90,35,80,45,70,60,85,30,75,55,65,80] %}

<div id="podcast-{{ podcast.id }}"
     class="bg-white rounded-2xl border border-gray-200 shadow-sm p-5"
     data-controller="castia--audio-player"
     data-podcast-title="{{ podcast.title|lower }}"
     data-podcast-voice="{{ podcast.voiceLabel|lower }}">

    <audio data-castia--audio-player-target="audio" preload="metadata" class="hidden">
        <source src="{{ podcast.url }}" type="audio/mpeg">
    </audio>

    {# ── Ligne 1 : Titre + actions ── #}
    <div class="flex items-start justify-between gap-3 mb-4">

        {# Titre #}
        <div class="flex-1 min-w-0">
            <h3 class="text-sm font-semibold text-gray-900 truncate"
                data-podcast-title-display>{{ podcast.title }}</h3>
            <p class="text-xs text-gray-400 mt-1 truncate">
                {{- podcast.voiceLabel }} · {{ podcast.formattedDate -}}
            </p>
        </div>

        {# Menu contextuel #}
        {% include '_molecules/action-menu/action-menu.html.twig' with {
            withTrigger: true,
            items: [
                {label: 'Télécharger',      icon: 'download',     href: path('app_castia_download', {id: podcast.id})},
                {label: 'Ajouter à Moodia', icon: 'bubul-moodia', attr: {'data-action': 'click->shared--add-to-moodia#open', 'data-podcast-id': podcast.id, 'data-podcast-title': podcast.title}},
                {label: 'Renommer',            icon: 'edit',         attr: {'data-action': 'click->castia--generator#openRenameModal', 'data-podcast-id': podcast.id, 'data-current-title': podcast.title, 'data-csrf-token': csrf_token('rename-podcast-' ~ podcast.id)}}
            ],
            dangerItems: [
                {label: 'Supprimer', icon: 'trash',
                 formAction: path('app_castia_delete', {id: podcast.id}),
                 csrfToken: csrf_token('delete-podcast-' ~ podcast.id),
                 formAttr: {'data-action': 'submit->castia--generator#requestDelete', 'data-podcast-id': podcast.id, 'data-podcast-name': podcast.title}}
            ],
            accentHex: tool_color_details['castia'].primary
        } only %}
    </div>

    {# ── Ligne 2 : Lecteur audio ── #}
    <div class="flex items-center gap-3">

        {# Bouton play/pause #}
        <button type="button"
            class="w-9 h-9 flex items-center justify-center bg-gray-900 text-white rounded-full flex-shrink-0 transition-all hover:bg-gray-700 hover:scale-105 cursor-pointer"
            data-action="click->castia--audio-player#togglePlay">
            <svg data-castia--audio-player-target="playIcon" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5 ml-0.5">
                <path d="M8 5v14l11-7z"/>
            </svg>
            <svg data-castia--audio-player-target="pauseIcon" viewBox="0 0 24 24" fill="currentColor" class="w-3.5 h-3.5 hidden">
                <path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"/>
            </svg>
        </button>

        {# Waveform pleine largeur #}
        <div class="flex-1 min-w-0 cursor-pointer py-1"
             data-castia--audio-player-target="waveform"
             data-action="click->castia--audio-player#seekFromWaveform touchend->castia--audio-player#seekFromWaveform">
            <div class="flex items-end gap-px h-9">
                {% for h in barHeights %}
                    <div class="flex-1 bg-gray-200 rounded-sm" style="height: {{ h }}%"
                         data-castia--audio-player-target="bar"></div>
                {% endfor %}
            </div>
        </div>

        {# Temps actuel / durée totale #}
        <span class="text-xs font-mono flex-shrink-0 tabular-nums whitespace-nowrap">
            <span class="text-gray-500" data-castia--audio-player-target="currentTime">0:00</span><span class="text-gray-300"> / </span><span class="text-gray-400" data-castia--audio-player-target="durationLabel">--:--</span>
        </span>
    </div>

    {# ── Pied de carte : script + stats ── #}
    {% if podcast.script or podcast.tokensUsed %}
    <div class="mt-4 pt-4 border-t border-gray-100 flex items-center justify-between gap-2">

        {# Bouton script (gauche) #}
        {% if podcast.script %}
        <button type="button"
                class="inline-flex items-center gap-1.5 text-xs text-gray-400 hover:text-gray-700 cursor-pointer transition-colors px-2.5 py-1 rounded-full hover:bg-gray-100"
                data-action="click->castia--generator#openScriptModal"
                data-script="{{ podcast.script|e('html_attr') }}"
                data-title="{{ podcast.title|e('html_attr') }}">
            <svg class="w-3 h-3 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
                <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/>
                <polyline points="14,2 14,8 20,8"/>
                <line x1="16" y1="13" x2="8" y2="13"/>
                <line x1="16" y1="17" x2="8" y2="17"/>
            </svg>
            Voir le script
        </button>
        {% else %}
        <span></span>
        {% endif %}

        {# Tokens + énergie (droite) #}
        {% if podcast.tokensUsed %}
        <div class="flex items-center gap-2 shrink-0">
            <span class="inline-flex items-center gap-0.5 text-[11px] text-primary/60">
                {% include '_atoms/icon/icon.html.twig' with {name: 'token', size: 'xs', color: 'current'} only %}
                {{ podcast.tokensUsed|format_tokens }}
            </span>
            <span class="text-gray-200">·</span>
            <span class="inline-flex items-center gap-0.5 text-[11px] text-warning/70">
                {% include '_atoms/icon/icon.html.twig' with {name: 'bolt', size: 'xs', color: 'current'} only %}
                {{ podcast.energyConsumptionWh|format_energy }}
            </span>
        </div>
        {% endif %}

    </div>
    {% endif %}

</div>