{% extends 'base.html.twig' %}

{% block title %}Modifier la compétence{% endblock %}

{% block body %}
    <div class="container mx-auto p-6">
        <h1 class="text-4xl font-semibold text-gray-800 mb-6">Modifier la compétence</h1>

        <div class="bg-white shadow-md rounded-lg p-6">
            <h2 class="text-2xl font-medium text-gray-700 mb-6">Modifier les informations de la compétence</h2>

            {{ form_start(form) }}
            <div class="mb-4">
                <label for="skill_label" class="block text-lg font-medium text-gray-700 mb-2">Label de la compétence</label>
                <div class="mt-1">
                    {{ form_widget(form.label, {'attr': {'class': 'block w-full p-2 border rounded-md shadow-sm focus:outline-none focus:ring-2 focus:ring-teal-500'}}) }}
                </div>
            </div>

            <div class="mt-6">
                <button type="submit" class="bg-teal-500 hover:bg-teal-600 text-white py-2 px-4 rounded-full w-full">
                    Mettre à jour
                </button>
            </div>
            {{ form_end(form) }}
        </div>

        <div class="mt-6 flex justify-between items-center">
            <a href="{{ path('app_skill_index') }}" class="text-teal-500 hover:text-teal-700 text-lg">
                <i class="fas fa-arrow-left"></i> Retour à la liste des compétences
            </a>

            <div class="flex items-center space-x-4">
                <a href="{{ path('app_skill_show', {'id': skill.id}) }}" class="bg-yellow-500 hover:bg-yellow-600 text-white px-4 py-2 rounded-lg">
                    Voir la compétence
                </a>

                <form method="post" action="{{ path('app_skill_delete', {'id': skill.id}) }}" style="display:inline;">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="hidden" name="_token" value="{{ csrf_token('delete' ~ skill.id) }}">
                    <button type="submit" class="bg-red-500 hover:bg-red-600 text-white px-4 py-2 rounded-lg">
                        Supprimer
                    </button>
                </form>
            </div>
        </div>
    </div>
{% endblock %}