@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;
}

/* HTML: <div class="loader"></div> */
.loader {
  width: 45px;
  height: 30px;
  background:
    linear-gradient(#004ce4 0 0) 0 100%/100% 50%,
    linear-gradient(#004ce4 0 0) 0 0   /calc(100%/3) 100%;
  background-repeat: no-repeat;
  position: relative;
  clip-path: inset(-100% 0 0 0);
  animation: l2-0 2s infinite steps(4);
}
.loader::before,
.loader::after {
  content: "";
  position: absolute;
  inset:-50% 0 50%;
  background:
    linear-gradient(#00e622 0 0) 0 0      /calc(2*100%/3) 50%,
    linear-gradient(#00e622 0 0) 100% 100%/calc(2*100%/3) 50%;
  background-repeat: no-repeat;
  animation: inherit;
  animation-name: l2-1;
}
.loader::after {
  inset:-100% 0 100%;
  background:
    linear-gradient(#e50021 0 0) 0    0/100%         50%,
    linear-gradient(#e50021 0 0) 100% 0/calc(100%/3) 100%;
  background-repeat: no-repeat;
  animation-name: l2-2;
}
@keyframes l2-0{
  0%       {transform: translateY(-250%);clip-path: inset(100% 0 0 0)}
  25%,100% {transform: translateY(0);clip-path: inset(-100% 0 0 0)}
}
@keyframes l2-1{
  0% ,25%  {transform: translateY(-250%)}
  50%,100% {transform: translateY(0)}
}
@keyframes l2-2{
  0% ,50%  {transform: translateY(-250%)}
  75%,100% {transform: translateY(0)}
}
</style>

<script>
document.addEventListener("DOMContentLoaded", (event) => {
    document.getElementById('preview-article').style.display = 'none';
    document.getElementById('htmx-preview-button').style.display = 'none';
});
</script>

<div id="page-body-container">
    <section id="new-article-form-container">
        <form id="new-article-form" method="POST" action="{{route('save_article')}}">
            @csrf
            <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>
            <button
                id="htmx-preview-button"
                data-hx-post="{{ route('live_preview') }}"
                data-hx-trigger="click, keyup changed delay:1100ms from:.affects-preview"
                data-hx-target="#true-container"
                data-hx-swap="innerHTML"
                data-hx-indicator="#preview-indicator"
            >
                HTMX Preview
            </button>
        </form>
    </section>
    <section id="new-article-preview-container">
        <span>Live Preview</span>
        <span id="preview-indicator" class="htmx-indicator"><div class="loader"></div></span>
        <div class="checkmark"></div>
        <div id="preview-inner-container">
            @if(isset($article_preview))
                <div id="true-container"></div>
            @else
                <div id="true-container">
                    <p>Nothing to see yet!</p>
                </div>
            @endif
        </div>
    </section>
</div>
@endsection