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

{% block styles %}
<style>
/* hide oTree defaults we don’t need */
.otree-title,
.otree-timer { display:none; }

/* push everything down a bit */
.otree-body{ text-align:center; padding-top:40px; }

/* info and counter cards */
.matrix-info{ height:80px; margin-bottom:15px; }
.counter-card{ max-width:300px; margin:0 auto 15px; }

/* ------------- GRID of 100 cells ------------- */
.matrix-grid{
    display:grid;
    grid-template-columns:repeat(10, 1fr);   /* 10 equal columns across full width */
    gap:24px 36px;                           /* row gap 24px, column gap 36px      */
    max-width:1100px;                        /* allow grid to stretch wider        */
    margin:0 auto;
}
.cell{
    display:flex;              /* icon + checkbox side-by-side */
    align-items:center;
    justify-content:center;    /* keep centred in wider column */
    padding:6px 4px;
}
.letter-img{ width:10px; height:12px; margin-right:8px; }

/* bigger check-boxes */
input[type='checkbox']{ transform:scale(1.5); }

/* vivid highlights */
.cell.d        { background:#ffd900; }   /* bright yellow */
.incorrect-b   { background:#ff3b30 !important; }  /* vivid red */
</style>
{% endblock %}

{% block content %}

<div class="card matrix-info mx-auto">
    <div class="card-body p-2">
        <b>Matrix #{{ round_number }}</b><br>
        Time left: <span class="otree-timer__time-left"></span><br>
        Please select all “d” letters!
    </div>
</div>

<div class="card counter-card">
    <div class="card-body">
        <b>Number of d letters left:</b> <span id="selected">{{ Constants.d_total }}</span>
    </div>
</div>

<form method="post">
    <input type="hidden" name="csrftoken" value="dummy">

    <div class="matrix-grid">
        {% for i, f, l in choices %}
        <label class="cell {{ l }}">
            {% if l == 'd' %}
            <img src="{% static 'd_letter.png' %}" class="letter-img">
            {% else %}
            <img src="{% static 'b_letter.png' %}" class="letter-img">
            {% endif %}
            <input type="checkbox"
                   name="{{ f }}"
                   value="{{ l }}"
                   class="letter-checkbox">
        </label>
        {% endfor %}
    </div>

    <p class="mt-4"><b>Do you wish to submit the task?</b></p>
    <button class="otree-btn-next btn btn-primary">Submit</button>
</form>
{% endblock %}

{% block scripts %}
<script>
(() => {
    const totalD   = {{ Constants.d_total|json }};
    const counter  = document.getElementById('selected');

    function updateDCount() {
        const checkedD = document.querySelectorAll('.letter-checkbox[value="d"]:checked').length;
        counter.textContent = totalD - checkedD;
    }

    /* live counter for every “d” checkbox */
    document.querySelectorAll('.letter-checkbox[value="d"]').forEach(cb =>
        cb.addEventListener('change', updateDCount)
    );

    /* red highlight for wrong “b” selections */
    document.querySelectorAll('.letter-checkbox[value="b"]').forEach(cb =>
        cb.addEventListener('change', () => {
            cb.closest('.cell').classList.toggle('incorrect-b', cb.checked);
        })
    );
})();
</script>
{% endblock %}