{% extends "base.html" %}
{% block title %}{{ role.name }} Role — Fossilrepo{% endblock %}

{% block content %}
<div class="mb-6">
  <a href="{% url 'organization:role_list' %}" class="text-sm text-brand-light hover:text-brand">&larr; Back to Roles</a>
</div>

<div class="overflow-hidden rounded-lg bg-gray-800 shadow border border-gray-700">
  <div class="px-6 py-5 sm:flex sm:items-center sm:justify-between">
    <div>
      <h1 class="text-2xl font-bold text-gray-100">{{ role.name }}</h1>
      <p class="mt-1 text-sm text-gray-400">{{ role.description|default:"No description." }}</p>
    </div>
    <div class="mt-4 flex items-center gap-3 sm:mt-0">
      {% if role.is_default %}
      <span class="inline-flex rounded-full bg-blue-900/50 px-2 text-xs font-semibold leading-5 text-blue-300">Default Role</span>
      {% endif %}
      {% if perms.organization.change_organization or user.is_superuser %}
      <a href="{% url 'organization:role_edit' slug=role.slug %}"
         class="rounded-md bg-gray-700 px-3 py-2 text-sm font-semibold text-gray-100 shadow-sm ring-1 ring-inset ring-gray-600 hover:bg-gray-600">
        Edit
      </a>
      <a href="{% url 'organization:role_delete' slug=role.slug %}"
         class="rounded-md bg-red-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-red-500">
        Delete
      </a>
      {% endif %}
    </div>
  </div>

  <div class="border-t border-gray-700 px-6 py-5">
    <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
      <div>
        <dt class="text-sm font-medium text-gray-400">Slug</dt>
        <dd class="mt-1 text-sm text-gray-400 font-mono">{{ role.slug }}</dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-400">GUID</dt>
        <dd class="mt-1 text-sm text-gray-400 font-mono">{{ role.guid }}</dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-400">Created</dt>
        <dd class="mt-1 text-sm text-gray-400">{{ role.created_at|date:"N j, Y g:i a" }}</dd>
      </div>
      <div>
        <dt class="text-sm font-medium text-gray-400">Updated</dt>
        <dd class="mt-1 text-sm text-gray-400">{{ role.updated_at|date:"N j, Y g:i a" }}</dd>
      </div>
    </dl>
  </div>
</div>

<div class="mt-8">
  <h2 class="text-lg font-semibold text-gray-100 mb-4">Permissions</h2>
  {% if grouped_permissions %}
  <div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
    {% for category, perms in grouped_permissions.items %}
    <div class="overflow-hidden rounded-lg border border-gray-700 bg-gray-800 shadow-sm">
      <div class="bg-gray-900 px-4 py-3">
        <h3 class="text-sm font-semibold text-gray-200">{{ category }}</h3>
      </div>
      <ul class="divide-y divide-gray-700">
        {% for perm in perms %}
        <li class="px-4 py-2 text-sm text-gray-400">
          <span class="font-mono text-xs">{{ perm.codename }}</span>
          <span class="ml-2 text-gray-500">{{ perm.name }}</span>
        </li>
        {% endfor %}
      </ul>
    </div>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-sm text-gray-400">No permissions assigned to this role.</p>
  {% endif %}
</div>

<div class="mt-8">
  <h2 class="text-lg font-semibold text-gray-100 mb-4">Members with this Role</h2>
  <div class="overflow-x-auto rounded-lg border border-gray-700 bg-gray-800 shadow-sm">
    <table class="min-w-full divide-y divide-gray-700">
      <thead class="bg-gray-900">
        <tr>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase text-gray-400">Username</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase text-gray-400">Email</th>
          <th class="px-6 py-3 text-left text-xs font-medium uppercase text-gray-400">Status</th>
        </tr>
      </thead>
      <tbody class="divide-y divide-gray-700 bg-gray-800">
        {% for membership in role_members %}
        <tr class="hover:bg-gray-700/50">
          <td class="px-6 py-4 whitespace-nowrap text-sm font-medium">
            <a href="{% url 'organization:user_detail' username=membership.member.username %}" class="text-brand-light hover:text-brand">{{ membership.member.username }}</a>
          </td>
          <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-400">{{ membership.member.email|default:"--" }}</td>
          <td class="px-6 py-4 whitespace-nowrap">
            {% if membership.is_active %}
            <span class="inline-flex rounded-full bg-green-900/50 px-2 text-xs font-semibold leading-5 text-green-300">Active</span>
            {% else %}
            <span class="inline-flex rounded-full bg-gray-700 px-2 text-xs font-semibold leading-5 text-gray-300">Inactive</span>
            {% endif %}
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="3" class="px-6 py-8 text-center text-sm text-gray-400">No members assigned to this role.</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}