{{ block styles }}
<link rel="stylesheet" href="{{ static 'global/css/record.css' }}">
<link rel="stylesheet" href="{{ static 'css/onboarding.css' }}">
{{ endblock }}

{{ block content }}

<h1 class="display-4">How to Use the Voice Recorder</h1>
<p class="lead">Follow this quick tutorial to learn how to record your responses.</p>

<!-- Onboarding overlay -->
<div id="onboarding-overlay" class="onboarding-overlay"></div>

<!-- Onboarding tooltip -->
<div id="onboarding-tooltip" class="onboarding-tooltip">
    <div class="onboarding-step-indicator">
        <span id="current-step">1</span> / <span id="total-steps">6</span>
    </div>
    <h4 id="tooltip-title" class="onboarding-title"></h4>
    <p id="tooltip-content" class="onboarding-content"></p>
    <div class="onboarding-nav">
        <button type="button" id="onboarding-prev" class="btn btn-outline-secondary btn-sm">Back</button>
        <button type="button" id="onboarding-next" class="btn btn-primary btn-sm">Next</button>
    </div>
</div>

<!-- Test phrase card (hidden initially) -->
<div class="card mt-4 mb-4" id="test-phrase-card" style="display: none;">
    <div class="card-body">
        <p class="card-text text-muted"><small>Please record yourself saying the following phrase:</small></p>
        <blockquote class="blockquote text-center">
            <p class="mb-0 text-primary" id="test-phrase">"The cat is black."</p>
        </blockquote>
        <p class="card-text text-muted"><small>After recording, listen to your audio to ensure the quality is clear.</small></p>
    </div>
</div>

<!-- Transcript display -->
<div class="card mt-4 mb-4" id="transcript-card" style="display: none;">
    <div class="card-body">
        <h5 class="card-title">Your Transcript</h5>
        <div id="transcript-placeholder" class="placeholder-glow" style="display: none;">
            <span class="placeholder col-7"></span>
            <span class="placeholder col-4"></span>
        </div>
        <p id="transcript-text" class="card-text"></p>
    </div>
</div>

<!-- Audio quality confirmation -->
<div class="card mb-4" id="quality-card" style="display: none;">
    <div class="card-body">
        <div class="form-check">
            <input class="form-check-input" type="checkbox" id="quality-confirm" disabled>
            <label class="form-check-label" for="quality-confirm">
                I have listened to my recording and confirm that the audio quality is clear and understandable.
            </label>
        </div>
    </div>
</div>

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

<!-- Functional Voice Recorder Pill -->
<div class="voice-pill" id="demo-pill">
    <div class="recording-indicator" id="recording-indicator"></div>
    <span class="status-text" id="status-text">Ready to record</span>

    <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>

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

<div class="text-center mt-4">
    <button type="button" id="restart-onboarding" class="btn btn-outline-primary" style="display: none;">
        Restart Tutorial
    </button>

    <button type="submit" id="continue-btn" class="btn btn-primary" disabled>
        Continue
    </button>
</div>

<script src="{{ static 'js/onboarding.js' }}"></script>

{{ endblock }}