{% extends "base.html" %}
{% block title %}Delete {{ page.name }} — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'pages:detail' slug=page.slug %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to {{ page.name }}</a>
</div>

<div class="mx-auto max-w-lg">
  <div class="rounded-lg bg-gray-800 p-6 shadow border border-gray-700">
    <h2 class="text-lg font-semibold text-gray-100">Delete Page</h2>
    <p class="mt-2 text-sm text-gray-400">
      Are you sure you want to delete <strong class="text-gray-100">{{ page.name }}</strong>? This action uses soft delete — the record will be marked as deleted but can be recovered.
    </p>
    <form method="post" class="mt-6 flex justify-end gap-3">
      {% csrf_token %}
      <a href="{% url 'pages:detail' slug=page.slug %}"
         class="rounded-md bg-gray-700 px-4 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        Cancel
      </a>
      <button type="submit"
              class="rounded-md bg-red-600 px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
        Delete
      </button>
    </form>
  </div>
</div>
{% endblock %}