{% extends "global/Page.html" %}
{% load otree static %}

{% block title %}
    Survey
{% endblock %}

{% block content %}

<audio id="page-load-sound" src="{% static 'Page.wav' %}" preload="auto"></audio>


<style>
    .form-group.inline-radio span {
        display: inline-block;
        margin-right: 10px;
        padding: 5px 8px;  /* Reduced padding here */
        position: relative;
    }
    
    .form-group.inline-radio input[type="radio"]:checked + span label {
        background-color: hwb(210 72% 0%);
    }
    
    .form-group.inline-radio input[type="radio"], 
    .form-group.inline-radio label {
        cursor: pointer;
    }
    
    .form-group {
        margin-bottom: 1em;
    }
    
    .bold-label {
        font-weight: bold;
        margin-bottom: 10px;
    }
    
    input[type="radio"] {
        transform: scale(1.3);
        margin-right: 3px;  
        vertical-align: middle;
    }

    .section-title {
        font-size: 1.2em;  /* Larger font size for section titles */
        margin-top: 20px;  /* Space above the title */
        font-weight: bold;
        color: rgb(0, 70, 84);
    }


    /* Table styles */
    table {
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }

    th, td {
        border: 1px solid #ddd;
        text-align: center;
        padding: 8px;
    }

    /* Survey box */
    .survey-box {
        background-color: white;
        padding: 20px;
        border-radius: 15px;
        margin: 20px auto;
        max-width: 900px;
        box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.1);
    }
    h3 {
        color: rgba(13, 202, 240, 1.0);
        margin-bottom: 20px;  /* space below the heading */
    }
    

</style>

<div class="survey-box">
    <h3>Please fill out a few short questions.</h3>
    <hr>
    <p class="section-title">I. If you had the opposite role:</p>
    
    {% if player.dynamic_label %}
    <label for="id_dynamic_label">{{ player.dynamic_label }}</label>
    <br>
    <input type="number" name="if_you_assigned" min="0" max="100" required>
    <hr>
    <hr>
    {% endif %}
    <p class="section-title">II. <span class="emphasis">Rate the importance of the following values as a life-guiding principle for you. 
        <br> Use the 8-point scale (from 0 to 8):</span></p>
    <table>
        <tr>
            <th>0</th>
            <th>1</th>
            <th>2</th>
            <th>3</th>
            <th>4</th>
            <th>5</th>
            <th>6</th>
            <th>7</th>
            <th>8</th>
        </tr>
        <tr>
            <td>Opposed to my principles</td>
            <td>Not important for me</td>
            <td>Slightly important</td>
            <td>Moderately important</td>
            <td>Important</td>
            <td>Quite important</td>
            <td>Very important</td>
            <td>Extremely important</td>
            <td>Of supreme importance</td>
        </tr>
    </table>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.power.label }}</label><br>
        {{ form.power }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.achievement.label }}</label><br>
        {{ form.achievement }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.hedonism.label }}</label><br>
        {{ form.hedonism }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.stimulation.label }}</label><br>
        {{ form.stimulation }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.self_direction.label }}</label><br>
        {{ form.self_direction }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.universalism.label }}</label><br>
        {{ form.universalism }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.benevolence.label }}</label><br>
        {{ form.benevolence }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.tradition.label }}</label><br>
        {{ form.tradition }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.conformity.label }}</label><br>
        {{ form.conformity }}
    </div>
    <hr>
    <div class="form-group inline-radio">
        <label class="bold-label">{{ form.security.label }}</label><br>
        {{ form.security }}
    </div>
    <hr>

    {{ next_button }}

{% endblock %}
{% block scripts %}

<script src="{{ static 'otree-front-1.3.b1.js' }}"></script>

<!-- Play sound when the page loads -->
<script>
    document.addEventListener('DOMContentLoaded', function() {
        document.getElementById('page-load-sound').play();
    });
</script>


{% endblock %}