@extends('layouts.writer')

@section('title', 'Write New Article')

@section('content')
<style>
#page-body-container {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-evenly;
}
#new-article-form {
    display: flex;
    flex-direction: column;
}

#markdown-body {
    width: 40vw;
}
</style>

<script>
document.addEventListener("DOMContentLoaded", (event) => {
});
</script>

<div id="page-body-container">
    <section id="new-article-form-container">
        <form id="new-article-form" method="POST" action="route('')">
            <label for="publication-date">Publication Date</label>
            <input id="publication-date" name="publication-date" type="datetime-local" class="affects-preview" />
            <label for="title">Title</label>
            <input id="title" name="title" type="text" class="affects-preview" />
            <label for="subtitle">Subtitle</label>
            <input id="subtitle" name="subtitle" type="text" class="affects-preview" />
            <label for="slug">Slug</label>
            <input id="slug" name="slug" type="text" class="affects-preview" />
            <label for="header-image">Header Image</label>
            <input id="header-image" name="header-image" type="file" accept="image/png, image/jpeg, image/jpg, image/webp" class="affects-preview" />
            <label for="markdown-body">Markdown Body</label>
            <textarea id="markdown-body" rows="12" name="markdown-body" placeholder="Github-flavored markdown is supported!" class="affects-preview"></textarea>
            <button
                id="preview-article"
                type="submit"
            >
                Preview
            </button>
            <button id="save-article" type="submit">Save</button>
        </form>
            <button
                data-hx-post="{{ route('live_preview') }}"
                data-hx-trigger="click delay:2s"
                data-hx-target="#true-container"
                data-hx-swap="innerHTML"
            >
                HTMX Preview
            </button>
    </section>
    <section id="new-article-preview-container">
        <h4>Enjoy a live(ish) preview of what your article will look like</h4>
        <div id="preview-inner-container">
            @if(isset($article_preview))
                <div id="true-container"></div>
            @else
                <p>Nothing to see yet!</p>
            @endif
        </div>
    </section>
</div>
@endsection