{% 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 %}
            <tr{% if is_armed %} class="row-armed"{% endif %}>
                <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 %}
                    {% if deck.status %}
                    {% set st = deck.status.state.value %}
                    <span class="badge badge-{{ st }}">{{ st | replace("_", " ") }}</span>
                    {# Surface a failed-job indicator even when the main
                       state falls back to "recorded" (raw file still on
                       disk after Auphonic rejected the job). Otherwise
                       the user sees "recorded" and has no cue that the
                       last processing attempt failed. #}
                    {% if 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 %}
                    {% if deck.status.final_parts and deck.status.raw_parts %}
                    <small>(done: {{ deck.status.final_parts | join(", ") }}; raw: {{ deck.status.raw_parts | join(", ") }})</small>
                    {% elif deck.status.parts | length > 1 %}
                    <small>(parts {{ deck.status.parts | join(", ") }})</small>
                    {% elif deck.status.parts | length == 1 and deck.status.parts[0] != 0 %}
                    <small>(part {{ deck.status.parts[0] }})</small>
                    {% endif %}
                    {% 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 per-button hx-post overrides the form's so the
                           Part input is shared but Record vs. Arm hits the
                           right route. #}
                        <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 }}">
                            <label>Part</label>
                            <input type="number" name="part_number" value="0" min="0" max="20">
                            <button type="submit" class="btn btn-sm btn-primary"
                                {% if not snapshot.obs_connected %}disabled title="OBS not connected"{% endif %}>
                                Record
                            </button>
                            <button type="submit" class="btn btn-sm btn-ghost"
                                hx-post="/arm" hx-target="body"
                                {% if not snapshot.obs_connected %}disabled title="OBS not connected"{% endif %}>
                                Arm
                            </button>
                        </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 %}
                        <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">Process</button>
                        </form>
                        <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 }}">
                            {# Advance operates on whichever part is currently
                               unsuffixed on disk; use the first recorded part
                               (matches the _preserve_active_take probe). #}
                            <input type="hidden" name="part_number" value="{{ deck.status.parts[0] if deck.status.parts else 0 }}">
                            <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 %}