{% extends "base.html" %}
{% block title %}{{ title }} — 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-2xl">
  <h1 class="text-2xl font-bold text-gray-100 mb-6">{{ title }}</h1>

  {% if edit_user %}
  <div class="mb-6 rounded-lg bg-gray-800 p-4 shadow border border-gray-700">
    <p class="text-sm text-gray-400">Username: <span class="font-medium text-gray-100">{{ edit_user.username }}</span></p>
  </div>
  {% endif %}

  <form method="post" class="space-y-6 rounded-lg bg-gray-800 p-6 shadow border border-gray-700">
    {% csrf_token %}

    {% for field in form %}
    <div>
      {% if field.field.widget.input_type == "checkbox" %}
      <div class="flex items-center gap-3">
        {{ field }}
        <label for="{{ field.id_for_label }}" class="text-sm font-medium text-gray-300">
          {{ field.label }}
        </label>
      </div>
      {% if field.help_text %}
      <p class="mt-1 text-sm text-gray-500">{{ field.help_text }}</p>
      {% endif %}
      {% else %}
      <label for="{{ field.id_for_label }}" class="block text-sm font-medium text-gray-300">
        {{ field.label }}{% if field.field.required %} <span class="text-red-400">*</span>{% endif %}
      </label>
      <div class="mt-1">{{ field }}</div>
      {% endif %}
      {% if field.errors %}
      <p class="mt-1 text-sm text-red-400">{{ field.errors.0 }}</p>
      {% endif %}
    </div>
    {% endfor %}

    <div class="flex justify-end gap-3 pt-4">
      <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-brand px-4 py-2 text-sm font-semibold text-white shadow-sm hover:bg-brand-hover">
        {% if edit_user %}Update{% else %}Create User{% endif %}
      </button>
    </div>
  </form>
</div>
{% endblock %}