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

{% block styles %}
<style>
/* hide title & timer bar */
.otree-title,
.otree-timer { display:none; }

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

/* info card */
.matrix-info{ height:80px; margin-bottom:15px; }

/* ---------- SPREAD-OUT GRID ---------- */
.matrix-grid{
    display:grid;
    grid-template-columns:repeat(10, 1fr);   /* 10 equal columns */
    gap:24px 32px;                           /* row gap 24px, column gap 32px */
    max-width:1100px;                        /* wider grid area */
    margin:0 auto;
    align-items:center;
}
.cell{
    display:flex;
    align-items:center;
    justify-content:center;                  /* centre content in wider cell */
}
.letter-img{ width:10px; height:12px; margin-right:8px }
input[type='checkbox']{ transform:scale(1.5) }
</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>

<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 }}">
        </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 %}