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

{% block body %}
    <div class="w-100 h-100 p-5 m-auto">
        <div class="card">
            <div class="card-title shadow-sm p-3 d-flex justify-content-between align-items-center">
                <h2>Modifier l'application</h2>
            </div>
            <div class="card-body">

                {# templates/application/edit.html.twig #}
                <form method="post" action="{{ path('application_edit', {'id': apps.id}) }}" data-controller="application">
                    <input name="name" type="text" value="{{ apps.name }}" class="form-control mb-3" required>

                    {# Description (full) #}
                    <div class="card">
                        <div class="card-header">
                            <div id="toolbar-description" class="border-0">
                                <button class="ql-bold"></button>
                                <button class="ql-italic"></button>
                                <button class="ql-underline"></button>
                                <button class="ql-strike"></button>
                                <button class="ql-blockquote"></button>
                                <button class="ql-code-block"></button>
                                <select class="ql-header">
                                    <option value="1"></option>
                                    <option value="2"></option>
                                    <option selected></option>
                                </select>
                                <select class="ql-size">
                                    <option value="small"></option>
                                    <option selected></option>
                                    <option value="large"></option>
                                    <option value="huge"></option>
                                </select>
                                <select class="ql-color"></select>
                                <select class="ql-background"></select>
                                <select class="ql-align"></select>
                                <button class="ql-link"></button>
                                <button class="ql-image"></button>
                                <button class="ql-clean"></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="editor-description" class="form-control border-0" style="min-height: 200px;">
                                {{ apps.description|raw }}
                            </div>
                            <textarea name="description" data-application-target="hidden" class="d-none">{{ apps.description|raw }}</textarea>
                        </div>
                        </div>



                    {# Description Small #}
                    <div class="card  mt-3">
                        <div class="card-header">
                            <div id="toolbar-descriptionSmall" class="border-0">
                                <button class="ql-bold"></button>
                                <button class="ql-italic"></button>
                                <button class="ql-underline"></button>
                                <select class="ql-header">
                                    <option value="2"></option>
                                    <option selected></option>
                                </select>
                                <button class="ql-clean"></button>
                            </div>
                        </div>
                        <div class="card-body">
                            <div id="editor-descriptionSmall" class="form-control border-0" style="min-height: 120px;">
                                {{ apps.descriptionSmall|raw }}
                            </div>
                            <textarea name="descriptionSmall" data-application-target="hidden" class="d-none">{{ apps.descriptionSmall|raw }}</textarea>
                        </div>
                    </div>



                    <input type="file" name="logo" class="form-control mb-3 mt-3">
                    <button type="submit" class="btn btn-primary mt-3">Enregistrer</button>
                </form>
            </div>
        </div>
    </div>


{% endblock %}

{% block title %}

{% endblock %}