{% extends "admin/base_site.html" %}
{% load i18n %}

{% block title %}{{ title }} | {{ site_title|default:"Django site admin" }}{% endblock %}

{% block extrastyle %}{{ block.super }}
<style>
  .karni-matrix-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .karni-matrix { border-collapse: separate; border-spacing: 0; min-width: 100%; font-size: 0.875rem; }
  .karni-matrix th, .karni-matrix td { border-bottom: 1px solid var(--color-base-200); padding: 0.4rem 0.5rem; text-align: left; vertical-align: middle; white-space: nowrap; }
  .karni-matrix thead th { position: sticky; top: 0; z-index: 3; background: var(--color-base-50); }
  .karni-matrix .karni-sticky { position: sticky; left: 0; z-index: 2; background: var(--color-base-50); }
  .karni-matrix thead th.karni-sticky { z-index: 4; }
  .karni-matrix .karni-group td { background: var(--color-base-100); font-weight: 600; }
  .karni-matrix select { min-height: 44px; min-width: 9rem; font-size: 16px; border: 1px solid var(--color-base-300); border-radius: 6px; padding: 0.3rem 0.5rem; background: var(--color-base-50); color: inherit; }
  .karni-matrix select:disabled { opacity: 0.6; }
  .karni-matrix .karni-bulk { min-width: 7rem; font-weight: 400; }
  .karni-cell-origin { display: block; font-size: 0.7rem; color: var(--color-base-500); }
  .karni-matrix-toolbar { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 1rem 0; }
  .karni-button { display: inline-block; min-height: 44px; line-height: 44px; padding: 0 1.25rem; border-radius: 6px; background: var(--color-primary-600); color: #fff; font-weight: 600; border: 0; cursor: pointer; }
  .karni-button:hover { background: var(--color-primary-700); }
  .karni-link { color: var(--color-primary-600); text-decoration: underline; }
  .karni-note { color: var(--color-base-500); font-size: 0.85rem; }
  .karni-matrix-recent td, .karni-matrix-recent th { padding: 0.4rem 0.5rem; border-bottom: 1px solid var(--color-base-200); text-align: left; }
  html.dark .karni-matrix thead th, html.dark .karni-matrix .karni-sticky, html.dark .karni-matrix select { background: var(--color-base-900); }
  html.dark .karni-matrix .karni-group td { background: var(--color-base-800); }
  html.dark .karni-matrix th, html.dark .karni-matrix td, html.dark .karni-matrix-recent td, html.dark .karni-matrix-recent th { border-color: var(--color-base-800); }
  html.dark .karni-matrix select { border-color: var(--color-base-700); }
</style>
{% endblock %}

{% block content %}
<div class="karni-matrix-page">
  <p class="karni-note">
    {% blocktranslate trimmed %}
      One cell per role and action: the rows that role may reach. A locked cell is declared in KARNI_ROLES
      for a system role and changes only there. Nothing is saved until you review the diff.
    {% endblocktranslate %}
    <a class="karni-link" href="{{ matrix_url }}effective/">{% translate "Effective permissions for a user" %}</a>
  </p>

  <form method="post" id="karni-matrix-form">
    {% csrf_token %}
    <div class="karni-matrix-scroll">
      <table class="karni-matrix" id="karni-matrix">
        <thead>
          <tr>
            <th class="karni-sticky">{% translate "Model / action" %}</th>
            {% for role in matrix.roles %}
              <th scope="col">
                <div>{{ role.name }} <span class="karni-note">({{ role.slug }}{% if role.is_system %}, {% translate "system" %}{% endif %})</span></div>
                {% if can_edit %}
                <select class="karni-bulk" aria-label="{% blocktranslate with role=role.slug %}Set every cell of {{ role }}{% endblocktranslate %}" data-bulk-role="{{ role.slug }}">
                  <option value="">{% translate "Set column…" %}</option>
                  <option value="all">{% translate "All rows" %}</option>
                  <option value="own">{% translate "Own rows" %}</option>
                  <option value="__none__">{% translate "No access" %}</option>
                </select>
                {% endif %}
              </th>
            {% endfor %}
          </tr>
        </thead>
        <tbody>
          {% for group in table %}
            <tr class="karni-group">
              <td class="karni-sticky">
                {{ group.model.name|capfirst }} <span class="karni-note">{{ group.model.label }}</span>
                {% if can_edit %}
                <select class="karni-bulk" aria-label="{% blocktranslate with model=group.model.label %}Set every cell of {{ model }}{% endblocktranslate %}" data-bulk-model="{{ group.model.label }}">
                  <option value="">{% translate "Set row…" %}</option>
                  {% for value, label in group.model.scopes %}<option value="{{ value }}">{{ label }}</option>{% endfor %}
                  <option value="__none__">{% translate "No access" %}</option>
                </select>
                {% endif %}
              </td>
              {% for role in matrix.roles %}<td></td>{% endfor %}
            </tr>
            {% for row in group.actions %}
              <tr>
                <th scope="row" class="karni-sticky">{{ row.action }}</th>
                {% for cell in row.cells %}
                  <td>
                    <select name="{{ cell.name }}" data-role="{{ cell.role }}" data-model="{{ group.model.label }}"
                            aria-label="{{ cell.role }} {{ row.permission }}"
                            {% if cell.locked or not can_edit %}disabled{% endif %}>
                      <option value="" {% if not cell.value %}selected{% endif %}>—</option>
                      {% for value, label, selected in cell.options %}
                        <option value="{{ value }}" {% if selected %}selected{% endif %}>{{ label }}</option>
                      {% endfor %}
                      {% if cell.declared and cell.origin == "matrix" %}
                        <option value="declared">{% blocktranslate with scope=cell.declared %}Declared ({{ scope }}){% endblocktranslate %}</option>
                      {% endif %}
                    </select>
                    {% if cell.locked %}
                      <span class="karni-cell-origin" title="{% translate 'Declared in KARNI_ROLES for a system role' %}">🔒 {% translate "declared" %}</span>
                    {% elif cell.origin == "matrix" %}
                      <span class="karni-cell-origin">{% translate "set here" %}{% if cell.declared %} · {% translate "declared" %}: {{ cell.declared }}{% endif %}</span>
                    {% elif cell.origin == "declared" %}
                      <span class="karni-cell-origin">{% translate "declared" %}</span>
                    {% endif %}
                  </td>
                {% endfor %}
              </tr>
            {% endfor %}
          {% empty %}
            <tr><td colspan="{{ matrix.roles|length|add:1 }}">{% translate "No models to grant: every app is excluded by KARNI_MATRIX_EXCLUDE." %}</td></tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
    {% if can_edit %}
      <div class="karni-matrix-toolbar">
        <button type="submit" class="karni-button">{% translate "Review changes" %}</button>
        <span class="karni-note">{% translate "You will see the diff before anything is saved." %}</span>
      </div>
    {% else %}
      <p class="karni-note">{% translate "You may view this matrix but not change it (karni_accounts.rolepermission:change)." %}</p>
    {% endif %}
  </form>

  <h2 class="font-semibold mt-6 mb-2">{% translate "Recent changes" %}</h2>
  {% if recent %}
    <table class="karni-matrix-recent w-full">
      <thead><tr><th>{% translate "When" %}</th><th>{% translate "Who" %}</th><th>{% translate "Role" %}</th><th>{% translate "Permission" %}</th><th>{% translate "Change" %}</th></tr></thead>
      <tbody>
        {% for entry in recent %}
          <tr>
            <td>{{ entry.timestamp|date:"DATETIME_FORMAT" }}</td>
            <td>{% if entry.actor %}{{ entry.actor.get_username }}{% else %}—{% endif %}</td>
            <td>{{ entry.role }}</td>
            <td><code>{{ entry.permission }}</code></td>
            <td>{{ entry.before|default:"—" }} → {{ entry.after|default:"—" }}</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  {% else %}
    <p class="karni-note">{% translate "No grant has been changed yet." %}</p>
  {% endif %}
</div>

<script>
(function () {
  function apply(selector, value) {
    document.querySelectorAll(selector).forEach(function (cell) {
      if (cell.disabled) { return; }
      var target = value === "__none__" ? "" : value;
      var exists = Array.prototype.some.call(cell.options, function (option) { return option.value === target; });
      if (exists) { cell.value = target; }
    });
  }
  document.querySelectorAll("[data-bulk-role]").forEach(function (bulk) {
    bulk.addEventListener("change", function () {
      if (!bulk.value) { return; }
      apply('select[data-role="' + bulk.dataset.bulkRole + '"]', bulk.value);
      bulk.value = "";
    });
  });
  document.querySelectorAll("[data-bulk-model]").forEach(function (bulk) {
    bulk.addEventListener("change", function () {
      if (!bulk.value) { return; }
      apply('select[data-model="' + bulk.dataset.bulkModel + '"]', bulk.value);
      bulk.value = "";
    });
  });
})();
</script>
{% endblock %}