{% 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>{{ equipment.name }}</h1>
                <p class="text-teal-100 text-sm mt-1">{{ equipment.internalReference }}</p>
            </div>
            <a href="{{ path('employer_equipment_index') }}" class="inline-flex items-center px-3 py-2 text-sm font-medium text-teal-600 bg-white rounded-lg hover:bg-gray-100">
                <i class="fas fa-arrow-left mr-2"></i>Retour
            </a>
        </div>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-4 sm:gap-6">
        {# Informations #}
        <div class="bg-white rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4"><i class="fas fa-info-circle text-teal-600 mr-2"></i>Informations</h2>
            <dl class="space-y-3">
                <div class="flex justify-between"><dt class="text-gray-500">Référence</dt><dd class="font-medium">{{ equipment.internalReference }}</dd></div>
                {% if equipment.category %}<div class="flex justify-between"><dt class="text-gray-500">Catégorie</dt><dd>{{ equipment.category.name }}</dd></div>{% endif %}
                {% if equipment.brand %}<div class="flex justify-between"><dt class="text-gray-500">Marque</dt><dd>{{ equipment.brand }}</dd></div>{% endif %}
                {% if equipment.model %}<div class="flex justify-between"><dt class="text-gray-500">Modèle</dt><dd>{{ equipment.model }}</dd></div>{% endif %}
                {% if equipment.serialNumber %}<div class="flex justify-between"><dt class="text-gray-500">N° Série</dt><dd>{{ equipment.serialNumber }}</dd></div>{% endif %}
                {% if equipment.location %}<div class="flex justify-between"><dt class="text-gray-500">Emplacement</dt><dd>{{ equipment.location }}</dd></div>{% endif %}
            </dl>
        </div>

        {# État #}
        <div class="bg-white rounded-lg shadow p-4 sm:p-6">
            <h2 class="text-lg font-semibold text-gray-900 mb-4"><i class="fas fa-heartbeat text-teal-600 mr-2"></i>État</h2>
            <dl class="space-y-3">
                <div class="flex justify-between">
                    <dt class="text-gray-500">Statut</dt>
                    <dd><span class="bg-{{ equipment.statusBadgeColor }}-100 text-{{ equipment.statusBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ equipment.statusLabel }}</span></dd>
                </div>
                <div class="flex justify-between">
                    <dt class="text-gray-500">Condition</dt>
                    <dd><span class="bg-{{ equipment.conditionBadgeColor }}-100 text-{{ equipment.conditionBadgeColor }}-800 text-xs font-medium px-2.5 py-0.5 rounded">{{ equipment.conditionLabel }}</span></dd>
                </div>
                {% if equipment.assignedAt %}<div class="flex justify-between"><dt class="text-gray-500">Assigné depuis</dt><dd>{{ equipment.assignedAt|date('d/m/Y') }}</dd></div>{% endif %}
            </dl>
        </div>
    </div>

    {% if equipment.description %}
    <div class="bg-white rounded-lg shadow p-4 sm:p-6">
        <h2 class="text-lg font-semibold text-gray-900 mb-2">Description</h2>
        <p class="text-gray-600">{{ equipment.description }}</p>
    </div>
    {% endif %}
</div>
{% endblock %}