{% extends "base.html" %}
{% block content %}

<div class="container-fluid">
    <div class="d-flex justify-content-between align-items-center mb-4">
        <h1><i class="bi bi-tags"></i> Types de salles</h1>
        <a href="{{ url_for('room_types.create') }}" class="btn btn-primary">
            <i class="bi bi-plus-lg"></i> Nouveau type
        </a>
    </div>

    <div class="row">
        {% for room_type in types %}
        <div class="col-md-4 mb-3">
            <div class="card h-100">
                <div class="card-header d-flex justify-content-between">
                    <span><span class="badge" style="background-color: {{ room_type.color|hex_color }}; color: {{ room_type.color|text_color }};">{{ room_type.name }}</span></span>
                    <span class="text-muted">{{ room_type.rooms.count() }} salles</span>
                </div>
                <div class="card-body">
                    {% if room_type.description %}
                    <p class="card-text">{{ room_type.description }}</p>
                    {% endif %}
                    <p class="text-muted mb-0">
                        {% if room_type.is_teaching %}
                        <i class="bi bi-calendar-check"></i> Planning activé
                        {% else %}
                        <i class="bi bi-dash"></i> Pas de planning
                        {% endif %}
                    </p>
                </div>
                <div class="card-footer">
                    <a href="{{ url_for('room_types.edit', id=room_type.id) }}" class="btn btn-sm btn-outline-warning">
                        <i class="bi bi-pencil"></i> Modifier
                    </a>
                    <form method="POST" action="{{ url_for('room_types.delete', id=room_type.id) }}" style="display:inline;">
                        <button type="submit" class="btn btn-sm btn-outline-danger" 
                                onclick="return confirm('Supprimer ce type de salle ?')">
                            <i class="bi bi-trash"></i> Supprimer
                        </button>
                    </form>
                </div>
            </div>
        </div>
        {% else %}
        <div class="col-12">
            <p class="text-muted">Aucun type de salle défini.</p>
        </div>
        {% endfor %}
    </div>
</div>

{% endblock %}