{% extends "documents/base_documents.html" %}
{% load i18n static %}

{% block head %}
    {{ block.super }}
    <link rel="stylesheet" href="{% static 'common/select2.min.css' %}" />
    <link rel="stylesheet" href="{% static 'common/select2-bootstrap-5-theme.min.css' %}" />
{% endblock head %}

{% block content %}
<div class="container py-4">
    <h2 class="mb-4">{% translate "Create a new document" %}</h2>
    <form method="post" enctype="multipart/form-data" class="card">
        {% csrf_token %}
        <div class="card-body">
            {% if form.non_field_errors %}
                <div class="alert alert-danger">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}
            <div class="mb-3">
                <label class="form-label" for="id_title">{% translate "Title" %}</label>
                {{ form.title }}
                {% if form.title.errors %}
                    <div class="text-danger small">{{ form.title.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label" for="id_description">{% translate "Description" %}</label>
                {{ form.description }}
                {% if form.description.errors %}
                    <div class="text-danger small">{{ form.description.errors }}</div>
                {% endif %}
            </div>
            {% if form.visibility %}
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="id_visibility">{% translate "Visibility" %}</label>
                    {{ form.visibility }}
                    {% if form.visibility.errors %}
                        <div class="text-danger small">{{ form.visibility.errors }}</div>
                    {% endif %}
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="id_thematics">{% translate "Thematics" %}</label>
                    {{ form.thematics }}
                    {% if form.thematics.errors %}
                        <div class="text-danger small">{{ form.thematics.errors }}</div>
                    {% endif %}
                </div>
            </div>
            {% else %}
            <div class="mb-3">
                <label class="form-label" for="id_thematics">{% translate "Thematics" %}</label>
                {{ form.thematics }}
                {% if form.thematics.errors %}
                    <div class="text-danger small">{{ form.thematics.errors }}</div>
                {% endif %}
            </div>
            {% endif %}
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="id_types">{% translate "Types" %}</label>
                    {{ form.types }}
                    {% if form.types.errors %}
                        <div class="text-danger small">{{ form.types.errors }}</div>
                    {% endif %}
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label" for="id_tags">{% translate "Tags" %}</label>
                    {{ form.tags }}
                    {% if form.tags.errors %}
                        <div class="text-danger small">{{ form.tags.errors }}</div>
                    {% endif %}
                </div>
            </div>
            <div class="mb-3">
                <label class="form-label" for="id_folders">{% translate "Folders" %}</label>
                {{ form.folders }}
                {% if form.folders.errors %}
                    <div class="text-danger small">{{ form.folders.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label" for="id_file">{% translate "File" %}</label>
                {{ form.file }}
                {% if form.file.errors %}
                    <div class="text-danger small">{{ form.file.errors }}</div>
                {% endif %}
            </div>
            <div class="mb-3">
                <label class="form-label" for="id_comment">{% translate "Comment" %}</label>
                {{ form.comment }}
                {% if form.comment.errors %}
                    <div class="text-danger small">{{ form.comment.errors }}</div>
                {% endif %}
            </div>
        </div>
        <div class="card-footer d-flex justify-content-end gap-2">
            <a class="btn btn-outline-secondary" href="{% url 'documents:list' %}">{% translate "Cancel" %}</a>
            <button type="submit" class="btn btn-primary">{% translate "Create" %}</button>
        </div>
    </form>
</div>
{% endblock content %}

{% block script %}
    {{ block.super }}
    <script src="{% static 'common/select2.min.js' %}"></script>
    <script>
    $(document).ready(function() {
        if ($('#id_folders').length) {
            $('#id_folders').select2({
                theme: 'bootstrap-5',
                placeholder: "{% translate 'Rechercher des répertoires...' %}",
                allowClear: true,
                width: '100%',
                ajax: {
                    url: "{% url 'documents:folder_autocomplete' %}",
                    dataType: 'json',
                    delay: 250,
                    data: function (params) {
                        return {
                            q: params.term || ''
                        };
                    },
                    processResults: function (data) {
                        return {
                            results: data.results
                        };
                    },
                    cache: true
                },
                minimumInputLength: 0
            });
        }
        if ($('#id_thematics').length) {
            $('#id_thematics').select2({
                theme: 'bootstrap-5',
                placeholder: "{% translate 'Sélectionner des thématiques...' %}",
                allowClear: true,
                width: '100%'
            });
        }
        if ($('#id_types').length) {
            $('#id_types').select2({
                theme: 'bootstrap-5',
                placeholder: "{% translate 'Sélectionner des types...' %}",
                allowClear: true,
                width: '100%'
            });
        }
        if ($('#id_tags').length) {
            $('#id_tags').select2({
                theme: 'bootstrap-5',
                placeholder: "{% translate 'Sélectionner des tags...' %}",
                allowClear: true,
                width: '100%'
            });
        }
    });
    </script>
{% endblock script %}