{% extends 'layouts/authenticated.html.twig' %}

{% block page_title %}{{ page_title }}{% endblock %}

{% block content %}
<div class="space-y-4 sm:space-y-6">
    {# Header #}
    <div class="bg-gradient-to-r from-teal-600 to-cyan-600 rounded-lg shadow-lg p-4 sm:p-6 text-white">
        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between gap-3">
            <div>
                <h1 class="text-xl sm:text-2xl font-bold"><i class="fas fa-toolbox mr-2"></i>{{ page_title }}</h1>
                <p class="text-teal-100 text-sm mt-1">Matériel qui vous est assigné</p>
            </div>
        </div>
    </div>

    {# Equipment List #}
    {% if equipments|length > 0 %}
    <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {% for eq in equipments %}
        <div class="bg-white rounded-lg shadow p-4">
            <div class="flex items-start justify-between mb-3">
                <div>
                    <h3 class="font-semibold text-gray-900">{{ eq.name }}</h3>
                    <p class="text-xs text-gray-500">{{ eq.internalReference }}</p>
                </div>
                <span class="bg-{{ eq.statusBadgeColor }}-100 text-{{ eq.statusBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">
                    {{ eq.statusLabel }}
                </span>
            </div>
            {% if eq.brand or eq.model %}
            <p class="text-sm text-gray-600 mb-2">
                {% if eq.brand %}{{ eq.brand }}{% endif %}
                {% if eq.model %} {{ eq.model }}{% endif %}
            </p>
            {% endif %}
            {% if eq.category %}
            <p class="text-xs text-gray-500 mb-2"><i class="fas fa-folder mr-1"></i>{{ eq.category.name }}</p>
            {% endif %}
            <div class="flex items-center justify-between mt-3 pt-3 border-t border-gray-100">
                <span class="bg-{{ eq.conditionBadgeColor }}-100 text-{{ eq.conditionBadgeColor }}-800 text-xs font-medium px-2 py-0.5 rounded">
                    {{ eq.conditionLabel }}
                </span>
                <a href="{{ path('employer_equipment_show', {id: eq.id}) }}" class="text-teal-600 hover:text-teal-800 text-sm font-medium">
                    Voir <i class="fas fa-arrow-right ml-1"></i>
                </a>
            </div>
        </div>
        {% endfor %}
    </div>
    {% else %}
    <div class="bg-white rounded-lg shadow p-8 text-center">
        <div class="text-gray-400 mb-4"><i class="fas fa-box-open text-4xl"></i></div>
        <h3 class="text-lg font-medium text-gray-900 mb-1">Aucun matériel assigné</h3>
        <p class="text-gray-500">Vous n'avez pas encore de matériel assigné.</p>
    </div>
    {% endif %}
</div>
{% endblock %}