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



{% block content %}
    <p>
        <span style="font-size: 1.2em;">
        <b>Bitte beantworten Sie noch ein paar Fragen zu Ihrer Mobilität im Alltag</b>
    </span>
    </p>


    <div class="card mt-2 mb-4" >

        <div class="card-body p-2">
            {% formfield player.car_licence %}
            {% formfield player.car_use %}
            {% formfield player.bike_use %}
        </div>
    </div>

    <div style="
    position:absolute;
    left:-9999px;
    top:auto;
    width:1px;
    height:1px;
    overflow:hidden;
    ">
    <label for="id_bot_check">
        Wie alt sind Sie?
    </label>
    <input type="text" name="bot_check" id="id_bot_check" autocomplete="off">
    </div>

    {% next_button %}

    <style>
    .btn-primary {
    background-color: #003360 !important;
    border-color: #003360 !important;
    }
    .btn-primary:hover {
    background-color: #001f3f !important;
    border-color: #001f3f !important;
    }
    </style>


    <style>
.info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    margin-left: -3px;
    margin-right: 4px;
    border: 1px solid #003360;
    border-radius: 50%;      /* force circle */
    background: white;
    color: #003360;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;

    vertical-align: top;
    position: relative;
    top: -3px;   /* fine-tune upward */
}

.info-icon:hover {
    background: #f39200;
    border-color: #f39200;
    color: white;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.modal-overlay.show {
    display: flex;
}

.modal-card {
    width: min(600px, 100%);
    background: white;
    border-radius: 12px;
    padding: 18px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    position: relative;
}

.modal-close {
    position: absolute;
    top: 10px;
    right: 12px;
    border: none;
    background: transparent;
    font-size: 1.5rem;
    cursor: pointer;
    color: #003360;
}
</style>

{% block styles %}
    <style xmlns="http://www.w3.org/1999/html">
    #header {
        display: block;
        font-weight: normal;
        font-size: 14px;
        text-align: right;
        background-color: #003360;
        color: white;
    }

    .table{
        width: 800px;
    }
    </style>
{% endblock %}


<!-- Reusable info modal -->
<div class="modal-overlay" id="infoModal">
    <div class="modal-card" role="dialog" aria-modal="true">
        <button type="button" class="modal-close" id="infoModalClose">×</button>
        <h5 id="infoModalTitle"></h5>
        <p id="infoModalText"></p>
    </div>
</div>

<script>
document.addEventListener("DOMContentLoaded", function () {
    const infoButtons = document.querySelectorAll(".info-btn");
    const infoModal = document.getElementById("infoModal");
    const infoModalTitle = document.getElementById("infoModalTitle");
    const infoModalText = document.getElementById("infoModalText");
    const infoModalClose = document.getElementById("infoModalClose");

    infoButtons.forEach(btn => {
        btn.addEventListener("click", function () {
            infoModalTitle.textContent = this.dataset.title || "";
            infoModalText.innerHTML = this.dataset.text || "";
            infoModal.classList.add("show");
        });
    });

    infoModalClose.addEventListener("click", () => infoModal.classList.remove("show"));
    infoModal.addEventListener("click", e => { if (e.target === infoModal) infoModal.classList.remove("show"); });
    document.addEventListener("keydown", e => { if (e.key === "Escape") infoModal.classList.remove("show"); });
});
</script>


{% endblock %}