{# pages/role_form.html — role edit with permission matrix #}
{% extends "base.html" %}

{% block title %}{% if role %}Edit Role{% else %}Create Role{% endif %} — {{ title | default("Admin") }}{% endblock %}

{% block breadcrumb %}
{{ super() }}
<span class="text-[var(--color-gray-400)]">/</span>
<a href="{{ admin_path | default('/admin') }}/roles/" class="hover:text-[var(--color-primary-600)] transition-colors">Roles</a>
<span class="text-[var(--color-gray-400)]">/</span>
<span class="text-[var(--color-gray-900)] font-medium">{% if role %}{{ role.name }}{% else %}Create{% endif %}</span>
{% endblock %}

{% block content %}
<div class="space-y-6">
  <div class="page-header">
    <div class="page-header-left">
      <a href="{{ admin_path | default('/admin') }}/roles/" class="page-header-back">
        <svg fill="none" stroke="currentColor" viewBox="0 0 24 24">
          <use href="/static/icons/heroicons.svg#chevron-left"/>
        </svg>
        Roles
      </a>
      <h1 class="page-header-title">
        {% if role %}Edit Role{% else %}New Role{% endif %}
      </h1>
      {% if role %}
      <p class="page-header-subtitle">
        <span class="mono">#{{ role.id }}</span> — {{ role.name }}
      </p>
      {% endif %}
    </div>
  </div>

  <form method="post" action="{{ admin_path | default('/admin') }}/roles{% if role %}/{{ role.id }}{% endif %}"
        class="space-y-6">
    <div class="bg-white rounded-xl border border-[var(--color-gray-200)] p-6">
      <h2 class="text-lg font-semibold text-[var(--color-gray-900)] mb-4">Role Details</h2>
      <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
        <div>
          <label for="name" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Name</label>
          <input type="text" id="name" name="name" value="{{ role.name | default('') }}" required
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
        <div>
          <label for="description" class="block text-sm font-medium text-[var(--color-gray-700)] mb-1">Description</label>
          <input type="text" id="description" name="description" value="{{ role.description | default('') }}"
                 class="form-input w-full px-4 py-2.5 rounded-lg border border-[var(--color-gray-300)] bg-white text-[var(--color-gray-900)] focus:ring-2 focus:ring-[var(--color-primary-500)] focus:border-[var(--color-primary-500)] transition-colors">
        </div>
      </div>
    </div>

    <div class="bg-white rounded-xl border border-[var(--color-gray-200)]">
      <div class="px-6 py-4 border-b border-[var(--color-gray-200)]">
        <h2 class="text-lg font-semibold text-[var(--color-gray-900)]">Permissions</h2>
        <p class="mt-1 text-sm text-[var(--color-gray-500)]">Configure what this role can do with each model.</p>
      </div>

      <div class="overflow-x-auto">
        <table class="w-full text-sm">
          <thead>
            <tr class="border-b border-[var(--color-gray-200)]">
              <th class="px-6 py-3 text-left font-medium text-[var(--color-gray-500)]">Model</th>
              <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">View</th>
              <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Create</th>
              <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Edit</th>
              <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Delete</th>
              <th class="px-6 py-3 text-center font-medium text-[var(--color-gray-500)]">Field-Level</th>
            </tr>
          </thead>
          <tbody class="divide-y divide-[var(--color-gray-100)]">
            {% for registered in registered_models %}
            <tr class="hover:bg-[var(--color-gray-50)] transition-colors" x-data="{ showFields: false }">
              <td class="px-6 py-4">
                <div class="font-medium text-[var(--color-gray-900)]">{{ registered.verbose_name }}</div>
                <div class="text-xs text-[var(--color-gray-500)]">{{ registered.table_name }}</div>
              </td>
              <td class="px-6 py-4 text-center">
                <input type="checkbox" name="perm[{{ registered.table_name }}][view]" value="1"
                       {% if permissions.get(registered.table_name, {}).get('view', false) %}checked{% endif %}
                       class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
              </td>
              <td class="px-6 py-4 text-center">
                <input type="checkbox" name="perm[{{ registered.table_name }}][create]" value="1"
                       {% if permissions.get(registered.table_name, {}).get('create', false) %}checked{% endif %}
                       class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
              </td>
              <td class="px-6 py-4 text-center">
                <input type="checkbox" name="perm[{{ registered.table_name }}][edit]" value="1"
                       {% if permissions.get(registered.table_name, {}).get('edit', false) %}checked{% endif %}
                       class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
              </td>
              <td class="px-6 py-4 text-center">
                <input type="checkbox" name="perm[{{ registered.table_name }}][delete]" value="1"
                       {% if permissions.get(registered.table_name, {}).get('delete', false) %}checked{% endif %}
                       class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
              </td>
              <td class="px-6 py-4 text-center">
                <button type="button" @click="showFields = !showFields"
                        class="text-[var(--color-primary-600)] hover:text-[var(--color-primary-500)] text-sm font-medium">
                  <span x-text="showFields ? 'Hide' : 'Show'"></span>
                </button>
              </td>
            </tr>
            <tr x-show="showFields" x-collapse class="bg-[var(--color-gray-50)]">
              <td colspan="6" class="px-6 py-4">
                <div class="text-sm font-medium text-[var(--color-gray-700)] mb-2">Field-Level Permissions</div>
                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-2">
                  {% for col in registered.columns %}
                  <div class="flex items-center gap-4 p-2 rounded bg-white border border-[var(--color-gray-200)]">
                    <span class="text-sm text-[var(--color-gray-700)]">{{ col.name }}</span>
                    <div class="flex items-center gap-2 ml-auto">
                      <label class="flex items-center gap-1 text-xs text-[var(--color-gray-500)]">
                        <input type="checkbox" name="field_perm[{{ registered.table_name }}][{{ col.name }}][view]" value="1"
                               {% if field_permissions.get(registered.table_name, {}).get(col.name, {}).get('view', true) %}checked{% endif %}
                               class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
                        View
                      </label>
                      <label class="flex items-center gap-1 text-xs text-[var(--color-gray-500)]">
                        <input type="checkbox" name="field_perm[{{ registered.table_name }}][{{ col.name }}][edit]" value="1"
                               {% if field_permissions.get(registered.table_name, {}).get(col.name, {}).get('edit', true) %}checked{% endif %}
                               class="rounded border-[var(--color-gray-300)] text-[var(--color-primary-600)] focus:ring-[var(--color-primary-500)]">
                        Edit
                      </label>
                    </div>
                  </div>
                  {% endfor %}
                </div>
              </td>
            </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>

    <div class="sticky bottom-0 bg-white border border-[var(--color-gray-200)] rounded-xl p-4 flex items-center justify-end gap-3">
      <a href="{{ admin_path | default('/admin') }}/roles/"
         class="px-4 py-2 rounded-lg border border-[var(--color-gray-300)] text-sm text-[var(--color-gray-700)] hover:bg-[var(--color-gray-50)] transition-colors">
        Cancel
      </a>
      <button type="submit"
              class="btn-primary px-4 py-2 rounded-lg bg-[var(--color-primary-600)] text-white text-sm font-medium hover:bg-[var(--color-primary-500)] transition-colors">
        {% if role %}Save Changes{% else %}Create Role{% endif %}
      </button>
    </div>
  </form>
</div>
{% endblock %}