{% extends "layout.html" %}
{% block content %}
    <section class="referentiel-container">
        <div class="referentiel-header">
            <h1>Référentiel IAS</h1>
            <p class="text-muted">Explorez les critères et barèmes que nous utilisons pour évaluer les solutions.</p>
        </div>
        <div class="referentiel-table-wrapper">
            <table class="referentiel-table">
                <thead>
                    <tr>
                        <th scope="col" class="col-pillar">Pilier</th>
                        <th scope="col" class="col-criteria">Critère</th>
                        <th scope="col" class="col-choices">Barème de Notation</th>
                    </tr>
                </thead>
                <tbody>
                    {% for p_id, c_id, title, desc, choices in criteria %}
                        <tr>
                            <td class="col-pillar">
                                <span>{{ p_id }}</span>
                                <div class="mt-025 font-bold">{{ pillars[p_id] }}</div>
                            </td>
                            <td class="col-criteria">
                                <span class="text-xs text-muted uppercase">{{ c_id }}</span>
                                <span class="criteria-title">{{ title }}</span>
                                <p class="criteria-desc">{{ desc }}</p>
                            </td>
                            <td class="col-choices">
                                <div class="choices-list">
                                    {% for score, label in choices.items() %}
                                        <div class="choice-item">
                                            <span class="score-tag score-tag-{{ score }}">{{ score }}</span>
                                            <span class="choice-text">{{ label }}</span>
                                        </div>
                                    {% endfor %}
                                </div>
                            </td>
                        </tr>
                    {% endfor %}
                </tbody>
            </table>
        </div>
    </section>
{% endblock %}