{% extends 'base.html.twig' %}

{% block title %}Ajouter un document{% endblock %}

{% block titre_page %}Ajouter un document{% endblock %}
{% block resume_page %}{% endblock %}
{% block description_page %}Pour créer :
    <ul>
        <li>Choisir un titre, une description</li>
        <li>Choisir si le document est à signer ou à lire</li>
    </ul>
{% endblock %}

{% block body %}
    <div class="col-md-12 mb-3">
        <div class="card">
            <div class="card-body">
                {{ form_start(form, {'action': path('add_document'), 'attr': {'class': 'row g-3'}}) }}
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.title, 'Titre', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.title, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.action, 'Action à réaliser', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.action, {'attr': {'class': 'form-select'}}) }}
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.file, 'Fichier à lire ou signer', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.file, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-xs-12">
                            {{ form_widget(form.obligatoire, {'attr': {'class': 'form-check-input'}}) }}
                            {{ form_label(form.obligatoire, 'L\'action à réaliser est-elle obligatoire ?', {'attr': {'class': 'form-label'}}) }}
                        </div>
                    </div>
                </div>
                <div class="col-md-6">
                    <div class="row">
                        <div class="col-xs-12">
                            {{ form_label(form.text, 'Texte d\'accompagnement', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.text, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>
                    <div class="row pt-3">
                        <div class="col-xs-12">
                            {{ form_label(form.presentation, 'Texte de présentation (pour mail)', {'attr': {'class': 'form-label'}}) }}
                            {{ form_widget(form.presentation, {'attr': {'class': 'form-control'}}) }}
                        </div>
                    </div>

                </div>
                {{ form_end(form) }}
            </div>
        </div>
    </div>
{% endblock %}

{% block javascripts %}
    <script type="text/javascript">
        // Date format options
        const dateFormatOption = {weekday: "long", year: "numeric", month: "long", day: "numeric"};

        const mdPicker_DatePortrait = new mdDateTimePicker.default({
            type: "date",
            orientation: "PORTRAIT",
            past: moment().subtract(2, 'years'),
            future: moment().subtract(-3, 'years')
        });
        const mdPicker_DatePortraitInput = document.querySelector("#document_date");

        // Dispatch input event
        mdPicker_DatePortrait.trigger = mdPicker_DatePortraitInput;

        // Text input events
        mdPicker_DatePortraitInput.addEventListener("focus", () => mdPicker_DatePortrait.toggle());
        mdPicker_DatePortraitInput.addEventListener("onOk", () => mdPicker_DatePortraitInput.value = new Date(mdPicker_DatePortrait.time.toString()).toLocaleDateString([], 'dd/MM/YYYY'));
    </script>
{% endblock %}