{% extends "layout.html" %}
{% block title %}Add Role – {{ admin_title }}{% endblock %}
{% block content %}
<div class="mb-6">
  <h1 class="text-xl font-semibold text-zinc-900">Add Role</h1>
</div>

{% if error %}
<div class="mb-4 px-4 py-3 rounded-md bg-red-50 border border-red-200 text-red-700 text-sm">
  {{ error }}
</div>
{% endif %}

<form method="post" action="/admin/roles/new" class="space-y-6 max-w-2xl">
  <input type="hidden" name="csrf_token" value="{{ csrf_token }}" />
  <div>
    <label class="block text-sm font-medium text-zinc-700 mb-1">Role name</label>
    <input type="text" name="name" value="{{ role_name | default(value='') }}" required
           class="w-full px-3 py-2 border border-zinc-300 rounded-md text-sm focus:outline-none focus:ring-2 focus:ring-zinc-900" />
  </div>

  <div>
    <h2 class="text-sm font-semibold text-zinc-700 mb-3">Permissions</h2>
    <div class="bg-white border border-zinc-200 rounded-lg overflow-hidden">
      <table class="w-full text-sm">
        <thead class="bg-zinc-50 border-b border-zinc-200">
          <tr>
            <th class="text-left px-4 py-3 font-medium text-zinc-600 w-1/2">Entity</th>
            <th class="text-center px-4 py-3 font-medium text-zinc-600">View</th>
            <th class="text-center px-4 py-3 font-medium text-zinc-600">Create</th>
            <th class="text-center px-4 py-3 font-medium text-zinc-600">Edit</th>
            <th class="text-center px-4 py-3 font-medium text-zinc-600">Delete</th>
          </tr>
        </thead>
        <tbody class="divide-y divide-zinc-100">
          {% for p in perms %}
          <tr class="hover:bg-zinc-50">
            <td class="px-4 py-3 font-medium text-zinc-900">{{ p.entity_label }}</td>
            <td class="px-4 py-3 text-center">
              <input type="checkbox" name="perms" value="{{ p.entity_name }}.view"
                     {% if p.view %}checked{% endif %}
                     class="rounded border-zinc-300" />
            </td>
            <td class="px-4 py-3 text-center">
              <input type="checkbox" name="perms" value="{{ p.entity_name }}.create"
                     {% if p.create %}checked{% endif %}
                     class="rounded border-zinc-300" />
            </td>
            <td class="px-4 py-3 text-center">
              <input type="checkbox" name="perms" value="{{ p.entity_name }}.edit"
                     {% if p.edit %}checked{% endif %}
                     class="rounded border-zinc-300" />
            </td>
            <td class="px-4 py-3 text-center">
              <input type="checkbox" name="perms" value="{{ p.entity_name }}.delete"
                     {% if p.delete %}checked{% endif %}
                     class="rounded border-zinc-300" />
            </td>
          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>

  <div class="flex items-center gap-3">
    <button type="submit"
            class="px-4 py-2 bg-zinc-900 text-white text-sm font-medium rounded-md hover:bg-zinc-700 transition-colors">
      Create role
    </button>
    <a href="/admin/roles/"
       class="px-4 py-2 text-sm font-medium text-zinc-600 hover:text-zinc-900">Cancel</a>
  </div>
</form>
{% endblock %}