{% set isEdit = instrumentation_livrable is defined %}

<div class="cursor-pointer flex items-center justify-between border-b-4 mb-10 rounded" data-dropdown-toggle="informations">
    <h2 class="w-full text-left text-xl font-semibold">Informations</h2>
    <i class="fas fa-chevron-up dropdown-icon"></i>
</div>
<div id="informations" class="mb-4 flex flex-col w-full">
    <div class="flex flex-row justify-between">
        <div class="flex flex-col w-2/5 mb-4">
            <label for="hotel" class="block text-sm font-medium text-gray-700 required">Nom de l'hôtel</label>
            <select id="hotel" name="hotel" class="block w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 required sm:text-sm {% if (instrumentation_livrable is defined) %}cursor-not-allowed{% endif %}" {% if (instrumentation_livrable is defined) %}disabled{% endif %}>
                <option value="" hidden {% if (instrumentation_livrable is not defined) %}selected{% endif %}>Sélectionnez un hôtel</option>
                {% for hotel in data.hotels %}
                    <option value="{{ hotel.id }}">{{ hotel.nom }}</option>
                {% endfor %}
                {% if (instrumentation_livrable is defined) %}
                    <option value="{{ instrumentation_livrable.hotel.id }}" selected>{{ instrumentation_livrable.hotel.nom }}</option>
                {% endif %}
            </select>
        </div>
    </div>
    <div class="flex flex-col w-full mb-4">
        <label for="description" class="block text-sm font-medium text-gray-700">Description</label>
        <textarea id="description" name="description" rows="3" class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm" placeholder="Description du livrable d'instrumentation...">{% if (instrumentation_livrable is defined) %}{{instrumentation_livrable.description}}{% endif %}</textarea>
    </div>
    <div class="flex flex-col w-2/5 mb-4">
        <label class="flex items-center">
            <input type="checkbox" name="livrable_valide" id="livrable_valide" class="rounded border-gray-300 text-indigo-600 shadow-sm focus:border-indigo-300 focus:ring focus:ring-indigo-200 focus:ring-opacity-50" {% if (instrumentation_livrable is defined and instrumentation_livrable.livrableValide) %}checked{% endif %}>
            <span class="ml-2 text-sm font-medium text-gray-700">Livrable validé</span>
        </label>
    </div>
</div>

<div class="cursor-pointer flex items-center justify-between border-b-4 mb-10 rounded" data-dropdown-toggle="dates">
    <h2 class="w-full text-left text-xl font-semibold">Dates de prévision et réalisation</h2>
    <i class="fas fa-chevron-up dropdown-icon"></i>
</div>
<div id="dates" class="mb-4 flex flex-col w-full">
    <div class="flex flex-row justify-between">
        <div class="flex flex-col w-2/5 mb-4">
            <label for="prev_start_at" class="block text-sm font-medium text-gray-700">Date de début prévisionnelle</label>
            <input type="date" name="prev_start_at" id="prev_start_at" value="{% if (instrumentation_livrable is defined and instrumentation_livrable.prevStartAt) %}{{instrumentation_livrable.prevStartAt|date('Y-m-d')}}{% endif %}" class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        </div>
        <div class="flex flex-col w-2/5 mb-4">
            <label for="prev_end_at" class="block text-sm font-medium text-gray-700">Date de fin prévisionnelle</label>
            <input type="date" name="prev_end_at" id="prev_end_at" value="{% if (instrumentation_livrable is defined and instrumentation_livrable.prevEndAt) %}{{instrumentation_livrable.prevEndAt|date('Y-m-d')}}{% endif %}" class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        </div>
    </div>
    <div class="flex flex-row justify-between">
        <div class="flex flex-col w-2/5 mb-4">
            <label for="rea_start_at" class="block text-sm font-medium text-gray-700">Date de début réelle</label>
            <input type="date" name="rea_start_at" id="rea_start_at" value="{% if (instrumentation_livrable is defined and instrumentation_livrable.reaStartAt) %}{{instrumentation_livrable.reaStartAt|date('Y-m-d')}}{% endif %}" class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        </div>
        <div class="flex flex-col w-2/5 mb-4">
            <label for="rea_end_at" class="block text-sm font-medium text-gray-700">Date de fin réelle</label>
            <input type="date" name="rea_end_at" id="rea_end_at" value="{% if (instrumentation_livrable is defined and instrumentation_livrable.reaEndAt) %}{{instrumentation_livrable.reaEndAt|date('Y-m-d')}}{% endif %}" class="block w-full px-3 py-2 border rounded-md shadow-sm focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm">
        </div>
    </div>
</div>