{% extends "base.html" %}

{% block title %}Matières - {{ super() }}{% endblock %}

{% block content %}
<h2 class="mb-4">Choisissez une matière</h2>
<div class="cards-grid">
    {% for subject in subjects %}
    <div class="card" onclick="window.location.href='/subjects/{{ subject.id }}/categories'" style="cursor:pointer;">
        {% if subject.icon_url %}
        <img src="{{ subject.icon_url }}" alt="{{ subject.name }}" class="card-img-top" style="width:80px;height:80px;border-radius:50%;object-fit:cover;margin:1rem auto 0;display:block;">
        {% endif %}
        <div class="card-body text-center">
            <h5 class="card-title">{{ subject.name }}</h5>
        </div>
    </div>
    {% endfor %}
</div>
{% endblock %}