{{ 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/instructions.css' }}">
<link rel="stylesheet" href="{{ static 'global/css/record.css' }}">
<link rel="stylesheet" href="{{ static 'css/baseline.css' }}">
{{ endblock }}

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

{{ block content }}

<div class="instructions-page baseline-recorder" data-min-seconds="{{ min_seconds }}">

    <div class="page-header">
        <p class="page-label">Before you begin</p>
        <h1 class="page-title">How the Recorder Works</h1>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Your task</div>
        <p>Throughout this study, you will record short audio clips using the recorder
        at the bottom of the screen.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">How to record</div>
        <div class="recorder-steps">
            <div class="recorder-step">
                <div class="recorder-icon rec">
                    <svg 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>
                </div>
                <div>
                    <strong>Record</strong>
                    <p>Tap the red microphone button to start, tap again to stop. You can re-record as many times as you like.</p>
                </div>
            </div>
            <div class="recorder-step">
                <div class="recorder-icon play">
                    <svg viewBox="0 0 24 24" fill="currentColor">
                        <polygon points="5 3 19 12 5 21 5 3"/>
                    </svg>
                </div>
                <div>
                    <strong>Listen back</strong>
                    <p>Use the play button to review your recording. If you are not satisfied, tap the microphone button again to record a new take.</p>
                </div>
            </div>
            <div class="recorder-step">
                <div class="recorder-icon next">
                    <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>
                </div>
                <div>
                    <strong>Submit</strong>
                    <p>Once you are satisfied with the recording, tap the arrow button to move on.</p>
                </div>
            </div>
        </div>
    </div>

    <div class="info-card quality-card">
        <div class="info-card-eyebrow">Audio quality</div>
        <p>Please listen back to each recording before submitting.
            Make sure your voice is <strong>clear and audible</strong> with no background noise.
            If you are not satisfied, re-record until you are.</p>
    </div>

    <div class="info-card">
        <div class="info-card-eyebrow">Your first recording</div>
        <p>Please answer the following question and speak for at least <strong>{{ min_seconds }} seconds</strong>.
            Think about your answer before you record it.</p>
        <p class="statement-text">What show, movie, or book have you recently enjoyed, and why did you choose it?</p>
    </div>

    <input type="hidden" name="baseline_record_start_ts" id="rec-record-start" value="">
    <input type="hidden" name="baseline_voice_onset_ts" id="rec-voice-onset" value="">

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

</div>

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

    <button type="button" class="pill-btn record-btn" id="rec-toggle" title="Start recording">
        <svg id="rec-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="rec-stop-icon" viewBox="0 0 24 24" fill="currentColor">
            <rect x="6" y="6" width="12" height="12" rx="2"/>
        </svg>
    </button>

    <button type="button" class="pill-btn" id="rec-play" title="Play recording" disabled>
        <svg id="rec-play-icon" viewBox="0 0 24 24" fill="currentColor">
            <polygon points="5 3 19 12 5 21 5 3"/>
        </svg>
        <svg id="rec-pause-icon" viewBox="0 0 24 24" fill="currentColor">
            <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="rec-audio"></audio>

{{ endblock }}