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

{% block page_title %}{{ heading }} · {{ title }}{% endblock %}

{% block header %}
  <div class="breadcrumbs py-0 text-sm">
    <ul>
      <li><a href="{{ urls.list(view) }}">{{ view.label_plural }}</a></li>
      <li class="truncate font-semibold">{{ heading }}</li>
    </ul>
  </div>
{% endblock %}

{% block content %}
<div class="mx-auto max-w-2xl p-4 lg:p-6">
  <form class="card card-border bg-base-100" method="post" action="{{ action }}">
    {{ csrf_input | safe if csrf_input }}
    <div class="card-body gap-1">
      {% if form_error %}
        <div role="alert" class="alert alert-error alert-soft mb-2">
          <span>{{ form_error }}</span>
        </div>
      {% endif %}

      {% for row in rows %}
        {% include "adminsite/_field.html" %}
      {% endfor %}

      <div class="card-actions mt-4 items-center border-t border-base-300 pt-4">
        <button class="btn btn-primary btn-sm" type="submit">{{ submit_label }}</button>
        <a class="btn btn-ghost btn-sm" href="{{ cancel_url }}">Cancel</a>
        <span class="flex-1"></span>
        {% if can_delete and record is not none %}
          <button class="btn btn-error btn-soft btn-sm" type="button"
                  onclick="document.getElementById('confirm-delete').showModal()">
            Delete
          </button>
        {% endif %}
      </div>
    </div>
  </form>

  {% if can_delete and record is not none %}
    <dialog id="confirm-delete" class="modal">
      <form class="modal-box" method="post" action="{{ urls.delete(view, key) }}">
        {{ csrf_input | safe if csrf_input }}
        <h3 class="text-lg font-semibold">Delete {{ heading }}?</h3>
        <p class="pt-2 text-base-content/80">This cannot be undone.</p>
        <div class="modal-action">
          <button type="button" class="btn btn-ghost btn-sm"
                  onclick="this.closest('dialog').close()">Cancel</button>
          <button type="submit" class="btn btn-error btn-sm">Delete</button>
        </div>
      </form>
      <div class="modal-backdrop" onclick="this.closest('dialog').close()"></div>
    </dialog>
  {% endif %}
</div>
{% endblock %}