{#
    Document Edit Form Partial
    Rendered inside modal via AJAX

    Variables:
    - media: Media entity
    - form: Form view
#}

{{ form_start(form, {
    'action': path('admin_media_edit', {id: media.id}),
    'attr': {
        'id': 'editDocumentForm',
        'data-controller': 'expiration-reminder'
    }
}) }}

<div class="space-y-6">
    {# Document Info Header #}
    <div class="bg-gray-50 rounded-lg p-4 border border-gray-200">
        <div class="flex items-center gap-3">
            <div class="flex-shrink-0">
                <i class="fas fa-file text-3xl text-gray-400"></i>
            </div>
            <div class="flex-1 min-w-0">
                <h4 class="text-sm font-medium text-gray-900 truncate">
                    {{ media.originalFileName }}
                </h4>
                <p class="text-xs text-gray-500">
                    {{ media.mimeType }} • {{ media.formattedFileSize }}
                </p>
            </div>
        </div>
    </div>

    {# Basic Metadata Section #}
    <div class="space-y-4">
        <h3 class="text-sm font-semibold text-gray-900 border-b pb-2">
            <i class="fas fa-info-circle mr-2 text-indigo-600"></i>
            Informations générales
        </h3>

        <div class="grid grid-cols-1 gap-4">
            {{ form_row(form.description) }}
            {{ form_row(form.documentCategory) }}
            {{ form_row(form.visibility) }}
        </div>
    </div>

    {# Tags Section #}
    <div class="space-y-4">
        <h3 class="text-sm font-semibold text-gray-900 border-b pb-2">
            <i class="fas fa-tags mr-2 text-indigo-600"></i>
            Tags
        </h3>

        {{ form_row(form.tags) }}
    </div>

    {# Expiration & Reminders Section #}
    <div class="space-y-4">
        <h3 class="text-sm font-semibold text-gray-900 border-b pb-2">
            <i class="fas fa-calendar-times mr-2 text-indigo-600"></i>
            Expiration et rappels
        </h3>

        {{ form_row(form.expiresAt) }}

        {# Reminder Configuration (conditionally shown) #}
        <div class="pl-4 border-l-4 border-indigo-200">
            {{ form_row(form.enableReminder) }}

            <div class="reminder-section mt-4 space-y-4" style="display: none;">
                {{ form_row(form.reminderDaysBefore) }}
                {{ form_row(form.reminderNotes) }}

                {# Reminder Date Display #}
                <div id="reminderDateDisplay" class="text-sm text-gray-600 bg-blue-50 p-3 rounded-md">
                    <i class="fas fa-info-circle mr-1"></i>
                    <span>Le rappel sera calculé automatiquement</span>
                </div>
            </div>
        </div>
    </div>
</div>

{{ form_end(form, {render_rest: false}) }}

<script>
    // Initialize reminder section visibility on load
    document.addEventListener('DOMContentLoaded', function() {
        const enableCheckbox = document.querySelector('[name*="enableReminder"]');
        const reminderSection = document.querySelector('.reminder-section');

        if (enableCheckbox && reminderSection) {
            if (enableCheckbox.checked) {
                reminderSection.style.display = 'block';
            }

            enableCheckbox.addEventListener('change', function() {
                reminderSection.style.display = this.checked ? 'block' : 'none';
            });
        }
    });
</script>