{{ csrfField() }}
<div class="grid gap-6 mb-6 md:grid-cols-2">
    <!-- Name-->
    <div>
        <label for="name" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Nom</label>
        <input type="text" id="name" name="name" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" placeholder="Tom & Jerry" value="{{card.name || ''}}" />
    </div>
    
    <!-- Duo -->
    <div>
        <label for="duo" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Duo</label>
        <select class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2.5 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" name="duo" id="duo">
          @if(request.url().includes('new'))
          <option value="none" selected disabled>Choisir...</option>
          @endif
        </select>
    </div>

    <!-- Upload-->
    <div>
        <label for="dropzone-file" class="flex flex-col items-center justify-center w-full h-64 border-2 border-gray-300 border-dashed rounded-lg cursor-pointer bg-gray-50 dark:bg-gray-700 hover:bg-gray-100 dark:border-gray-600 dark:hover:border-gray-500 dark:hover:bg-gray-600" id="uploadImage" data-image="{{card.avatar || ''}}">
            <div class="flex flex-col items-center justify-center pt-5 pb-6">
                <div id="uploaderText" {{card.avatar ? 'hidden' : ''}}>
                    <p class="mb-2 text-sm text-gray-500 dark:text-gray-400"><span class="font-semibold">Cliquez pour envoyer</span> ou glissez déposé</p>
                    <p class="text-xs text-gray-500 dark:text-gray-400">SVG, PNG, JPG or GIF (MAX. 8mb)</p>
                </div>
            </div>
            <input id="dropzone-file" type="file" name="avatar" id="avatar" class="hidden" />
        </label>
    </div>

    <!-- Description-->
    <div>
        <label for="description" class="block mb-2 text-sm font-medium text-gray-900 dark:text-white">Description</label>
        <textarea id="description" id="description" name="description" rows="4" class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500" style="height: 89%;">{{card.description || ''}}</textarea>

    </div>
</div>
<button type="submit" class="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 w-full sm:w-auto px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Sauvegarder</button>