{% extends "base.html" %}
{% block title %}{{ _("credentials.page_title") }}{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">

  <!-- Page Header -->
  <div class="mb-8">
    <div class="flex items-center gap-3 mb-2">
      <i class="fas fa-key text-yellow-500 text-2xl" aria-hidden="true"></i>
      <h1 class="text-3xl font-bold">{{ _("credentials.title") }}</h1>
    </div>
    <p class="text-gray-600">
      {{ _("credentials.subtitle") }}
    </p>
  </div>

  <!-- Summary Cards -->
  <div class="grid grid-cols-1 sm:grid-cols-3 gap-4 mb-8">
    <div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
      <span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-blue-100 text-blue-600 text-xl">
        <i class="fas fa-list" aria-hidden="true"></i>
      </span>
      <div>
        <div class="text-2xl font-bold text-gray-800">{{ total }}</div>
        <div class="text-sm text-gray-500">{{ _("credentials.total_credentials") }}</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
      <span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-green-100 text-green-600 text-xl">
        <i class="fas fa-check-circle" aria-hidden="true"></i>
      </span>
      <div>
        <div class="text-2xl font-bold text-green-700">{{ configured_count }}</div>
        <div class="text-sm text-gray-500">{{ _("credentials.configured") }}</div>
      </div>
    </div>
    <div class="bg-white rounded-lg shadow p-5 flex items-center gap-4">
      <span class="inline-flex items-center justify-center h-12 w-12 rounded-full bg-gray-100 text-gray-500 text-xl">
        <i class="fas fa-circle-question" aria-hidden="true"></i>
      </span>
      <div>
        <div class="text-2xl font-bold text-gray-600">{{ unconfigured_count }}</div>
        <div class="text-sm text-gray-500">{{ _("credentials.not_configured") }}</div>
      </div>
    </div>
  </div>

  <!-- Legend -->
  <div class="bg-blue-50 border-l-4 border-blue-500 text-blue-800 p-4 mb-6 rounded-r-md">
    <p class="font-semibold mb-2"><i class="fas fa-circle-info mr-1" aria-hidden="true"></i> {{ _("credentials.legend_title") }}</p>
    <div class="flex flex-wrap gap-4 text-sm">
      <span>
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800 mr-1">DB</span>
        {{ _("credentials.legend_db") }}
      </span>
      <span>
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800 mr-1">ENV</span>
        {{ _("credentials.legend_env_before") }}<code>.env</code>{{ _("credentials.legend_env_after") }}
      </span>
      <span>
        <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-red-100 text-red-700 mr-1">
          <i class="fas fa-circle-exclamation mr-0.5 text-xs"></i> {{ _("credentials.status_missing") }}
        </span>
        {{ _("credentials.legend_missing") }}
      </span>
      <span>
        <span class="text-orange-500 mr-1"><i class="fas fa-rotate"></i></span>
        {{ _("credentials.legend_restart") }}
      </span>
    </div>
  </div>

  <!-- Credential Categories -->
  {% for category, creds in categories.items() %}
  <div class="bg-white shadow rounded-lg mb-6">
    <!-- Category Header -->
    <div class="bg-gray-100 px-6 py-3 border-b border-gray-200 flex items-center justify-between">
      <h2 class="text-lg font-semibold text-gray-800">{{ category }}</h2>
      <span class="text-sm text-gray-500">
        {{ creds | selectattr('configured') | list | length }} / {{ creds | length }} {{ _("credentials.configured") }}
      </span>
    </div>

    <!-- Credentials Table -->
    <div class="overflow-x-auto">
      <table class="min-w-full divide-y divide-gray-200" aria-label="{{ _('credentials.table_for') ~ ' ' ~ category }}">
        <thead class="bg-gray-50">
          <tr>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-56">
              {{ _("credentials.col_credential") }}
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">
              {{ _("common.description") }}
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-32">
              {{ _("common.status") }}
            </th>
            <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider w-24">
              {{ _("credentials.col_source") }}
            </th>
            <th scope="col" class="px-6 py-3 text-center text-xs font-medium text-gray-500 uppercase tracking-wider w-20">
              {{ _("credentials.col_action") }}
            </th>
          </tr>
        </thead>
        <tbody class="bg-white divide-y divide-gray-100">
          {% for cred in creds %}
          <tr class="{% if not cred.configured %}bg-red-50{% else %}hover:bg-gray-50{% endif %}">

            <!-- Key name -->
            <td class="px-6 py-4 whitespace-nowrap">
              <div class="flex items-center gap-1">
                <code class="text-sm font-mono text-gray-800">{{ cred.key }}</code>
                {% if cred.restart_required %}
                <span title="{{ _('credentials.restart_title') }}">
                  <i class="fas fa-rotate text-orange-400 text-xs"></i>
                </span>
                {% endif %}
              </div>
            </td>

            <!-- Description -->
            <td class="px-6 py-4 text-sm text-gray-600">
              {{ cred.description }}
            </td>

            <!-- Status badge -->
            <td class="px-6 py-4 whitespace-nowrap">
              {% if cred.configured %}
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-green-100 text-green-800">
                <i class="fas fa-check mr-1" aria-hidden="true"></i> {{ _("credentials.configured") }}
              </span>
              {% else %}
              <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-semibold bg-red-100 text-red-700">
                <i class="fas fa-circle-exclamation mr-1" aria-hidden="true"></i> {{ _("credentials.status_missing") }}
              </span>
              {% endif %}
            </td>

            <!-- Source badge -->
            <td class="px-6 py-4 whitespace-nowrap">
              {% if cred.source == 'db' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-green-100 text-green-800" title="{{ _('credentials.source_db_title') }}">
                <i class="fas fa-database mr-1 text-xs" aria-hidden="true"></i> DB
              </span>
              {% elif cred.source == 'env' %}
              <span class="inline-flex items-center px-2 py-0.5 rounded text-xs font-medium bg-blue-100 text-blue-800" title="{{ _('credentials.source_env_title') }}">
                <i class="fas fa-terminal mr-1 text-xs" aria-hidden="true"></i> ENV
              </span>
              {% else %}
              <span class="text-gray-400 text-xs">—</span>
              {% endif %}
            </td>

            <!-- Quick-edit link -->
            <td class="px-6 py-4 whitespace-nowrap text-center">
              <a href="/settings#{{ cred.key }}"
                 title="{{ _('credentials.edit_in_settings') }}"
                 aria-label="{{ _('common.edit') ~ ' ' ~ cred.key }}"
                 class="inline-flex items-center justify-center w-7 h-7 rounded text-gray-400 hover:text-blue-600 hover:bg-blue-50 transition-colors"
              >
                <i class="fas fa-pen-to-square text-sm" aria-hidden="true"></i>
              </a>
            </td>

          </tr>
          {% endfor %}
        </tbody>
      </table>
    </div>
  </div>
  {% endfor %}

  <!-- Footer actions -->
  <div class="flex flex-col sm:flex-row gap-3 mt-6">
    <a href="/settings"
       class="inline-flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 text-sm font-medium"
    >
      <i class="fas fa-cog" aria-hidden="true"></i> {{ _("credentials.manage_settings") }}
    </a>
    <a href="/api/settings/credentials"
       target="_blank"
       class="inline-flex items-center gap-2 px-4 py-2 border border-gray-300 text-gray-700 rounded-md hover:bg-gray-50 text-sm font-medium"
    >
      <i class="fas fa-code" aria-hidden="true"></i> {{ _("credentials.raw_json") }}
    </a>
  </div>

</div>
{% endblock %}