{% extends "layouts/dashboard.html" %}
{% block title %}New permission — IILMP{% endblock %}
{% block breadcrumbs %}
<nav class="flex flex-wrap items-center gap-1.5 font-meta text-xs text-ruforum-text-muted" aria-label="Breadcrumb">
  <a href="{% url 'core:dashboard' %}" class="hover:text-ruforum-primary transition-colors">Dashboard</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="opacity-60">Access control</span>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <a href="{% url 'core:role_permissions_list' %}" class="hover:text-ruforum-primary transition-colors">Role permissions</a>
  <svg class="crumb-sep shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2.5" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M9 18l6-6-6-6"/></svg>
  <span class="text-ruforum-text">New permission</span>
</nav>
{% endblock %}
{% block content %}

<div class="mb-6 flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between">
  <div>
    <h1 class="font-display text-2xl font-bold text-ruforum-text">New permission</h1>
    <p class="mt-1 text-sm text-ruforum-text-muted">Add a custom Django auth permission so it can be assigned to a role.</p>
  </div>
  <a href="{% url 'core:role_permissions_list' %}" class="btn-secondary shrink-0">
    <svg class="h-4 w-4" fill="none" stroke="currentColor" viewBox="0 0 24 24" stroke-width="2" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" d="M15 19l-7-7 7-7"/></svg>
    Back to roles
  </a>
</div>

{% include "components/rims_page_intro.html" with eyebrow="New permission" heading="Define a named capability and tie it to a content type." description="Most permissions are auto-generated by Django from your models (add/change/delete/view). Use this form when you need a cross-cutting capability that isn't tied to a single model action — for example, a 'view dashboard' or 'export reports' permission that several views check by codename." %}

<div class="grid gap-x-8 gap-y-10 lg:grid-cols-12 lg:items-start">
  <div class="min-w-0 lg:col-span-7 xl:col-span-8">
    <form method="post" class="space-y-6">
      {% csrf_token %}
      {% if error %}
      <div class="rounded-xl border border-red-200 bg-red-50 px-4 py-3 text-sm text-red-800" role="alert">
        {{ error }}
      </div>
      {% endif %}
      <div class="card overflow-hidden">
        <div class="border-b border-ruforum-border bg-ruforum-surface px-5 py-4">
          <p class="form-section-label">Permission</p>
          <p class="mt-1 max-w-prose text-xs leading-relaxed text-ruforum-text-muted">
            Display name is shown in the role-permission matrix. The codename is what your code checks via <code class="font-mono text-[0.7rem]">user.has_perm("app_label.codename")</code>.
          </p>
        </div>
        <div class="space-y-5 p-5">
          <div>
            <label for="perm-name" class="field-label">Display name</label>
            <input id="perm-name" type="text" name="name" value="{{ name }}" maxlength="255" required autofocus placeholder="e.g. Can export reports">
          </div>
          <div>
            <label for="perm-codename" class="field-label">Codename</label>
            <input id="perm-codename" type="text" name="codename" value="{{ codename }}" maxlength="100" required pattern="[A-Za-z0-9_]+" placeholder="e.g. export_reports">
            <p class="field-hint">Letters, digits, and underscores only. Used in code (<code class="font-mono text-[0.7rem]">has_perm</code>).</p>
          </div>
          <div>
            <label for="perm-content-type" class="field-label">Content type</label>
            <select id="perm-content-type" name="content_type" required>
              <option value="">Select a content type…</option>
              {% for ct in content_types %}
              <option value="{{ ct.pk }}" {% if selected_content_type_id == ct.pk|stringformat:"s" %}selected{% endif %}>{{ ct.app_label }} · {{ ct.model }}</option>
              {% endfor %}
            </select>
            <p class="field-hint">Permissions attach to a content type (model). Pick the most relevant one — it groups the permission in the matrix.</p>
          </div>
        </div>
      </div>

      <div class="flex items-center justify-end gap-2">
        <a href="{% url 'core:role_permissions_list' %}" class="btn-secondary">Cancel</a>
        <button type="submit" class="btn-primary">Create permission</button>
      </div>
    </form>
  </div>

  <aside class="min-w-0 lg:col-span-5 xl:col-span-4">
    <div class="card p-5">
      <p class="form-section-label">When you actually need this</p>
      <p class="mt-3 text-sm leading-relaxed text-ruforum-text-muted">
        Most of the time you don't — adding a custom permission to a model's <code class="font-mono text-[0.7rem]">Meta.permissions</code> in code is the right place, and a migration ships it everywhere. Use this form when you want a quick named capability without a code change, e.g. when launching a temporary feature gate.
      </p>
    </div>
  </aside>
</div>

{% endblock %}