{{ block styles }}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="{{ static 'global/css/record.css' }}">
{{ endblock }}

{{ block scripts }}
<script src="{{ static 'js/record.js' }}"></script>
{{ endblock }}

{{ block content }}

<div class="recording-page" data-condition="{{ condition }}">

    <!-- Top bar: condition badge + round counter -->
    <div class="top-bar">
        <div class="condition-badge">{{ condition_label }}</div>
        <div class="round-counter">{{ round_number }}<span> / {{ total_rounds }}</span></div>
    </div>

    <!-- Progress bar -->
    <div class="progress-track">
        <div class="progress-fill" style="width: {{ progress_pct }}%"></div>
    </div>

    <!-- Tonality instruction -->
    <div class="instruction-card">
        <div class="card-eyebrow">Tonality instruction</div>
        <p class="instruction-text">{{ instruction|safe }}</p>
    </div>

    <!-- Statement to read aloud -->
    <div class="statement-card">
        <div class="card-eyebrow">Read aloud</div>
        <p class="statement-text">&#8220;{{ statement }}&#8221;</p>
    </div>

    <div id="id_transcript" style="display:none;"></div>

    <input type="hidden" name="screen_width" id="screen_width" value="">
    <input type="hidden" name="screen_height" id="screen_height" value="">
    <input type="hidden" name="touch_capable" id="touch_capable" value="0">
    <script>
        document.getElementById('screen_width').value = window.screen.width;
        document.getElementById('screen_height').value = window.screen.height;
        document.getElementById('touch_capable').value = (navigator.maxTouchPoints > 0) ? 1 : 0;
    </script>

    <div class="pill-spacer"></div>

    <!-- Floating voice recorder pill -->
    <div class="voice-pill">
    <div class="recording-indicator" id="recording-indicator"></div>
    <span class="status-text" id="status-text">Ready</span>
    <div class="pill-divider"></div>

    <button type="button" class="pill-btn record-btn" id="record-toggle" title="Start recording">
        <svg id="mic-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"/>
            <path d="M19 10v2a7 7 0 0 1-14 0v-2"/>
            <line x1="12" y1="19" x2="12" y2="23"/>
            <line x1="8" y1="23" x2="16" y2="23"/>
        </svg>
        <svg id="stop-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
            <rect x="6" y="6" width="12" height="12" rx="2"/>
        </svg>
    </button>

<!--    <button type="button" class="pill-btn" id="rerecord-btn" title="Re-record" disabled>-->
<!--        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">-->
<!--            <path d="M1 4v6h6"/>-->
<!--            <path d="M3.51 15a9 9 0 1 0 2.13-9.36L1 10"/>-->
<!--        </svg>-->
<!--    </button>-->

    <button type="button" class="pill-btn" id="play-btn" title="Play recording" disabled>
        <svg id="play-icon" viewBox="0 0 24 24" fill="currentColor">
            <polygon points="5 3 19 12 5 21 5 3"/>
        </svg>
        <svg id="pause-icon" viewBox="0 0 24 24" fill="currentColor" style="display: none;">
            <rect x="6" y="4" width="4" height="16"/>
            <rect x="14" y="4" width="4" height="16"/>
        </svg>
    </button>

    <div class="pill-divider"></div>

    <button type="submit" class="pill-btn next-btn" id="submit_button" title="Next" disabled>
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="M5 12h14"/>
            <path d="M12 5l7 7-7 7"/>
        </svg>
    </button>
    </div>

    <audio id="audio-playback"></audio>

</div>

{{ endblock }}