@php
    $dataExportUser = auth()->user();
    $dataExportGroups = \App\Support\DataExport\DataExportSchema::groupsForRole($dataExportUser->role);
@endphp

<div class="profile-data-action-row">
    <div class="profile-data-action-row-copy">
        <strong>Télécharger mes données</strong>
        <small>Mes données au format ZIP immédiatement (peut prendre du temps).</small>
    </div>
    <button type="button" x-data="" x-on:click.prevent="$dispatch('open-modal', 'data-export')">Télécharger</button>
</div>

<x-modal name="data-export" :show="$errors->has('groups')" focusable>
    <form
        method="post"
        action="{{ route('profile.data-export') }}"
        class="profile-export-modal"
        x-data="{ submitting: false }"
        x-on:submit="submitting = true; setTimeout(() => submitting = false, 8000)"
    >
        @csrf

        <h2>Je télécharge mes données</h2>
        <p>Je choisis les données à inclure. Tout est coché par défaut. Je recevrai un fichier ZIP contenant des fichiers CSV, accompagnés d’une explication de chaque information conservée.</p>

        <div class="profile-export-options">
            @foreach ($dataExportGroups as $key => $group)
                <label class="profile-export-option">
                    <input type="checkbox" name="groups[]" value="{{ $key }}" @checked(true)>
                    <span class="profile-export-option-copy">
                        <strong>{{ $group['label'] }}</strong>
                        <small>{{ $group['description'] }}</small>
                    </span>
                </label>
            @endforeach
        </div>

        @error('groups')
            <p class="profile-export-error">{{ $message }}</p>
        @enderror

        <div class="profile-modal-actions">
            <button type="button" class="profile-secondary-button" x-on:click="$dispatch('close')" x-bind:disabled="submitting">J’annule</button>
            <button type="submit" class="profile-primary-button" x-bind:disabled="submitting">
                <span x-show="! submitting">Je télécharge mes données</span>
                <span x-show="submitting" x-cloak>Je prépare mon fichier…</span>
            </button>
        </div>
    </form>
</x-modal>