{% extends "layout.twig" %}

{% block title %}
{% if post is defined and post is not null and post.id > 0 %}Éditer l'article{% else %}Créer un article{% endif %}
{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/assets/vendor/trumbowyg/ui/trumbowyg.min.css">
{% endblock %}

{% block content %}
<div class="form-container">
    <div class="form-container__header">
        <h2 class="form-container__title">
            {% if post is defined and post is not null and post.id > 0 %}Éditer l'article{% else %}Créer un article{% endif %}
        </h2>
    </div>

    {% include 'partials/_admin_nav.twig' %}

    <div class="form-container__panel">
        {% if error %}
        <div class="alert alert--danger">{{ error }}</div>
        {% endif %}

        <form method="post" action="{{ action }}" class="form-container__form">
            <input type="hidden" name="{{ csrf.keys.name }}" value="{{ csrf.name }}">
            <input type="hidden" name="{{ csrf.keys.value }}" value="{{ csrf.value }}">

            {% if post is defined and post is not null %}
            <p class="form-container__field">
                <label class="form-container__label">
                    <span>Auteur</span>
                    <input type="text" value="{{ post.authorUsername ?? 'inconnu' }}" disabled
                        class="form-container__input form-container__input--disabled">
                </label>
            </p>
            {% endif %}

            <p class="form-container__field">
                <label for="title" class="form-container__label">
                    <span>Titre</span>
                    <input type="text" id="title" name="title" value="{{ post.title|default('') }}" required maxlength="255"
                        class="form-container__input">
                </label>
            </p>

            {% if post is defined and post is not null and post.id > 0 %}
            <p class="form-container__field">
                <label for="slug" class="form-container__label">
                    <span>Slug URL</span>
                    <input type="text" id="slug" name="slug" value="{{ post.storedSlug }}" pattern="[a-z0-9]+(-[a-z0-9]+)*"
                        maxlength="255" title="Lettres minuscules, chiffres et tirets uniquement"
                        class="form-container__input">
                </label>
                <small class="form-container__hint">(URL actuelle : <a href="/article/{{ post.storedSlug }}" target="_blank">/article/{{ post.storedSlug }}</a>)</small>
            </p>
            {% endif %}

            <p class="form-container__field">
                <label for="category_id" class="form-container__label">
                    <span>Catégorie</span>
                    <select id="category_id" name="category_id" class="form-container__select">
                        <option value="">— Sans catégorie —</option>
                        {% for category in categories %}
                        <option value="{{ category.id }}" {% if post is not null and post.categoryId==category.id %}selected{% endif %}>
                            {{ category.name }}
                        </option>
                        {% endfor %}
                    </select>
                </label>
            </p>

            <p class="form-container__field">
                <label for="editor" class="form-container__label">
                    <span>Contenu</span>
                    <textarea id="editor" name="content" required class="form-container__textarea">{{ post.content|default('') }}</textarea>
                </label>
            </p>

            <div class="form-container__actions">
                <div class="form-container__action">
                    <button type="submit" class="btn btn--primary btn--lg btn--full">
                        {% if post is defined and post is not null and post.id > 0 %}Mettre à jour{% else %}Enregistrer{% endif %}
                    </button>
                </div>
                <div class="form-container__action">
                    <a href="/admin/posts" class="btn btn--secondary btn--lg btn--full">Annuler</a>
                </div>
            </div>
        </form>

        {% if post is defined and post is not null and post.id > 0 %}
        <div class="form-container__footer">
            <small>
                Créé le : {{ post.createdAt|date("d/m/Y à H:i") }}<br>
                Modifié le : {{ post.updatedAt|date("d/m/Y à H:i") }}
            </small>
        </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/assets/vendor/jquery.min.js"></script>
<script src="/assets/vendor/trumbowyg/trumbowyg.min.js"></script>
<script src="/assets/vendor/trumbowyg/langs/fr.min.js"></script>
<script src="/assets/vendor/trumbowyg/plugins/upload/trumbowyg.upload.min.js"></script>

<script>
    $(function () {
        $('#editor').trumbowyg({
            lang: 'fr',
            btns: [
                ['viewHTML'],
                ['undo', 'redo'],
                ['formatting'],
                ['strong', 'em', 'underline'],
                ['unorderedList', 'orderedList'],
                ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                ['link'],
                ['upload', 'insertImage'],
                ['removeformat']
            ],
            semantic: false,
            imageWidthModalEdit: true,
            plugins: {
                upload: {
                    serverPath: '/admin/media/upload',
                    fileFieldName: 'image',
                    urlPropertyName: 'file',
                    statusPropertyName: 'success',
                    data: [
                        {
                            name: '{{ csrf.keys.name|e('js') }}',
                            value: '{{ csrf.name|e('js') }}'
                        },
                        {
                            name: '{{ csrf.keys.value|e('js') }}',
                            value: '{{ csrf.value|e('js') }}'
                        }
                    ]
                }
            }
        });
    });
</script>
{% endblock %}