{% extends "admin/base.html" %}

{% block title %}{{ t(key="edit-article", lang=lang | default(value='sk')) }}{% endblock title %}
{% block head %}
<link href="/static/vendor/quill/quill.snow.css" rel="stylesheet" type="text/css">
{% endblock head %}

{% block content %}
<div class="space-y-2">
  <div class="flex flex-wrap items-center justify-between gap-3">
    <div>
      <h1 class="text-2xl font-bold">{{ t(key="edit-article", lang=lang | default(value='sk')) }}</h1>
    </div>
    <a href="/admin/blog/articles" class="btn btn-ghost btn-sm">{{ t(key="back-to-articles", lang=lang | default(value='sk')) }}</a>
  </div>

  <div class="card border border-base-300 bg-base-100 shadow-sm">
    <div class="card-body">
      <form method="post" action="/admin/blog/articles/{{ article.id }}" class="space-y-2">
        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="title", lang=lang | default(value='sk')) }}</span></label>
          <input type="text" name="title" value="{{ article.title }}" required class="input input-bordered w-full">
        </div>

        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="excerpt", lang=lang | default(value='sk')) }}</span></label>
          <textarea name="excerpt" rows="4" class="textarea textarea-bordered w-full">{% if article.excerpt %}{{ article.excerpt }}{% endif %}</textarea>
        </div>

        <div class="form-control">
          <label class="label"><span class="label-text">{{ t(key="content", lang=lang | default(value='sk')) }}</span></label>
          <textarea name="content" data-rich-content class="hidden">{{ article.content }}</textarea>
          <input type="hidden" name="featured_image_id" data-featured-image-id value="{% if article.featured_image_id %}{{ article.featured_image_id }}{% endif %}">
          <div data-rich-editor class="blog-editor"></div>
          <div data-image-size-controls class="blog-image-size-controls hidden">
            <span>{{ t(key="image-size", lang=lang | default(value='sk')) }}</span>
            <button type="button" data-image-size="small">{{ t(key="image-size-small", lang=lang | default(value='sk')) }}</button>
            <button type="button" data-image-size="medium">{{ t(key="image-size-medium", lang=lang | default(value='sk')) }}</button>
            <button type="button" data-image-size="full">{{ t(key="image-size-full", lang=lang | default(value='sk')) }}</button>
            <label>
              <span>{{ t(key="image-width-px", lang=lang | default(value='sk')) }}</span>
              <input type="number" min="40" max="1200" step="10" data-image-width class="input input-bordered input-sm">
            </label>
          </div>
          <p class="text-sm opacity-70" data-rich-status data-uploading='{{ t(key="image-uploading", lang=lang | default(value='sk')) }}' data-uploaded='{{ t(key="image-uploaded", lang=lang | default(value='sk')) }}' data-error='{{ t(key="image-upload-error", lang=lang | default(value='sk')) }}'></p>
        </div>

        <label class="label cursor-pointer justify-start gap-2">
          <input type="checkbox" name="published" class="checkbox checkbox-sm" {% if article.published %}checked{% endif %}>
          <span class="label-text">{{ t(key="published", lang=lang | default(value='sk')) }}</span>
        </label>

        <div class="flex flex-wrap gap-2 pt-2">
          <button type="submit" class="btn btn-neutral btn-sm">{{ t(key="save", lang=lang | default(value='sk')) }}</button>
          <a href="/admin/blog/articles" class="btn btn-ghost btn-sm">{{ t(key="cancel", lang=lang | default(value='sk')) }}</a>
        </div>
      </form>
    </div>
  </div>
</div>
<script src="/static/vendor/quill/quill.js"></script>
<script src="/static/js/blog-editor.js"></script>
{% endblock content %}