{% extends "base.html" %}
{% block title %}Lectures — CLM Recordings{% endblock %}
{% block content %}
<h1>Lectures</h1>

{# Hidden listener: OBS state changes re-fetch the dynamic content so
   the banner appears/disappears and Record/Arm buttons toggle their
   disabled attribute without a manual reload. Subscribing to `job`
   as well keeps the deck-status column in sync when Auphonic jobs
   finish — without it the row badge stays stuck at "processing"
   until the user reloads. #}
<div data-sse-refresh="status job"
     hx-get="/lectures"
     hx-trigger="sse:status, sse:job"
     hx-select="#lectures-dynamic"
     hx-target="#lectures-dynamic"
     hx-swap="outerHTML"
     class="u-hidden"></div>

<div id="lectures-dynamic">

{% if not snapshot.obs_connected %}
<div class="banner banner-warning" role="status">
    {% if snapshot.obs_state == 'reconnecting' %}
    <strong>OBS reconnecting…</strong> Recording actions disabled until the connection is restored.
    {% else %}
    <strong>OBS not connected.</strong> Recording actions disabled. Start OBS or use the dashboard to connect.
    {% endif %}
</div>
{% endif %}

<div class="toolbar">
    <form hx-post="/set-lang" hx-disabled-elt="find button" class="u-inline">
        <input type="hidden" name="lang" value="de">
        <button type="submit" class="btn btn-sm {% if lang == 'de' %}btn-primary{% endif %}">DE</button>
    </form>
    <form hx-post="/set-lang" hx-disabled-elt="find button" class="u-inline">
        <input type="hidden" name="lang" value="en">
        <button type="submit" class="btn btn-sm {% if lang == 'en' %}btn-primary{% endif %}">EN</button>
    </form>
    <span class="spacer"></span>
    <form hx-post="/lectures/refresh" hx-disabled-elt="find button" class="u-inline">
        <button type="submit" class="btn btn-sm btn-ghost">Refresh</button>
    </form>
</div>

{% if snapshot.armed_deck %}
<div class="banner banner-info">
    <strong>
        {% if snapshot.state.value == 'recording' %}Recording{% elif snapshot.state.value == 'paused' %}Paused{% elif snapshot.state.value == 'armed_after_take' %}Ready for retake{% else %}Armed{% endif %}:
    </strong>
    {{ snapshot.armed_deck.course_slug }} /
    {{ snapshot.armed_deck.section_name }} /
    {{ snapshot.armed_deck.deck_name }}
    {% if snapshot.armed_deck.part_number > 0 %}
    ({% if snapshot.armed_deck.lang == 'de' %}Teil{% else %}part{% endif %} {{ snapshot.armed_deck.part_number }})
    {% endif %}
    {% if snapshot.state.value in ('recording', 'paused') and snapshot.recording_elapsed_seconds is not none %}
    <span class="elapsed-timer"
          data-elapsed-base-seconds="{{ snapshot.recording_elapsed_seconds | int }}"
          {% if snapshot.paused %}data-elapsed-paused="true"{% endif %}
          aria-label="Elapsed recording time">
        {{ '%d:%02d' | format(
            (snapshot.recording_elapsed_seconds | int) // 60,
            (snapshot.recording_elapsed_seconds | int) % 60
        ) }}
    </span>
    {% endif %}
    {% if snapshot.state.value == 'recording' %}
    <form hx-post="/pause" hx-target="body" hx-disabled-elt="find button" class="u-inline u-ml-auto">
        <button type="submit" class="btn btn-sm">Pause</button>
    </form>
    <form hx-post="/stop" hx-target="body" hx-disabled-elt="find button" class="u-inline">
        <button type="submit" class="btn btn-sm btn-danger">Stop</button>
    </form>
    {% elif snapshot.state.value == 'paused' %}
    <form hx-post="/resume" hx-target="body" hx-disabled-elt="find button" class="u-inline u-ml-auto">
        <button type="submit" class="btn btn-sm btn-primary">Resume</button>
    </form>
    <form hx-post="/stop" hx-target="body" hx-disabled-elt="find button" class="u-inline">
        <button type="submit" class="btn btn-sm btn-danger">Stop</button>
    </form>
    {% else %}
    <form hx-post="/disarm" hx-target="body" hx-disabled-elt="find button" class="u-inline u-ml-auto">
        <button type="submit" class="btn btn-sm" data-disarm-shortcut>Disarm</button>
    </form>
    {% endif %}
</div>
{% endif %}

{% if error %}
<div class="banner banner-error">{{ error }}</div>
{% endif %}

{% for section in sections %}
<section class="card">
    <div class="card-header"><h3 class="card-title">{{ section.name }}</h3></div>
    <table>
        <thead>
            <tr>
                <th>Deck</th>
                <th>Status</th>
                <th style="text-align:right">Actions</th>
            </tr>
        </thead>
        <tbody>
            {% for deck in section.decks %}
            {% set is_armed = snapshot.armed_deck and snapshot.armed_deck.deck_name == deck.deck_name and snapshot.armed_deck.section_name == section.name %}
            {% set armed_part = snapshot.armed_deck.part_number if is_armed else 0 %}
            {% set has_existing_parts = deck.status and deck.status.parts_status %}
            {% set unprocessed_count = deck.status.raw_parts | length if deck.status else 0 %}
            <tr{% if is_armed %} class="row-armed"{% endif %} data-deck-row data-deck-key="{{ course_slug }}::{{ section.name }}::{{ deck.deck_name }}">
                <td>{{ deck.display_name }}</td>
                <td>
                    {% if is_armed and snapshot.state.value in ('recording', 'paused') %}
                    {% if snapshot.state.value == 'paused' %}
                    <span class="badge badge-paused">paused</span>
                    {% else %}
                    <span class="badge badge-recording">recording</span>
                    {% endif %}
                    {% if snapshot.recording_elapsed_seconds is not none %}
                    <span class="elapsed-timer"
                          data-elapsed-base-seconds="{{ snapshot.recording_elapsed_seconds | int }}"
                          {% if snapshot.paused %}data-elapsed-paused="true"{% endif %}
                          aria-label="Elapsed recording time">
                        {{ '%d:%02d' | format(
                            (snapshot.recording_elapsed_seconds | int) // 60,
                            (snapshot.recording_elapsed_seconds | int) % 60
                        ) }}
                    </span>
                    {% endif %}
                    {% endif %}
                    {# Per-part chip strip — replaces the old free-form
                       part_number input. The chip strip itself is the
                       part selector; action buttons in the next column
                       read its selection from sessionStorage. #}
                    {% include "partials/parts.html" %}
                    {# Failed-retry indicator stays at the row level so
                       the user notices the deck even if no chips are
                       in the failed state. #}
                    {% if deck.status and deck.status.failed_job_id and deck.status.state.value != 'failed' %}
                    <span class="badge badge-failed" title="Last processing job failed: {{ deck.status.failed_job_id }}">processing failed</span>
                    {% endif %}
                </td>
                <td>
                    <div class="deck-actions">
                        {% if is_armed and snapshot.state.value == 'recording' %}
                        <form hx-post="/pause" hx-target="body" hx-disabled-elt="find button">
                            <button type="submit" class="btn btn-sm">Pause</button>
                        </form>
                        <form hx-post="/stop" hx-target="body" hx-disabled-elt="find button">
                            <button type="submit" class="btn btn-sm btn-danger">Stop</button>
                        </form>
                        {% elif is_armed and snapshot.state.value == 'paused' %}
                        <form hx-post="/resume" hx-target="body" hx-disabled-elt="find button">
                            <button type="submit" class="btn btn-sm btn-primary">Resume</button>
                        </form>
                        <form hx-post="/stop" hx-target="body" hx-disabled-elt="find button">
                            <button type="submit" class="btn btn-sm btn-danger">Stop</button>
                        </form>
                        {% else %}
                        {# Shared form: two submit buttons, one per action.
                           The hidden ``part_number`` input is populated
                           by the chip JS in base.html on every chip
                           click and again right before submit. Default
                           is 0 (unsuffixed first take) — matches the
                           previous form's default. #}
                        <form data-action-form
                              hx-post="/record"
                              hx-target="body"
                              hx-disabled-elt="find button">
                            <input type="hidden" name="course_slug" value="{{ course_slug }}">
                            <input type="hidden" name="section_name" value="{{ section.name }}">
                            <input type="hidden" name="deck_name" value="{{ deck.deck_name }}">
                            <input type="hidden" name="part_number" value="0" data-part-input>
                            <button type="submit"
                                    class="btn btn-sm btn-primary"
                                    data-action-record
                                    {% if not snapshot.obs_connected %}disabled title="OBS not connected"{% endif %}>
                                <span data-action-label-fresh>Record</span><span data-action-label-retake hidden>Retake</span>
                            </button>
                            <button type="submit"
                                    class="btn btn-sm btn-ghost"
                                    data-action-arm
                                    hx-post="/arm" hx-target="body"
                                    {% if not snapshot.obs_connected %}disabled title="OBS not connected"{% endif %}>
                                <span data-action-label-fresh>Arm</span><span data-action-label-retake hidden>Re-arm</span>
                            </button>
                            <span class="chip-warning" data-retake-warning hidden
                                  title="Will move the current take to takes/ before recording"
                                  aria-label="Retake will overwrite the active take">
                                ⚠
                            </span>
                        </form>
                        {% if is_armed %}
                        <form hx-post="/disarm" hx-target="body" hx-disabled-elt="find button">
                            <button type="submit" class="btn btn-sm" data-disarm-shortcut>Disarm</button>
                        </form>
                        {% endif %}
                        {% endif %}
                        {% if deck.status and deck.status.state.value in ('recorded', 'failed') and deck.status.raw_paths %}
                        {# Per-chip Process: submits the raw path of the
                           selected chip's part. The hidden input is
                           rewritten by the chip JS on every selection
                           change. #}
                        <form data-process-form
                              hx-post="/process"
                              hx-target="body"
                              hx-disabled-elt="find button">
                            {# Default raw_path = first known raw; overwritten
                               on selection change. #}
                            <input type="hidden" name="raw_path" value="{{ deck.status.raw_paths[0] }}" data-raw-input>
                            {% for rp in deck.status.raw_paths %}
                            <input type="hidden" data-raw-path-for="{{ deck.status.raw_parts[loop.index0] }}" value="{{ rp }}">
                            {% endfor %}
                            <button type="submit" class="btn btn-sm">Process</button>
                        </form>
                        {% if unprocessed_count > 1 %}
                        {# Process all: fire-and-forget batch submit
                           that ignores chip selection. #}
                        <form hx-post="/process" hx-target="body" hx-disabled-elt="find button">
                            {% for rp in deck.status.raw_paths %}
                            <input type="hidden" name="raw_path" value="{{ rp }}">
                            {% endfor %}
                            <button type="submit" class="btn btn-sm btn-ghost"
                                    title="Process all unprocessed parts on this deck">
                                Process all
                            </button>
                        </form>
                        {% endif %}
                        <form data-advance-form
                              hx-post="/advance"
                              hx-target="body"
                              hx-disabled-elt="find button">
                            <input type="hidden" name="course_slug" value="{{ course_slug }}">
                            <input type="hidden" name="section_name" value="{{ section.name }}">
                            <input type="hidden" name="deck_name" value="{{ deck.deck_name }}">
                            <input type="hidden" name="part_number" value="{{ deck.status.parts[0] if deck.status.parts else 0 }}" data-part-input>
                            <button type="submit" class="btn btn-sm btn-ghost"
                                    title="Move this take into takes/ without recording a throwaway">
                                Advance
                            </button>
                        </form>
                        {% elif deck.status and deck.status.state.value == 'processing' %}
                        <span class="badge badge-processing">processing…</span>
                        {% endif %}
                    </div>
                </td>
            </tr>
            {% endfor %}
        </tbody>
    </table>
</section>
{% endfor %}

{% if not sections and not error %}
<p>No sections found in the course.</p>
{% endif %}

</div>{# /#lectures-dynamic #}
{% endblock %}