@use templates::base;
@use templates::partials::image_select;
@use template_utils::*;
@use validator::{ValidationErrors, ValidationErrorsKind};
@use std::borrow::Cow;
@use plume_models::medias::*;
@use plume_models::blogs::Blog;
@use plume_models::posts::Post;
@use routes::posts::NewPostForm;
@use routes::*;

@(ctx: BaseContext, title: String, blog: Blog, editing: bool, form: &NewPostForm, is_draft: bool, article: Option<Post>, errors: ValidationErrors, medias: Vec<Media>, content_len: u64, api_token: String)

@:base(ctx, title.clone(), {}, {}, {
    <script>
        window.blog_id = @blog.id
        window.api_token = '@api_token'
        @if editing {
            window.editing = true
            window.post_id = @article.clone().unwrap().id
        } else {
            window.editing = false
        }
    </script>
    <div id="plume-editor" style="display: none;" dir="auto">
      <header>
        <a href="#" id="close-editor">@i18n!(ctx.1, "Classic editor (any changes will be lost)")</a>
        <p id="char-count">@content_len</p>
      </header>
      <article id="edition-area">
        <h1 contenteditable id="editor-title" data-placeholder="@i18n!(ctx.1, "Type your title")">@form.title</h1>
        <h2 contenteditable id="editor-subtitle" data-placeholder="@i18n!(ctx.1, "Type a subtitle or a summary")">@form.subtitle</h2>
        <p contenteditable id="editor-default-paragraph" data-placeholder="@i18n!(ctx.1, "Write your article. You can use Markdown.")">@form.content</p>
      </article>
      <aside id="plume-editor-aside" style="display: none;">
        <div id="options-page">
            <button id="publish" class="button">@i18n!(ctx.1, "Publish")</button>

            @input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "")
            @input!(ctx.1, license (optional text), "License", "Leave it empty to reserve all rights", form, errors.clone(), "")
            @:image_select(ctx, "cover", i18n!(ctx.1, "Illustration"), true, medias.clone(), form.cover)
        </div>
        <div id="publish-page" style="display: none">
            <a href="#" id="cancel-publish">@i18n!(ctx.1, "Cancel")</a>
            <p>@i18n!(ctx.1, "You are about to publish this article in {}"; &blog.title)</p>
            <button id="confirm-publish" class="button">@i18n!(ctx.1, "Confirm publication")</button>
            <button id="save-draft" class="button secondary">@i18n!(ctx.1, "Save as draft")</button>
        </div>
    </aside>
    </div>

    @if let Some(article) = article {
	    <form id="plume-fallback-editor" class="new-post" method="post" action="@uri!(posts::update: blog = blog.actor_id, slug = &article.slug)" content-size="@content_len">
    } else {
	    <form id="plume-fallback-editor" class="new-post" method="post" action="@uri!(posts::new: blog = blog.actor_id)" content-size="@content_len">
    }
        <h1 id="plume-editor-title" dir="auto">@title</h1>

        @input!(ctx.1, title (text), "Title", form, errors.clone(), "required")
        @input!(ctx.1, subtitle (optional text), "Subtitle", form, errors.clone(), "")

        @if let Some(ValidationErrorsKind::Field(errs)) = errors.clone().errors().get("content") {
            @format!(r#"<p class="error">{}</p>"#, errs[0].message.clone().unwrap_or_else(|| Cow::from("Unknown error")))
        }

        <label for="editor-content" dir="auto">@i18n!(ctx.1, "Content")<small>@i18n!(ctx.1, "Markdown syntax is supported")</small></label>
        <textarea id="editor-content" name="content" rows="20" dir="auto">@Html(&form.content)</textarea>
	    <small id="editor-left" dir="auto">@content_len</small>
        <p dir="auto">
            @i18n!(ctx.1, "You can upload media to your gallery, and then copy their Markdown code into your articles to insert them.")
            <a href="@uri!(medias::new)">@i18n!(ctx.1, "Upload media")</a>
        </p>

        @input!(ctx.1, tags (optional text), "Tags, separated by commas", form, errors.clone(), "")

        @input!(ctx.1, license (optional text), "License", "Leave it empty to reserve all rights", form, errors, "")

        @:image_select(ctx, "cover", i18n!(ctx.1, "Illustration"), true, medias, form.cover)

        @if is_draft {
            <label for="draft" dir="auto">
                <input type="checkbox" name="draft" id="draft" checked>
                @i18n!(ctx.1, "This is a draft, don't publish it yet.")
            </label>
        }

        @if editing {
            <input type="submit" value="@i18n!(ctx.1, "Update")" />
        } else {
            @if is_draft {
                <input type="submit" value="@i18n!(ctx.1, "Update, or publish")" />
            } else {
                <input type="submit" value="@i18n!(ctx.1, "Publish your post")" />
            }
        }
    </form>
})