{{ 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 'css/styles.css' }}">
{{ endblock }}

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

{{ block content }}

<div class="outro-page">

    <div class="page-header">
        <p class="page-label">Almost done</p>
        <h1 class="page-title">Your Experience</h1>
    </div>

    <div class="info-card">

        <div class="field-group">
            <div class="field-label">How would you rate your overall experience with this study?</div>
            <div class="scale-group">
                <label class="scale-btn"><input type="radio" name="study_experience" value="1" required>1</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="2">2</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="3">3</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="4">4</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="5">5</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="6">6</label>
                <label class="scale-btn"><input type="radio" name="study_experience" value="7">7</label>
            </div>
            <div class="scale-anchors"><span>Very negative</span><span>Very positive</span></div>
        </div>

        <div class="field-group">
            <div class="field-label">How would you rate the audio quality of your own recordings?</div>
            <div class="scale-group">
                <label class="scale-btn"><input type="radio" name="audio_quality" value="1" required>1</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="2">2</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="3">3</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="4">4</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="5">5</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="6">6</label>
                <label class="scale-btn"><input type="radio" name="audio_quality" value="7">7</label>
            </div>
            <div class="scale-anchors"><span>Very poor</span><span>Excellent</span></div>
        </div>

        <div class="field-group">
            <div class="field-label">Did you experience any technical or task-related difficulties?</div>
            <div class="option-group horizontal">
                <label class="option-card"><input type="radio" name="difficulties" value="0" required> No</label>
                <label class="option-card"><input type="radio" name="difficulties" value="1"> Yes</label>
            </div>
        </div>

        <div class="field-group is-conditional" id="difficulties-description-group">
            <div class="field-label">If yes, please briefly describe</div>
            <textarea class="field-textarea" name="difficulties_description" placeholder="What happened?"></textarea>
        </div>

    </div>

    <div class="begin-row">
        <button type="submit" class="begin-btn" disabled>Continue &rarr;</button>
    </div>

</div>

{{ endblock }}