{% extends "base.html" %}
{% block title %}Redax-WP — Einstellungen{% endblock %}
{% block content %}
<div class="max-w-2xl mx-auto px-6 py-6 space-y-6">
  <h1 class="text-xl font-bold text-white">⚙️ Einstellungen</h1>

  <div class="card p-6">
    <h2 class="text-white font-semibold mb-1">🔌 WordPress-Verbindung</h2>
    <p class="text-xs text-slate-500 mb-4">Konfigurierbar via <code class="bg-slate-700 px-1 rounded">.env</code> — Neustart nach Änderung erforderlich.</p>
    <div class="space-y-2 text-sm">
      <div class="flex items-center gap-3">
        <span class="text-slate-500 w-28">WP_URL</span>
        <span class="text-slate-300 font-mono">{{ wp_url }}</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="text-slate-500 w-28">WP_USERNAME</span>
        <span class="text-slate-300 font-mono">{{ wp_username }}</span>
      </div>
      <div class="flex items-center gap-3">
        <span class="text-slate-500 w-28">WP_APP_PASSWORD</span>
        <span class="text-slate-400">●●●●●●●● (in .env)</span>
      </div>
    </div>
    <div class="mt-4">
      <button onclick="testWpConnection()" class="btn btn-ghost text-sm">🔍 Verbindung testen</button>
      <span id="wp-test-result" class="text-sm ml-3 hidden"></span>
    </div>
  </div>

  <div class="card p-6">
    <h2 class="text-white font-semibold mb-1">⏰ Zeitzone</h2>
    <p class="text-sm text-slate-400">Aktuell: <span class="text-white font-mono">{{ timezone }}</span></p>
    <p class="text-xs text-slate-600 mt-1">Änderbar via <code class="bg-slate-700 px-1 rounded">TIMEZONE</code> in .env</p>
  </div>

  <div class="card p-6">
    <h2 class="text-white font-semibold mb-3">📋 .env Variablen</h2>
    <div class="bg-slate-900 rounded-lg p-4 text-xs font-mono text-slate-400 space-y-1">
      <div>DASHBOARD_USER / DASHBOARD_PASSWORD</div>
      <div>WP_URL / WP_USERNAME / WP_APP_PASSWORD</div>
      <div>OPENROUTER_API_KEY</div>
      <div>TELEGRAM_BOT_TOKEN / TELEGRAM_CHANNEL_ID</div>
      <div>TELEGRAM_REVIEWER_IDS</div>
      <div>TIMEZONE</div>
      <div>MYSQL_ROOT_PASSWORD / MYSQL_DATABASE / MYSQL_USER / MYSQL_PASSWORD</div>
    </div>
    <p class="text-xs text-slate-600 mt-3">Vorlage: <code class="bg-slate-700 px-1 rounded">.env.example</code> im Repo-Root</p>
  </div>
</div>
{% endblock %}
{% block extra_js %}
async function testWpConnection() {
  const r = await fetch('/api/wp/categories');
  const el = document.getElementById('wp-test-result');
  el.classList.remove('hidden');
  if (r.ok) {
    const d = await r.json();
    el.className = 'text-sm ml-3 text-green-400';
    el.textContent = `✅ Verbunden — ${Array.isArray(d) ? d.length : 0} Kategorien gefunden`;
  } else {
    el.className = 'text-sm ml-3 text-red-400';
    el.textContent = '❌ WordPress nicht erreichbar';
  }
}
{% endblock %}