{% extends "base.html" %}
{% block title %}Remove Member — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'organization:members' %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Members</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">Remove Member</h2>
    <p class="mt-2 text-sm text-gray-400">
      Are you sure you want to remove <strong class="text-gray-100">{{ membership.member.username }}</strong> from the organization? This action uses soft delete — the membership can be recovered.
    </p>
    <form method="post" class="mt-6 flex justify-end gap-3">
      {% csrf_token %}
      <a href="{% url 'organization:members' %}"
         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">
        Remove
      </button>
    </form>
  </div>
</div>
{% endblock %}