{# Inline edit form for category - Responsive #}
<div class="p-3 sm:p-4 bg-gray-50 border border-gray-200 rounded-lg">
    <form method="post" action="{{ path('admin_companies_categories_update', {id: company.id, categoryId: category.id}) }}" data-controller="icon-preview">
        <input type="hidden" name="_token" value="{{ csrf_token('update_category_' ~ category.id) }}">

        <div class="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
            {# Name field #}
            <div class="sm:col-span-2">
                <label for="edit_name_{{ category.id }}" class="block mb-1.5 sm:mb-2 text-sm font-medium text-gray-900">
                    Nom de la catégorie
                </label>
                <input type="text"
                       id="edit_name_{{ category.id }}"
                       name="name"
                       value="{{ category.name }}"
                       required
                       maxlength="100"
                       class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 sm:p-2.5"
                       placeholder="Contrats, Factures...">
            </div>

            {# Description field #}
            <div class="sm:col-span-2">
                <label for="edit_description_{{ category.id }}" class="block mb-1.5 sm:mb-2 text-sm font-medium text-gray-900">
                    Description
                </label>
                <textarea id="edit_description_{{ category.id }}"
                          name="description"
                          rows="2"
                          maxlength="500"
                          class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 sm:p-2.5"
                          placeholder="Description de la catégorie...">{{ category.description }}</textarea>
            </div>

            {# Color field #}
            <div>
                <label for="edit_color_{{ category.id }}" class="block mb-1.5 sm:mb-2 text-sm font-medium text-gray-900">
                    Couleur
                </label>
                <select id="edit_color_{{ category.id }}"
                        name="color"
                        required
                        class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 sm:p-2.5">
                    {% for colorKey, colorLabel in {
                        'blue': 'Bleu',
                        'green': 'Vert',
                        'red': 'Rouge',
                        'yellow': 'Jaune',
                        'purple': 'Violet',
                        'pink': 'Rose',
                        'indigo': 'Indigo',
                        'orange': 'Orange',
                        'teal': 'Turquoise',
                        'gray': 'Gris'
                    } %}
                        <option value="{{ colorKey }}" {{ category.color == colorKey ? 'selected' : '' }}>
                            {{ colorLabel }}
                        </option>
                    {% endfor %}
                </select>
            </div>

            {# Icon field with preview #}
            <div>
                <label for="edit_icon_{{ category.id }}" class="block mb-1.5 sm:mb-2 text-sm font-medium text-gray-900">
                    Icône
                </label>
                <select id="edit_icon_{{ category.id }}"
                        name="icon"
                        data-icon-preview-target="select"
                        data-action="change->icon-preview#updatePreview"
                        class="bg-white border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2 sm:p-2.5">
                    {% for iconLabel, iconValue in {
                        'Fichier': 'fa-file',
                        'Document': 'fa-file-lines',
                        'Contrat': 'fa-file-contract',
                        'Facture': 'fa-file-invoice',
                        'PDF': 'fa-file-pdf',
                        'Image': 'fa-file-image',
                        'Archive': 'fa-file-zipper',
                        'Tableau': 'fa-file-excel',
                        'Présentation': 'fa-file-powerpoint',
                        'Certificat': 'fa-certificate',
                        'Dossier': 'fa-folder',
                        'Cloud': 'fa-cloud',
                        'Étoile': 'fa-star'
                    } %}
                        <option value="{{ iconValue }}" {{ category.icon == iconValue ? 'selected' : '' }}>
                            {{ iconLabel }}
                        </option>
                    {% endfor %}
                </select>

                {# Icon preview #}
                <div class="mt-2 flex items-center justify-center p-2 bg-white border border-gray-200 rounded">
                    <div data-icon-preview-target="preview">
                        <i class="fas {{ category.icon }} text-2xl text-gray-600"></i>
                    </div>
                </div>
            </div>
        </div>

        {# Action buttons - Responsive #}
        <div class="flex flex-col sm:flex-row items-stretch sm:items-center gap-2 mt-3 sm:mt-4">
            <button type="submit"
                    class="flex-1 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-4 py-2.5 sm:py-2 text-center">
                <i class="fas fa-save mr-1"></i>
                Enregistrer
            </button>
            <button type="button"
                    data-action="click->category-edit#cancel"
                    class="flex-1 py-2.5 sm:py-2 px-4 text-sm font-medium text-gray-900 focus:outline-none bg-white rounded-lg border border-gray-200 hover:bg-gray-100 hover:text-blue-700 focus:z-10 focus:ring-4 focus:ring-gray-100">
                <i class="fas fa-times mr-1"></i>
                Annuler
            </button>
        </div>
    </form>
</div>