{{ block title }}
    Questionnaire
{{ endblock }}

{{ block content }}
{# APP: oath_follower (Second Mover) | FILE: ConnectionQuestionnaire.html #}
{{ load otree static }}

<style>
  .ios-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin: 20px auto 10px auto;
  }

  .ios-last-row {
    display: flex;
    justify-content: center;
    margin-bottom: 30px;
  }

  .ios-option {
    display: inline-block;
    cursor: pointer;
    border: 3px solid #dee2e6;
    border-radius: 8px;
    overflow: hidden;
    background: #fff;
  }

  .ios-option:hover {
    border-color: #0066cc;
  }

  .ios-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
  }

  .ios-option:has(input:checked) {
    border-color: #0066cc;
    background: #e7f3ff;
  }

  .ios-img-wrap {
    display: block;
    padding: 4px;
  }

  .ios-img-wrap img {
    display: block;
    width: 252px;
    height: 92px;
  }
</style>

<h4>Part 1: Connection to First Mover</h4>

<p>
    Please click on the picture that best describes your relationship with the First Mover.
</p>

<div class="ios-grid">
    <label class="ios-option">
        <input type="radio" name="ios_number" value="1">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios1.png' %}" alt="Picture 1"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="2">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios2.png' %}" alt="Picture 2"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="3">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios3.png' %}" alt="Picture 3"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="4">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios4.png' %}" alt="Picture 4"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="5">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios5.png' %}" alt="Picture 5"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="6">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios6.png' %}" alt="Picture 6"></span>
    </label>
    <label class="ios-option">
        <input type="radio" name="ios_number" value="7">
        <span class="ios-img-wrap"><img src="{% static 'ios/ios7.png' %}" alt="Picture 7"></span>
    </label>
</div>

<br>

<h4>Part 2: Additional Questions</h4>

{{ if has_oath }}
<p>
    Please note that <strong>10% of participants</strong> in this experiment will be selected at random
    to be paid for the question below. If you are selected and give the correct answer,
    you will receive an additional <strong>4 tokens</strong>.
</p>

{{ formfield 'oath_taken_recall' }}

<div id="oath-recall-section" style="display: none;">
{{ formfield 'oath_recall' }}
</div>

<script>
(function () {
    function toggleRecall() {
        var radios = document.querySelectorAll('input[name="oath_taken_recall"]');
        radios.forEach(function(radio) {
            radio.addEventListener('change', function() {
                var section = document.getElementById('oath-recall-section');
                section.style.display = (this.value === 'True' || this.value === '1') ? 'block' : 'none';
            });
        });
    }
    document.addEventListener('DOMContentLoaded', function() {
        toggleRecall();
        var checked = document.querySelector('input[name="oath_taken_recall"]:checked');
        if (checked && (checked.value === 'True' || checked.value === '1')) {
            document.getElementById('oath-recall-section').style.display = 'block';
        }
    });
    toggleRecall();
}());
</script>
{{ endif }}

{{ formfield 'age_questionnaire' }}

{{ formfield 'gender_questionnaire' }}

{{ formfield 'political_affiliation' }}

{{ formfield 'religious_affiliation' }}

{{ formfield 'religious_affiliation_other' }}

<div style="text-align: right;">{{ next_button }}</div>

{{ endblock }}