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

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

{% block content %}
<div class="max-w-6xl mx-auto px-4 sm:px-6 lg:px-8 py-8">

    {# Breadcrumb #}
    <nav class="flex mb-4" aria-label="Breadcrumb">
        <ol class="inline-flex items-center space-x-1 md:space-x-3">
            <li class="inline-flex items-center">
                <a href="{{ path('admin_companies_index') }}" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-blue-600">
                    <i class="fas fa-building mr-2"></i>
                    Entreprises
                </a>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ path('admin_companies_show', {id: company.id}) }}" class="text-sm font-medium text-gray-700 hover:text-blue-600">
                        {{ company.name }}
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <a href="{{ path('admin_activity_sectors_index', {companyId: company.id}) }}" class="text-sm font-medium text-gray-700 hover:text-blue-600">
                        Secteurs d'activité
                    </a>
                </div>
            </li>
            <li>
                <div class="flex items-center">
                    <i class="fas fa-chevron-right text-gray-400 mx-2"></i>
                    <span class="text-sm font-medium text-gray-500">Modifier</span>
                </div>
            </li>
        </ol>
    </nav>

    {# Header #}
    <div class="mb-6">
        <h2 class="text-2xl font-bold text-gray-900">
            <i class="fas fa-edit mr-2 text-blue-600"></i>
            Modifier le secteur d'activité
        </h2>
        <p class="mt-1 text-sm text-gray-600">
            Modifiez les informations du secteur "{{ sector.name }}"
        </p>
    </div>

    {# Formulaire de modification #}
    <div class="bg-white shadow-sm rounded-lg overflow-hidden">
        <div class="p-6">
            {{ form_start(form) }}
                <div class="space-y-4">
                    {{ form_row(form.name) }}
                    {{ form_row(form.code) }}
                    {{ form_row(form.description) }}

                    <div class="grid grid-cols-2 gap-4">
                        {{ form_row(form.color) }}
                        {{ form_row(form.icon) }}
                    </div>

                    <div class="grid grid-cols-2 gap-4">
                        {{ form_row(form.position) }}
                        <div class="pt-6">
                            {{ form_row(form.isActive) }}
                        </div>
                    </div>
                </div>

                <div class="mt-6 flex items-center justify-between">
                    <a href="{{ path('admin_activity_sectors_index', {companyId: company.id}) }}"
                       class="inline-flex items-center px-4 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-medium text-gray-700 bg-white hover:bg-gray-50">
                        <i class="fas fa-arrow-left mr-2"></i>
                        Annuler
                    </a>

                    {{ form_row(form.submit) }}
                </div>
            {{ form_end(form) }}
        </div>
    </div>

    {# Info Section #}
    <div class="mt-6 bg-blue-50 border-l-4 border-blue-400 p-4">
        <div class="flex">
            <div class="flex-shrink-0">
                <i class="fas fa-info-circle text-blue-400"></i>
            </div>
            <div class="ml-3">
                <p class="text-sm text-blue-700">
                    <strong>Informations :</strong>
                </p>
                <ul class="mt-2 text-sm text-blue-700 list-disc list-inside">
                    <li>Secteur créé le {{ sector.createdAt|date('d/m/Y à H:i') }}</li>
                    {% if sector.createdBy %}
                        <li>Créé par {{ sector.createdBy.firstName }} {{ sector.createdBy.lastName }}</li>
                    {% endif %}
                    <li>Dernière modification le {{ sector.updatedAt|date('d/m/Y à H:i') }}</li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}