{% extends "base.html" %}
{% block title %}Environment Configuration{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">Environment Configuration</h1>
    <p class="text-gray-600">
      This page displays the current configuration settings for the application. For security reasons,
      sensitive values like passwords, tokens, and keys may be hidden.
    </p>
    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
      <p><strong>Debug Mode:</strong> {{ "Enabled" if debug_enabled else "Disabled" }}</p>
      <p><strong>App Version:</strong> {{ app_version }}</p>
    </div>
  </div>

  {% for category, items in settings.items() %}
    <div class="mb-8">
      <h2 class="text-2xl font-semibold mb-4">{{ category }} Configuration</h2>
      <div class="bg-white shadow overflow-hidden rounded-lg">
        <table class="min-w-full divide-y divide-gray-200">
          <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">Setting</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Value</th>
              <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">Status</th>
            </tr>
          </thead>
          <tbody class="bg-white divide-y divide-gray-200">
            {% for item in items %}
              <tr>
                <td class="px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900">
                  {{ item.name }}
                </td>
                <td class="px-6 py-4 whitespace-nowrap text-sm text-gray-500">
                  {% if debug_enabled %}
                    {% if item.value is none %}
                      <span class="text-gray-400">NULL</span>
                    {% elif item.value == "" %}
                      <span class="text-gray-400">(empty string)</span>
                    {% else %}
                      {{ item.value }}
                    {% endif %}
                  {% else %}
                    <span class="text-gray-400">*** hidden in non-debug mode ***</span>
                  {% endif %}
                </td>
                <td class="px-6 py-4 whitespace-nowrap">
                  {% if item.is_configured %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
                      Configured
                    </span>
                  {% else %}
                    <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
                      Not Configured
                    </span>
                  {% endif %}
                </td>
              </tr>
            {% endfor %}
          </tbody>
        </table>
      </div>
    </div>
  {% endfor %}

  <div class="mt-8 bg-gray-50 p-4 rounded-lg border border-gray-200">
    <h3 class="text-lg font-medium text-gray-900">Environment Variables</h3>
    <p class="text-sm text-gray-600 mt-1">
      Configuration is loaded from environment variables or .env files.
      Make sure your environment variables are correctly set.
    </p>
    
    <div class="mt-4">
      <a href="/api/diagnostic/settings" class="inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-md shadow-sm text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
        View API Diagnostic
      </a>
    </div>
  </div>
</div>
{% endblock %}