{% load i18n %}
<div class="page-content">

    <!-- Назад -->
    <a href="/news/{{ post.pk }}/" hx-get="/news/{{ post.pk }}/" hx-target="#main-content" hx-push-url="/news/{{ post.pk }}/" hx-indicator="#loader"
       style="display:inline-flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--color-muted-foreground); text-decoration:none; margin-bottom:1rem;">
        <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
            <path d="m12 19-7-7 7-7"/><path d="M19 12H5"/>
        </svg>
        {% trans "К публикации" %}
    </a>

    <div style="margin-bottom:1.25rem;">
        <h1 style="font-size:1.25rem; font-weight:500; color:var(--color-foreground);">{% trans "Редактирование публикации" %}</h1>
    </div>

    {% if form_error %}
    <div style="background:color-mix(in srgb, var(--color-destructive) 8%, transparent); border:1px solid color-mix(in srgb, var(--color-destructive) 30%, transparent); border-radius:0.75rem; padding:0.875rem 1.25rem; margin-bottom:1rem; font-size:0.875rem; color:var(--color-destructive);">
        {{ form_error }}
    </div>
    {% endif %}

    <form id="post-edit-form" hx-post="/news/{{ post.pk }}/edit/" hx-target="#main-content" hx-push-url="/news/{{ post.pk }}/" hx-indicator="#loader"
          style="background:var(--color-card); border:1px solid var(--color-border); border-radius:0.75rem; padding:1.25rem; display:flex; flex-direction:column; gap:0.875rem;">
        {% csrf_token %}
        <input type="text" name="title" required maxlength="250" value="{{ post.title }}" placeholder="{% trans 'Заголовок' %}" class="input" style="width:100%; font-weight:500;">
        <textarea name="body" id="post-edit-editor" style="width:100%; min-height:6rem;">{{ post.body }}</textarea>
        <script>
            (function() {
                if (!window.tinymce) return;
                tinymce.remove('#post-edit-editor');
                tinymce.init({
                    selector: '#post-edit-editor',
                    height: 360,
                    menubar: false,
                    plugins: 'lists link table autolink image',
                    toolbar: 'undo redo | blocks | bold italic underline strikethrough | ' +
                             'forecolor | alignleft aligncenter alignright | ' +
                             'bullist numlist | link table image | removeformat',
                    language: 'uk',
                    license_key: 'gpl',
                    promotion: false,
                    branding: false,
                    convert_urls: false,
                    setup: function (editor) {
                        editor.on('change input undo redo SetContent keyup', function () {
                            editor.save();
                        });
                    },
                    paste_data_images: true,
                    automatic_uploads: true,
                    images_upload_handler: function (blobInfo) {
                        return new Promise(function (resolve, reject) {
                            var form = document.getElementById('post-edit-form');
                            var token = form.querySelector('input[name=csrfmiddlewaretoken]').value;
                            var data = new FormData();
                            data.append('file', blobInfo.blob(), blobInfo.filename());
                            fetch('/news/upload-image/', {
                                method: 'POST',
                                headers: {'X-CSRFToken': token},
                                body: data,
                            }).then(function (r) {
                                return r.json().then(function (j) { return {ok: r.ok, j: j}; });
                            }).then(function (res) {
                                if (res.ok && res.j.location) resolve(res.j.location);
                                else reject(res.j.error || '{% trans "Ошибка загрузки изображения" %}');
                            }).catch(function () {
                                reject('{% trans "Ошибка загрузки изображения" %}');
                            });
                        });
                    },
                });
            })();
        </script>
        <div style="display:flex; align-items:center; gap:1.25rem; flex-wrap:wrap;">
            <select name="category" class="input" style="width:auto; font-size:0.8125rem;">
                {% for value, label in categories %}
                <option value="{{ value }}" {% if post.category == value %}selected{% endif %}>{{ label }}</option>
                {% endfor %}
            </select>
            <label style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--color-foreground); cursor:pointer;">
                <input type="checkbox" name="is_important" {% if post.is_important %}checked{% endif %}> {% trans "Важно" %}
            </label>
            <label style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--color-foreground); cursor:pointer;">
                <input type="checkbox" name="is_pinned" {% if post.is_pinned %}checked{% endif %}> {% trans "Закрепить" %}
            </label>
            <span style="font-size:0.75rem; color:var(--color-muted-foreground);">{% trans "Опубликовать в чат:" %}</span>
            {% for code, label in mattermost_target_teams %}
            <label style="display:flex; align-items:center; gap:0.375rem; font-size:0.8125rem; color:var(--color-foreground); cursor:pointer;">
                <input type="checkbox" name="mattermost_targets" value="{{ code }}" {% if code in post.mattermost_targets %}checked{% endif %}> {{ label }}
            </label>
            {% endfor %}
            <button type="submit" class="btn btn-primary" style="margin-left:auto;">{% trans "Сохранить изменения" %}</button>
        </div>
    </form>

</div>