{% block title %}Édition de {{ document.filename }}{% endblock %}

{% block extra_css %}
<!-- Ajout de CodeMirror pour les fichiers texte/code -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/theme/dracula.min.css">
<style>
   .CodeMirror {
        height: 600px;
        border: 1px solid #ddd;
        border-radius: 4px;
    }
    #editor {
        height: 600px;
    }
</style>
{% endblock %}

{% block content %}
<div class="max-w-4xl mx-auto">
    <h1 class="text-2xl font-bold mb-4">Édition de <strong>{{ document.filename }}</strong></h1>

    <form method="POST" action="{{ url_for('main.save_document', document_id=document.id) }}" class="space-y-4" enctype="multipart/form-data">
        <div>
            <label for="title" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Titre</label>
            <input type="text" name="title" id="title" value="{{ document.title }}" class="mt-1 block w-full rounded-md border-gray-600 shadow-sm focus:border-blue-700 focus:ring-blue-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100">
        </div>

        <!-- Champ pour la description -->
        <div>
            <label for="description" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Description</label>
            <textarea name="description" id="description" class="mt-1 block w-full rounded-md border-gray-600 shadow-sm focus:border-blue-700 focus:ring-blue-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100" rows="4">{{ document.description|default('') }}</textarea>
        </div>

        {% if document.file_type in ['md', 'txt', 'html', 'json', 'xml', 'csv'] %}
        <div>
            <label for="content" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Contenu</label>
            <textarea class="mt-1 block w-full rounded-md border-gray-600 shadow-sm focus:border-blue-700 focus:ring-blue-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100" id="content" name="content">{{ document.content|default('') }}</textarea>
        </div>
        {% else %}
        <div class="p-4 bg-yellow-50 rounded-md">
            <p class="text-yellow-800 dark:text-yellow-200">
                Ce type de fichier ne peut pas être édité directement. Vous pouvez le télécharger, le modifier localement, puis le ré-importer.
            </p>
        </div>
        {% endif %}

        <!-- Champ pour le fichier -->
        <div>
            <label for="file" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Fichier</label>
            <input type="file" name="file" id="file" class="mt-1 block w-full rounded-md border-gray-600 shadow-sm focus:border-blue-700 focus:ring-blue-700 dark:bg-gray-800 dark:border-gray-600 dark:text-gray-100">
        </div>

        <div class="flex gap-2">
            <button type="submit" class="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                <i class="bi bi-save me-1"></i> Enregistrer
            </button>
            <a href="{{ url_for('main.admin_documents') }}" class="px-4 py-2 bg-gray-200 text-gray-800 dark:bg-gray-700 dark:text-gray-200 rounded-md hover:bg-gray-300 dark:hover:bg-gray-600">
                <i class="bi bi-arrow-left me-1"></i> Retour
            </a>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<!-- CodeMirror pour les fichiers texte/code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/codemirror.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/xml/xml.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/markdown/markdown.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.65.2/mode/javascript/javascript.min.js"></script>
<script>
    {% if document.file_type in ['md', 'txt', 'html', 'json', 'xml', 'csv'] %}
    var editor = CodeMirror.fromTextArea(document.getElementById('content'), {
        lineNumbers: true,
        theme: 'dracula',
        mode: 'text/plain',
        {% if document.file_type == 'html' %}mode: 'xml',{% endif %}
        {% if document.file_type == 'json' %}mode: 'javascript',{% endif %}
        {% if document.file_type == 'md' %}mode: 'markdown',{% endif %}
    });
    {% endif %}
</script>
{% endblock %}