{% extends "dashboard/base.html" %}
{% load dash_extras %}

{% block extra_head %}{{ form.media }}{% endblock %}

{% block content %}
<form method="post" enctype="multipart/form-data" class="reveal">
  {% csrf_token %}

  {% if form.non_field_errors %}
    <div class="mb-5 rounded-xl border border-red-500/30 bg-red-500/10 px-4 py-3 text-sm text-red-300">
      {% for e in form.non_field_errors %}<p>{{ e }}</p>{% endfor %}
    </div>
  {% endif %}

  <div class="grid gap-5 lg:grid-cols-[1fr_320px]">

    <!-- Editor utama -->
    <div class="space-y-5">
      <div class="card p-5 sm:p-6">
        {% include "dashboard/partials/field.html" with field=form.title %}
        <div class="mt-5">{% include "dashboard/partials/field.html" with field=form.excerpt %}</div>
      </div>

      <div class="card p-5 sm:p-6">
        <label class="mb-2 block text-xs font-semibold text-neutral-400">
          {{ form.content.label }} <span class="text-brand-500">*</span>
        </label>
        {{ form.content }}
        {% if form.content.errors %}<ul class="errorlist">{% for e in form.content.errors %}<li>{{ e }}</li>{% endfor %}</ul>{% endif %}
      </div>
    </div>

    <!-- Panel samping -->
    <aside class="space-y-5">
      <div class="card p-5">
        <p class="mb-4 text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Publikasi</p>
        <div class="space-y-4">
          {% include "dashboard/partials/field.html" with field=form.status %}
          {% include "dashboard/partials/field.html" with field=form.post_type %}
          {% include "dashboard/partials/field.html" with field=form.published_at %}
          {% include "dashboard/partials/field.html" with field=form.slug %}
        </div>
      </div>

      <div class="card p-5">
        <p class="mb-4 text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Klasifikasi</p>
        <div class="space-y-4">
          {% include "dashboard/partials/field.html" with field=form.category %}
          {% include "dashboard/partials/field.html" with field=form.tags %}
        </div>
        <p class="mt-3 text-xs text-neutral-600">Tahan Ctrl (atau Cmd) untuk memilih beberapa tag.</p>
      </div>

      <div class="card p-5">
        <p class="mb-4 text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Cover</p>
        {% if form.instance.cover %}
          <img src="{{ form.instance.cover.url }}" alt="" class="mb-3 aspect-video w-full rounded-xl border border-white/10 object-cover">
        {% endif %}
        {% include "dashboard/partials/field.html" with field=form.cover %}
      </div>

      <div class="card space-y-3 p-5">
        <p class="mb-1 text-xs font-bold uppercase tracking-[0.16em] text-brand-500">Opsi</p>
        {% include "dashboard/partials/field.html" with field=form.is_pinned %}
        {% include "dashboard/partials/field.html" with field=form.allow_comments %}
      </div>
    </aside>
  </div>

  <div class="sticky bottom-0 mt-5 flex flex-wrap gap-3 rounded-2xl border border-white/10 glass p-4">
    <button type="submit" class="btn btn-primary btn-shine flex-1 sm:flex-none">
      <svg class="h-4 w-4" fill="none" stroke="currentColor" stroke-width="2.5" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7"/></svg>
      Simpan Postingan
    </button>
    <a href="{% url 'dashboard:post_list' %}" class="btn btn-ghost">Batal</a>
    {% if form.instance.pk and form.instance.status == 'published' %}
      <a href="{{ form.instance.get_absolute_url }}" target="_blank" class="btn btn-ghost">Pratinjau</a>
    {% endif %}
  </div>
</form>
{% endblock %}