{{ block title }}
A few last questions
{{ endblock }}

{{ block content }}

<style>
.scale-block {
    margin-top: 20px;
    max-width: 300px;
}

.scale-endpoints {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    width: 100%;
    margin-top: -6px;
    font-size: 0.9em;
    color: #666;
}

.scale-endpoints span:first-child {
    grid-column: 1;
    justify-self: start;
}

.scale-endpoints span:last-child {
    grid-column: 5;
    justify-self: end;
}
</style>

<p>Think about your experience so far this semester.</p>

<h4 style="margin-top: 25px;">Your social reality</h4>

{{ formfield player.socialized_with_most }}

<div class="scale-block">
    {{ formfield player.homesick_frequency }}
    <div class="scale-endpoints">
        <span>Never</span>
        <span></span>
        <span></span>
        <span></span>
        <span>Very often</span>
    </div>
</div>

<h4 style="margin-top: 25px;">Your background and orientation</h4>

<div class="scale-block">
    {{ formfield player.own_country_importance_before_uni }}
    <div class="scale-endpoints">
        <span>Not at all important</span>
        <span></span>
        <span></span>
        <span></span>
        <span>Very important</span>
    </div>
</div>

<div class="scale-block">
    {{ formfield player.comfort_unfamiliar }}
    <div class="scale-endpoints">
        <span>Not at all comfortable</span>
        <span></span>
        <span></span>
        <span></span>
        <span>Very comfortable</span>
    </div>
</div>

{{ formfield player.languages_spoken }}

<input type="hidden" name="followup_time_sec" id="followup_time_sec">

<div style="display: flex; justify-content: space-between; margin-top: 20px;">
    <div>{{ back_button }}</div>
    <div><button class="btn btn-primary">Continue</button></div>
</div>

<script>
    const followupStartTime = Date.now();

    document.addEventListener('DOMContentLoaded', function () {
        const form = document.querySelector('form');
        if (form) {
            form.addEventListener('submit', function () {
                const elapsedSeconds = (Date.now() - followupStartTime) / 1000;
                document.getElementById('followup_time_sec').value = elapsedSeconds.toFixed(2);
            });
        }
    });
</script>

{{ endblock }}