gh-christianlouis-docuelevate/frontend/templates/status_dashboard.html

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

{% block head %}
<!-- Font Awesome is loaded in base.html -->
{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
  <div class="mb-8">
    <h1 class="text-3xl font-bold mb-2">{{ _("status.page_title") }}</h1>
    <p class="text-gray-600">
      {{ _("status.dashboard_subtitle") }}
    </p>
    <div class="bg-blue-100 border-l-4 border-blue-500 text-blue-700 p-4 my-4" role="alert">
      <p><strong>{{ _("status.app_version") }}:</strong> {{ app_version }}{% if release_name %} <span class="italic">"{{ release_name }}"</span>{% endif %}</p>
      <p><strong>{{ _("status.build_date") }}:</strong> {{ build_date }}</p>
      <p><strong>{{ _("status.debug_mode") }}:</strong> {{ _("common.enabled") if debug_enabled else _("common.disabled") }}</p>
      {% if last_check %}
      <p><strong>{{ _("status.last_check") }}:</strong> {{ last_check }}</p>
      {% endif %}
      {% if container_info.is_docker %}
      <p><strong>{{ _("status.container_id") }}:</strong> {{ container_info.id }}</p>
      {% endif %}
      {% if container_info.git_sha and container_info.git_sha != 'Unknown' %}
      <p><strong>{{ _("status.git_commit") }}:</strong> {{ container_info.git_sha }}</p>
      {% endif %}
      {% if container_info.runtime_info %}
      <p><strong>{{ _("status.container_started") }}:</strong> {{ container_info.runtime_info }}</p>
      {% endif %}
    </div>
  </div>

  <div class="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3" aria-live="polite">
    {% for name, provider in providers.items() %}
      <div class="bg-white overflow-hidden shadow rounded-lg">
        <div class="px-4 py-5 sm:px-6 flex justify-between items-center">
          <div class="flex items-center">
            <span class="inline-flex items-center justify-center h-10 w-10 rounded-md {{ 'bg-green-500' if provider.configured else 'bg-gray-400' }} text-white mr-3">
              <!-- Use Font Awesome icon -->
              <i class="{{ provider.icon }} fa-lg" aria-hidden="true"></i>
            </span>
            <h3 class="text-lg leading-6 font-medium text-gray-900">{{ name }}</h3>
          </div>
          {% if provider.configured %}
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-green-100 text-green-800">
              {{ _("status.configured") }}
            </span>
          {% else %}
            <span class="px-2 inline-flex text-xs leading-5 font-semibold rounded-full bg-red-100 text-red-800">
              {{ _("status.not_configured") }}
            </span>
          {% endif %}
        </div>
        <div class="border-t border-gray-200">
          <div class="px-4 py-5 sm:p-6">
            <p class="text-sm text-gray-500">{{ provider.description }}</p>

            <!-- NextCloud or link to provider URL -->
            {% if provider.configured and name == "NextCloud" %}
              {% if provider.details and provider.details.url %}
                {% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
                <div class="mt-3">
                  <a href="{{ nextcloud_base_url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
                    {{ nextcloud_base_url|truncate(30) }} <span aria-hidden="true">&rarr;</span>
                  </a>
                </div>
              {% endif %}
            {% elif provider.url and provider.configured %}
              <div class="mt-3">
                <a href="{{ provider.url }}" target="_blank" class="text-sm text-blue-600 hover:text-blue-800">
                  {{ provider.url|truncate(30) }} <span aria-hidden="true">&rarr;</span>
                </a>
              </div>
            {% endif %}

            <div class="mt-4 flex items-center justify-between">
              <div>
                {% if provider.configured %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-green-100 text-green-800">
                    <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-green-400" fill="currentColor" viewBox="0 0 8 8">
                      <circle cx="4" cy="4" r="3" />
                    </svg>
                    {{ _("status.active") }}
                  </span>
                {% else %}
                  <span class="inline-flex items-center px-2.5 py-0.5 rounded-md text-sm font-medium bg-gray-100 text-gray-800">
                    <svg class="-ml-0.5 mr-1.5 h-2 w-2 text-gray-400" fill="currentColor" viewBox="0 0 8 8">
                      <circle cx="4" cy="4" r="3" />
                    </svg>
                    {{ _("status.inactive") }}
                  </span>
                {% endif %}
              </div>

              <!-- Action buttons -->
              <div class="flex space-x-2">
                {% if provider.configured and provider.details %}
                  <button
                    class="view-details-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    data-provider="{{ name }}"
                    data-details="{{ provider.details|tojson|forceescape }}">
                    {{ _("status.view_details") }}
                  </button>
                {% endif %}

                <!-- Notification Test Button -->
                {% if name == "Notifications" and provider.configured %}
                  <button
                    id="testNotificationBtn"
                    class="test-generic-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    data-endpoint="{{ provider.test_endpoint }}"
                    data-method="POST">
                    {{ _("status.test_notifications") }}
                  </button>
                {% endif %}

                <!-- Generic Test Button for any provider with test_endpoint -->
                {% if provider.testable and provider.configured and provider.test_endpoint and name != "Notifications" %}
                  <button
                    class="test-generic-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                    data-endpoint="{{ provider.test_endpoint }}"
                    data-method="{{ provider.test_method|default('GET') }}">
                    {{ _("status.test_provider", name=name) }}
                  </button>
                {% endif %}

                <!-- Provider-specific buttons -->
                {% if name == "Dropbox" %}
                  {% if provider.configured %}
                    <button
                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      data-provider="dropbox">
                      {{ _("status.test_connection") }}
                    </button>
                    <a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      <i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
                      {{ _("status.manage") }}
                    </a>
                  {% else %}
                    <a href="/dropbox-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      {{ _("status.configure_now") }}
                    </a>
                  {% endif %}
                {% elif name == "OneDrive" %}
                  {% if provider.configured %}
                    <button
                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      data-provider="onedrive">
                      {{ _("status.test_connection") }}
                    </button>
                    <a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      <i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
                      {{ _("status.manage") }}
                    </a>
                  {% else %}
                    <a href="/onedrive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      {{ _("status.configure_now") }}
                    </a>
                  {% endif %}
                {% elif name == "Google Drive" %}
                  {% if provider.configured %}
                    <button
                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      data-provider="google_drive">
                      {{ _("status.test_connection") }}
                    </button>
                    <a href="/google-drive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      <i class="fa-solid fa-gear h-3 w-3 mr-1" aria-hidden="true"></i>
                      {{ _("status.manage") }}
                    </a>
                  {% else %}
                    <a href="/google-drive-setup" class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-white bg-indigo-600 hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      {{ _("status.configure_now") }}
                    </a>
                  {% endif %}
                {% elif name == "AI Provider" %}
                  {% if provider.configured %}
                    <button
                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      data-provider="ai_provider">
                      {{ _("status.test_connection") }}
                    </button>
                    <button
                      id="testAiExtractionBtn"
                      class="inline-flex items-center px-2.5 py-1.5 border border-transparent text-xs font-medium rounded text-indigo-700 bg-indigo-100 hover:bg-indigo-200 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      <i class="fa-solid fa-flask mr-1" aria-hidden="true"></i>
                      {{ _("status.test_extraction") }}
                    </button>
                  {% endif %}
                {% elif name == "Azure AI" %}
                  {% if provider.configured %}
                    <button
                      class="test-provider-btn inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500"
                      data-provider="azure">
                      {{ _("status.test_connection") }}
                    </button>
                  {% endif %}
                {% elif provider.configured and name == "Paperless-ngx" %}
                  <a href="{{ provider.details.host }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                    <i class="fa-solid fa-external-link h-3 w-3 mr-1" aria-hidden="true"></i>
                    {{ _("status.open") }}
                  </a>
                {% elif provider.configured and name == "NextCloud" %}
                  {% if provider.details and provider.details.url %}
                    {% set nextcloud_base_url = provider.details.url.split('/remote.php')[0] %}
                    <a href="{{ nextcloud_base_url }}" target="_blank" class="inline-flex items-center px-2.5 py-1.5 border border-gray-300 text-xs font-medium rounded text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
                      <i class="fa-solid fa-external-link h-3 w-3 mr-1" aria-hidden="true"></i>
                      {{ _("status.open") }}
                    </a>
                  {% endif %}
                {% endif %}
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <div class="mt-8 bg-gray-50 p-4 rounded-lg border border-gray-200">
    <h3 class="text-lg font-medium text-gray-900">{{ _("status.config_settings") }}</h3>
    <p class="text-sm text-gray-600 mt-1">
      {{ _("status.config_settings_desc") }}
    </p>

    <div class="mt-4">
      <a href="/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">
        {{ _("status.view_config") }}
      </a>
    </div>
  </div>

  <!-- Result Modal -->
  <div id="resultModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog" aria-labelledby="modalTitle">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-1/2 lg:w-1/3 shadow-lg rounded-md bg-white">
      <div class="mt-3 text-center">
        <div id="modalIcon" class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4">
          <!-- Icon will be injected by JS -->
        </div>
        <h3 id="modalTitle" class="text-lg leading-6 font-medium text-gray-900">{{ _("status.modal_default_title") }}</h3>
        <div class="mt-2 px-7 py-3">
          <p id="modalMessage" class="text-sm text-gray-500">
            {{ _("status.modal_default_message") }}
          </p>
        </div>
        <div class="items-center px-4 py-3">
          <button id="modalClose" class="px-4 py-2 bg-blue-500 text-white text-base font-medium rounded-md w-full shadow-sm hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-300">
            {{ _("common.close") }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Details Modal -->
  <div id="detailsModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog" aria-labelledby="detailsModalTitle">
    <div class="relative top-20 mx-auto p-5 border w-11/12 md:w-2/3 lg:w-1/2 shadow-lg rounded-md bg-white">
      <div class="absolute top-0 right-0 pt-4 pr-4">
        <button type="button" id="closeDetailsModal" class="text-gray-400 hover:text-gray-500">
          <span class="sr-only">{{ _("common.close") }}</span>
          <i class="fa-solid fa-xmark h-6 w-6" aria-hidden="true"></i>
        </button>
      </div>
      <div class="mt-3">
        <h3 id="detailsModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-4">{{ _("status.provider_details") }}</h3>
        <div class="mt-4">
          <dl class="grid grid-cols-1 gap-x-4 gap-y-6 sm:grid-cols-2">
            <div id="detailsContent" class="col-span-2">
              <!-- Details will be populated by JavaScript -->
            </div>
          </dl>
        </div>
        <div class="mt-6 flex justify-end">
          <button type="button" id="closeDetailsBtn" class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
            {{ _("common.close") }}
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- AI Extraction Test Modal -->
  <div id="aiExtractionModal" class="fixed inset-0 bg-gray-600 bg-opacity-50 hidden overflow-y-auto h-full w-full z-50" aria-modal="true" role="dialog" aria-labelledby="aiExtractionModalTitle">
    <div class="relative top-10 mx-auto p-5 border w-11/12 md:w-3/4 lg:w-2/3 xl:w-1/2 shadow-lg rounded-md bg-white">
      <div class="absolute top-0 right-0 pt-4 pr-4">
        <button type="button" id="closeAiExtractionModal" class="text-gray-400 hover:text-gray-500">
          <span class="sr-only">{{ _("common.close") }}</span>
          <i class="fa-solid fa-xmark h-6 w-6" aria-hidden="true"></i>
        </button>
      </div>
      <div class="mt-3">
        <h3 id="aiExtractionModalTitle" class="text-lg leading-6 font-medium text-gray-900 mb-1">
          <i class="fa-solid fa-flask mr-2 text-indigo-600" aria-hidden="true"></i>{{ _("status.ai_extraction_title") }}
        </h3>
        <p class="text-sm text-gray-500 mb-4">
          {{ _("status.ai_extraction_desc") }}
        </p>

        <!-- Input area -->
        <div id="aiExtractionInput">
          <label for="aiExtractionText" class="block text-sm font-medium text-gray-700 mb-1">{{ _("status.ai_extraction_label") }}</label>
          <textarea
            id="aiExtractionText"
            rows="10"
            class="w-full px-3 py-2 border border-gray-300 rounded-md shadow-sm text-sm font-mono focus:outline-none focus:ring-indigo-500 focus:border-indigo-500"
            placeholder="{{ _('status.ai_extraction_placeholder') }}"></textarea>
          <div class="mt-3 flex justify-end space-x-2">
            <button type="button" id="cancelAiExtractionBtn"
              class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              {{ _("common.cancel") }}
            </button>
            <button type="button" id="runAiExtractionBtn"
              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">
              <i class="fa-solid fa-play mr-2" aria-hidden="true"></i>{{ _("status.run_extraction") }}
            </button>
          </div>
        </div>

        <!-- Results area (hidden until extraction completes) -->
        <div id="aiExtractionResults" class="hidden mt-4 space-y-4">
          <!-- Provider / model badge -->
          <div id="aiExtractionMeta" class="text-xs text-gray-500"></div>

          <!-- Parse warning -->
          <div id="aiParseWarning" class="hidden bg-yellow-50 border-l-4 border-yellow-400 p-3 text-sm text-yellow-800"></div>

          <!-- Raw response -->
          <div>
            <h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.raw_llm_response") }}</h4>
            <pre id="aiRawResponse" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs overflow-auto max-h-48 whitespace-pre-wrap break-words"></pre>
          </div>

          <!-- Parsed JSON -->
          <div id="aiParsedJsonSection">
            <h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.parsed_json_label") }}</h4>
            <pre id="aiParsedJson" class="bg-gray-50 border border-gray-200 rounded p-3 text-xs overflow-auto max-h-64 whitespace-pre-wrap break-words"></pre>
          </div>

          <!-- Tags -->
          <div id="aiTagsSection">
            <h4 class="text-sm font-medium text-gray-900 mb-1">{{ _("status.extracted_tags") }}</h4>
            <div id="aiTags" class="flex flex-wrap gap-2"></div>
          </div>

          <div class="flex justify-end space-x-2 pt-2">
            <button type="button" id="aiExtractionBackBtn"
              class="px-4 py-2 border border-gray-300 text-sm font-medium rounded-md text-gray-700 bg-white hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500">
              <i class="fa-solid fa-arrow-left mr-1" aria-hidden="true"></i>{{ _("common.back") }}
            </button>
            <button type="button" id="aiExtractionCloseBtn"
              class="px-4 py-2 bg-indigo-600 text-white text-sm font-medium rounded-md shadow-sm hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-600">
              {{ _("common.close") }}
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
/* Translated strings for JavaScript use */
const i18nStrings = {
  providerConfigDetails: {{ _("status.provider_config_details") | tojson }},
  noDetails: {{ _("status.no_details") | tojson }},
  settingLabel: {{ _("status.setting_label") | tojson }},
  valueLabel: {{ _("status.value_label") | tojson }},
  testNotificationSent: {{ _("status.test_notification_sent") | tojson }},
  notificationConfigMissing: {{ _("status.notification_config_missing") | tojson }},
  testNotificationFailed: {{ _("status.test_notification_failed") | tojson }},
  errorTestingNotifications: {{ _("status.error_testing_notifications") | tojson }},
  testSuccessful: {{ _("status.test_successful") | tojson }},
  tokenValidFor: {{ _("status.token_valid_for") | tojson }},
  warning: {{ _("common.warning") | tojson }},
  authRequired: {{ _("status.auth_required") | tojson }},
  tokenExpired: {{ _("status.token_expired") | tojson }},
  testFailed: {{ _("status.test_failed") | tojson }},
  connectionError: {{ _("status.connection_error") | tojson }},
  connectionTestSuccessful: {{ _("status.connection_test_successful") | tojson }},
  connectionTestFailed: {{ _("status.connection_test_failed") | tojson }},
  errorTestingConnection: {{ _("status.error_testing_connection") | tojson }},
  sending: {{ _("status.sending") | tojson }},
  testing: {{ _("status.testing") | tojson }},
  jsonParseIssue: {{ _("status.json_parse_issue") | tojson }},
  aiExtractionFailed: {{ _("status.ai_extraction_failed") | tojson }},
  errorRunningExtraction: {{ _("status.error_running_extraction") | tojson }},
  running: {{ _("status.running") | tojson }},
  aiEmptyResponse: {{ _("status.ai_empty_response") | tojson }},
  asAccount: {{ _("status.as_account") | tojson }},
  configureNow: {{ _("status.configure_now") | tojson }},
};

document.addEventListener('DOMContentLoaded', function() {
  // Modal elements
  const resultModal = document.getElementById('resultModal');
  const modalTitle = document.getElementById('modalTitle');
  const modalMessage = document.getElementById('modalMessage');
  const modalIcon = document.getElementById('modalIcon');
  const modalClose = document.getElementById('modalClose');

  // Details Modal elements
  const detailsModal = document.getElementById('detailsModal');
  const detailsModalTitle = document.getElementById('detailsModalTitle');
  const detailsContent = document.getElementById('detailsContent');
  const closeDetailsModal = document.getElementById('closeDetailsModal');
  const closeDetailsBtn = document.getElementById('closeDetailsBtn');

  // Modal functions
  function showModal(status, title, message) {
    modalTitle.textContent = title;
    modalMessage.textContent = message;

    // Set the appropriate icon using Font Awesome
    if (status === 'success') {
      modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
    } else {
      modalIcon.innerHTML = '<i class="fa-solid fa-xmark text-red-600 fa-2x"></i>';
      modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-red-100 mb-4';
    }

    resultModal.classList.remove('hidden');
  }

  function hideModal() {
    resultModal.classList.add('hidden');
  }

  function showDetailsModal(providerName, details) {
    detailsModalTitle.textContent = i18nStrings.providerConfigDetails.replace('{name}', providerName);

    // Clear previous content
    detailsContent.innerHTML = '';

    // Create and populate the details list
    if (details && Object.keys(details).length > 0) {
      const table = document.createElement('table');
      table.className = 'min-w-full divide-y divide-gray-200';

      const thead = document.createElement('thead');
      thead.className = 'bg-gray-50';
      thead.innerHTML = `
        <tr>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${i18nStrings.settingLabel}</th>
          <th scope="col" class="px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider">${i18nStrings.valueLabel}</th>
        </tr>
      `;

      const tbody = document.createElement('tbody');
      tbody.className = 'bg-white divide-y divide-gray-200';

      let count = 0;
      for (const [key, value] of Object.entries(details)) {
        const row = document.createElement('tr');
        row.className = count % 2 === 0 ? 'bg-white' : 'bg-gray-50';

        const keyCell = document.createElement('td');
        keyCell.className = 'px-6 py-4 whitespace-nowrap text-sm font-medium text-gray-900';
        keyCell.textContent = key.charAt(0).toUpperCase() + key.slice(1).replace(/_/g, ' ');

        const valueCell = document.createElement('td');
        valueCell.className = 'px-6 py-4 whitespace-nowrap text-sm text-gray-500';

        // Check if value contains sensitive information that should be masked
        const sensitiveKeys = ['token', 'password', 'secret', 'key', 'credentials'];
        const isSensitive = sensitiveKeys.some(sKey => key.toLowerCase().includes(sKey));

        if (isSensitive && value !== 'Not set' && value !== '') {
          valueCell.textContent = value.slice(4) + '********' + value.slice(-4);
          // For better readability, we can also use HTML to mask the middle part of the string
          valueCell.innerHTML = value.slice(0, 4) + '<span class="text-gray-400">********</span>' + value.slice(-4);
        } else {
          valueCell.textContent = value;
        }

        row.appendChild(keyCell);
        row.appendChild(valueCell);
        tbody.appendChild(row);
        count++;
      }

      table.appendChild(thead);
      table.appendChild(tbody);
      detailsContent.appendChild(table);
    } else {
      detailsContent.innerHTML = `<p class="text-sm text-gray-500">${i18nStrings.noDetails}</p>`;
    }

    detailsModal.classList.remove('hidden');
  }

  function hideDetailsModal() {
    detailsModal.classList.add('hidden');
  }

  // Close modal when clicking the close button
  modalClose.addEventListener('click', hideModal);

  // Close modal when clicking outside of it
  resultModal.addEventListener('click', function(e) {
    if (e.target === resultModal) {
      hideModal();
    }
  });

  // Close details modal
  closeDetailsModal.addEventListener('click', hideDetailsModal);
  closeDetailsBtn.addEventListener('click', hideDetailsModal);

  // Close details modal when clicking outside
  detailsModal.addEventListener('click', function(e) {
    if (e.target === detailsModal) {
      hideDetailsModal();
    }
  });

  // View Details button handlers
  const detailsButtons = document.querySelectorAll('.view-details-btn');
  detailsButtons.forEach(button => {
    button.addEventListener('click', function() {
      const providerName = this.getAttribute('data-provider');
      let detailsData = {};

      try {
        detailsData = JSON.parse(this.getAttribute('data-details'));
      } catch (e) {
        console.error('Error parsing details data:', e);
      }

      showDetailsModal(providerName, detailsData);
    });
  });

  // Test notifications
  const testNotificationBtn = document.getElementById('testNotificationBtn');
  if (testNotificationBtn) {
    testNotificationBtn.addEventListener('click', function() {
      const originalText = this.innerHTML;

      this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.sending}`;
      this.disabled = true;

      fetch('/api/diagnostic/test-notification', {
        method: 'POST',
      })
        .then(response => response.json())
        .then(data => {
          if (data.status === 'success') {
            showModal('success', i18nStrings.testNotificationSent, data.message);
          } else if (data.status === 'warning') {
            showModal('error', i18nStrings.notificationConfigMissing, data.message);
          } else {
            showModal('error', i18nStrings.testNotificationFailed, data.message);
          }
        })
        .catch(error => {
          showModal('error', i18nStrings.connectionError, i18nStrings.errorTestingNotifications + error.message);
        })
        .finally(() => {
          // Always restore the button text and enable the button, regardless of success or failure
          this.innerHTML = originalText;
          this.disabled = false;
        });
    });
  }

  // Generic test button functionality
  const testGenericBtns = document.querySelectorAll('.test-generic-btn:not(#testNotificationBtn)');
  testGenericBtns.forEach(button => {
    button.addEventListener('click', function() {
      const originalText = this.innerHTML;
      const endpoint = this.getAttribute('data-endpoint');
      const method = this.getAttribute('data-method') || 'GET';

      this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.testing}`;
      this.disabled = true;

      fetch(endpoint, {
        method: method,
      })
        .then(response => response.json())
        .then(data => {
          if (data.status === 'success') {
            // If there's token info, we need to handle it specially
            if (data.token_info && data.token_info.expires_in_human) {
              let message = data.message || 'Connection successful';
              message += `<br><br><div class="bg-blue-50 p-3 rounded mt-2">
                <span class="font-medium">${i18nStrings.tokenValidFor}</span> ${data.token_info.expires_in_human}
                </div>`;

              modalTitle.textContent = i18nStrings.testSuccessful;
              modalMessage.innerHTML = message;
              modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
              modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
              resultModal.classList.remove('hidden');
            } else {
              // Regular success
              showModal('success', i18nStrings.testSuccessful, data.message + (data.account ? ' ' + i18nStrings.asAccount + ' ' + data.account : ''));
            }
          } else if (data.status === 'warning') {
            showModal('error', i18nStrings.warning, data.message);
          } else if (data.needs_reauth) {
            showModal('error', i18nStrings.authRequired, i18nStrings.tokenExpired);
          } else {
            showModal('error', i18nStrings.testFailed, data.message);
          }
        })
        .catch(error => {
          showModal('error', i18nStrings.connectionError, `Error: ${error.message}`);
        })
        .finally(() => {
          // Always restore the button state
          this.innerHTML = originalText;
          this.disabled = false;
        });
    });
  });

  // Test provider connections
  const testButtons = document.querySelectorAll('.test-provider-btn');
  testButtons.forEach(button => {
    button.addEventListener('click', function() {
      const provider = this.getAttribute('data-provider');
      const originalText = this.textContent;

      this.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i> ${i18nStrings.testing}`;
      this.disabled = true;

      let endpoint = '';
      if (provider === 'dropbox') {
        endpoint = '/api/dropbox/test-token';
      } else if (provider === 'onedrive') {
        endpoint = '/api/onedrive/test-token';
      } else if (provider === 'google_drive') {
        endpoint = '/api/google-drive/test-token';
      } else if (provider === 'ai_provider') {
        endpoint = '/api/ai/test';
      } else if (provider === 'azure') {
        endpoint = '/api/azure/test';
      }

      fetch(endpoint)
        .then(response => response.json())
        .then(data => {
          if (data.status === 'success') {
            // Create successful message
            let message = data.message || 'Connection successful';

            // Add token expiration info if available (especially for Google Drive)
            if (data.token_info && data.token_info.expires_in_human) {
              message += `<br><br><div class="bg-blue-50 p-3 rounded mt-2">
                <span class="font-medium">${i18nStrings.tokenValidFor}</span> ${data.token_info.expires_in_human}
                </div>`;

              // Show the message with HTML
              modalTitle.textContent = i18nStrings.connectionTestSuccessful;
              modalMessage.innerHTML = message;
              modalIcon.innerHTML = '<i class="fa-solid fa-check text-green-600 fa-2x"></i>';
              modalIcon.className = 'mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 mb-4';
              resultModal.classList.remove('hidden');
            } else {
              // Use the regular modal without HTML
              showModal('success', i18nStrings.connectionTestSuccessful, `${data.message} ${data.account ? i18nStrings.asAccount + ' ' + data.account : ''}`);
            }
          } else {
            if (data.needs_reauth) {
              showModal('error', i18nStrings.authRequired, i18nStrings.tokenExpired);
              // Add option to go to config page
              modalClose.textContent = i18nStrings.configureNow;
              modalClose.addEventListener('click', function redirectToConfig() {
                window.location.href = `/${provider.replace('_', '-')}-setup`;
                modalClose.removeEventListener('click', redirectToConfig);
              }, { once: true });
            } else {
              showModal('error', i18nStrings.connectionTestFailed, data.message);
            }
          }
        })
        .catch(error => {
          showModal('error', i18nStrings.connectionError, i18nStrings.errorTestingConnection + error.message);
        })
        .finally(() => {
          this.textContent = originalText;
          this.disabled = false;
        });
    });
  });

  // ── AI Extraction Test Modal ──────────────────────────────────────────────

  const aiExtractionModal    = document.getElementById('aiExtractionModal');
  const aiExtractionText     = document.getElementById('aiExtractionText');
  const aiExtractionInput    = document.getElementById('aiExtractionInput');
  const aiExtractionResults  = document.getElementById('aiExtractionResults');
  const aiExtractionMeta     = document.getElementById('aiExtractionMeta');
  const aiRawResponse        = document.getElementById('aiRawResponse');
  const aiParsedJson         = document.getElementById('aiParsedJson');
  const aiParsedJsonSection  = document.getElementById('aiParsedJsonSection');
  const aiTags               = document.getElementById('aiTags');
  const aiTagsSection        = document.getElementById('aiTagsSection');
  const aiParseWarning       = document.getElementById('aiParseWarning');
  const testAiExtractionBtn  = document.getElementById('testAiExtractionBtn');
  const runAiExtractionBtn   = document.getElementById('runAiExtractionBtn');
  const cancelAiExtractionBtn= document.getElementById('cancelAiExtractionBtn');
  const aiExtractionBackBtn  = document.getElementById('aiExtractionBackBtn');
  const aiExtractionCloseBtn = document.getElementById('aiExtractionCloseBtn');
  const closeAiExtractionModal = document.getElementById('closeAiExtractionModal');

  function openAiExtractionModal() {
    // Reset to input view
    aiExtractionText.value = '';
    aiExtractionInput.classList.remove('hidden');
    aiExtractionResults.classList.add('hidden');
    aiExtractionModal.classList.remove('hidden');
  }

  function closeAiExtractionModalFn() {
    aiExtractionModal.classList.add('hidden');
  }

  function showAiExtractionResults(data) {
    // Provider / model meta
    aiExtractionMeta.textContent = `Provider: ${data.provider || '—'}  |  Model: ${data.model || '—'}`;

    // Raw response
    aiRawResponse.textContent = data.raw_response || i18nStrings.aiEmptyResponse;

    // Parse warning
    if (data.parse_error) {
      aiParseWarning.textContent = i18nStrings.jsonParseIssue + data.parse_error;
      aiParseWarning.classList.remove('hidden');
    } else {
      aiParseWarning.classList.add('hidden');
    }

    // Parsed JSON
    if (data.parsed_json) {
      aiParsedJson.textContent = JSON.stringify(data.parsed_json, null, 2);
      aiParsedJsonSection.classList.remove('hidden');
    } else {
      aiParsedJsonSection.classList.add('hidden');
    }

    // Tags
    aiTags.innerHTML = '';
    const tags = Array.isArray(data.tags) ? data.tags : [];
    if (tags.length > 0) {
      tags.forEach(tag => {
        const span = document.createElement('span');
        span.className = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-indigo-100 text-indigo-800';
        span.textContent = tag;
        aiTags.appendChild(span);
      });
      aiTagsSection.classList.remove('hidden');
    } else {
      aiTagsSection.classList.add('hidden');
    }

    // Switch view
    aiExtractionInput.classList.add('hidden');
    aiExtractionResults.classList.remove('hidden');
  }

  if (testAiExtractionBtn) {
    testAiExtractionBtn.addEventListener('click', openAiExtractionModal);
  }

  if (closeAiExtractionModal) {
    closeAiExtractionModal.addEventListener('click', closeAiExtractionModalFn);
  }

  if (cancelAiExtractionBtn) {
    cancelAiExtractionBtn.addEventListener('click', closeAiExtractionModalFn);
  }

  if (aiExtractionCloseBtn) {
    aiExtractionCloseBtn.addEventListener('click', closeAiExtractionModalFn);
  }

  if (aiExtractionBackBtn) {
    aiExtractionBackBtn.addEventListener('click', function() {
      aiExtractionResults.classList.add('hidden');
      aiExtractionInput.classList.remove('hidden');
    });
  }

  // Close when clicking the backdrop
  if (aiExtractionModal) {
    aiExtractionModal.addEventListener('click', function(e) {
      if (e.target === aiExtractionModal) {
        closeAiExtractionModalFn();
      }
    });
  }

  if (runAiExtractionBtn) {
    runAiExtractionBtn.addEventListener('click', function() {
      const text = aiExtractionText.value.trim();
      if (!text) {
        aiExtractionText.focus();
        return;
      }

      const originalHTML = runAiExtractionBtn.innerHTML;
      runAiExtractionBtn.innerHTML = `<i class="fa-solid fa-spinner fa-spin mr-2"></i>${i18nStrings.running}`;
      runAiExtractionBtn.disabled = true;
      cancelAiExtractionBtn.disabled = true;

      fetch('/api/ai/test-extraction', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ text: text }),
      })
        .then(response => response.json())
        .then(data => {
          if (data.status === 'success') {
            showAiExtractionResults(data);
          } else {
            closeAiExtractionModalFn();
            showModal('error', i18nStrings.aiExtractionFailed, data.message || 'Unknown error');
          }
        })
        .catch(error => {
          closeAiExtractionModalFn();
          showModal('error', i18nStrings.connectionError, i18nStrings.errorRunningExtraction + error.message);
        })
        .finally(() => {
          runAiExtractionBtn.innerHTML = originalHTML;
          runAiExtractionBtn.disabled = false;
          cancelAiExtractionBtn.disabled = false;
        });
    });
  }
});
</script>
{% endblock %}