{% extends 'base.html' %}
{% block title %}Liste des équipements de levage{% endblock title %}
{% block content %}
<a href="{% url 'ajouter_equipement' %}" class="btn btn-primary inline-block bg-green-600 text-white px-3 py-1 rounded mb-4">➕ Ajouter</a>

<div class="tables-wrapper">
    <div class="row">
        <div class="col-lg-12">
            <div class="card-style mb-30">
                <h6 class="mb-10">Data Table</h6>
                <p class="text-sm mb-20">
                    For basic styling—light padding and only horizontal
                    dividers—use the class table.
                </p>
                <div class="table-wrapper table-responsive">
                    <table class="table">
                    <thead>
                        <tr>
                            <th>Description</th>
                            <th>Lieu</th>
                            <th>Type</th>
                            <th>Prochaine vérif</th>
                            <th>Critique ?</th>
                            <th>Rapport</th>
                            <th>Action</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for e in equipements %}
                        <tr class="border-t {% if e.date_prochaine_verification and e.date_prochaine_verification <= seuil %}bg-red-100{% endif %}">
                            <td>{{ e.description }}</td>
                            <td>{{ e.lieu }}</td>
                            <td>{{ e.type_appareil }}</td>
                            <td>{{ e.date_prochaine_verification|date:"d/m/Y" }}</td>
                            <td>{% if e.criticite %}⚠️{% else %}✅{% endif %}</td>
                            <td><a href="{% url 'rapport_pdf' e.id %}" class="text-indigo-600 underline">📄 PDF</a></td>
                            <td><a href="{% url 'editer_equipement' e.id %}" class="text-blue-600 underline">✏️ Modifier</a></td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            <!-- end table -->
            </div>
        </div>
    <!-- end card -->
    </div>
<!-- end col -->
</div>
{% endblock %}