{% extends "base.html" %}
{% block title %}External Access{% endblock %}
{% block breadcrumb %}
<nav class="mb-4" aria-label="Breadcrumb">
  <ol class="flex items-center gap-1.5 text-xs text-gray-500 dark:text-gray-400">
    <li><a href="{% url 'dashboard' %}" class="hover:text-gray-700 dark:hover:text-gray-300">Dashboard</a></li>
    <li class="text-gray-300 dark:text-gray-600">/</li>
    <li class="text-gray-900 dark:text-white font-medium" aria-current="page">External Access</li>
  </ol>
</nav>
{% endblock %}
{% block content %}
<div class="mb-6 flex items-center justify-between">
  <div>
    <h1 class="text-2xl font-bold">External Access</h1>
    <p class="text-gray-500 dark:text-gray-400 text-sm mt-1">{{ accesses.count }} access entries</p>
  </div>
</div>


<div class="dk-card overflow-hidden divide-y divide-gray-200 dark:divide-gray-600">
  <div class="px-6 py-4"><h3 class="text-sm font-semibold text-gray-900 dark:text-gray-100">Access Entries</h3><p class="text-xs text-gray-500 mt-0.5">{{ accesses.count }} entries</p></div>
  <div class="overflow-x-auto">
    <table class="w-full text-sm">
      <thead>
        <tr class="border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-800">
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Project</th>
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Token</th>
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Password</th>
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Status</th>
          <th class="text-left px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Last Accessed</th>
          <th class="text-right px-4 py-3 font-semibold text-xs text-gray-500 dark:text-gray-400">Actions</th>
        </tr>
      </thead>
      <tbody>
        {% for a in accesses %}
        <tr class="border-b border-gray-100 dark:border-gray-700 hover:bg-gray-50 dark:hover:bg-gray-800/50">
          <td class="px-4 py-3 font-medium">{{ a.project.name }}</td>
          <td class="px-4 py-3">
            <div class="flex items-center gap-2" x-data="{ copied: false }">
              <code class="text-xs bg-gray-100 dark:bg-gray-950 px-2 py-1 rounded font-mono">{{ a.access_token|truncatechars:20 }}</code>
              <button class="dk-btn-ghost p-1 text-xs" data-tip="Copy token" @click="navigator.clipboard.writeText('{{ a.access_token }}'); copied = true; setTimeout(() => copied = false, 2000)">
                <i class="far fa-copy" :class="copied ? 'text-emerald-500' : ''"></i>
              </button>
            </div>
          </td>
          <td class="px-4 py-3">
            <div class="flex items-center gap-2" x-data="{ show: false }">
              <code class="text-xs bg-gray-100 dark:bg-gray-950 px-2 py-1 rounded font-mono" x-text="show ? '{{ a.password }}' : '••••••••'"></code>
              <button class="dk-btn-ghost p-1 text-xs" data-tip="Toggle password" @click="show = !show">
                <i class="far fa-eye" :class="show ? 'text-blue-500' : ''"></i>
              </button>
            </div>
          </td>
          <td class="px-4 py-3">
            {% if a.is_active %}
            <span class="dk-badge bg-emerald-100 text-emerald-700 dark:bg-emerald-900/30 dark:text-emerald-400">Active</span>
            {% else %}
            <span class="dk-badge bg-gray-100 text-gray-500 dark:bg-gray-950 dark:text-gray-400">Inactive</span>
            {% endif %}
          </td>
          <td class="px-4 py-3 text-gray-500 dark:text-gray-400 text-xs">
            {% if a.last_accessed_at %}{{ a.last_accessed_at|date:"M d, Y H:i" }}{% else %}Never{% endif %}
          </td>
          <td class="px-4 py-3 text-right">
            <div class="flex items-center justify-end gap-2">
              <form method="post" action="{% url 'external-access-regenerate' a.id %}" class="inline">
                {% csrf_token %}
                <button class="px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium transition-colors">Regenerate</button>
              </form>
              <form method="post" action="{% url 'external-access-toggle' a.id %}" class="inline">
                {% csrf_token %}
                <button class="px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium transition-colors">
                  {% if a.is_active %}Deactivate{% else %}Activate{% endif %}
                </button>
              </form>
              <a href="/external/{{ a.access_token }}/" target="_blank" class="inline-block px-3 py-1.5 text-xs border border-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 text-gray-700 dark:text-gray-300 font-medium transition-colors">Open Link</a>
            </div>
          </td>
        </tr>
        {% empty %}
        <tr>
          <td colspan="6" class="px-4 py-12 text-center text-gray-400">
            <i class="fas fa-key text-3xl mb-2"></i>
            <p class="text-base font-medium">No external access entries</p>
            <p class="text-sm mt-1">Create one from a project's settings.</p>
          </td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>
{% endblock %}