{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Einstellungen{% else %}Settings{% endif %}
{% endblock %}{% block wrapper_class %}wrapper-settings-mode{% endblock %}

{% block header_meta %}{% endblock %}

{% block content %}
<style>
  #custom-color-container {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-bottom: 0;
    transition: opacity 0.25s ease, max-height 0.25s ease, margin-bottom 0.25s ease;
    display: grid;
    grid-template-columns: 80px 1fr;
    gap: 16px;
    align-items: flex-end;
  }
  #custom-color-container.show {
    opacity: 1;
    max-height: 120px;
    margin-bottom: 16px;
  }
  .logo-gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 16px;
    margin-top: 10px;
  }
  .logo-gallery-item {
    position: relative;
    border: 2px solid var(--card-border);
    border-radius: 8px;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100px;
    background-color: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease-in-out;
  }
  .logo-gallery-item:hover {
    border-color: var(--accent-color) !important;
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow);
  }
  .logo-gallery-item.active {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 12px var(--accent-glow);
  }
  .logo-gallery-item.upload-box {
    border-style: dashed;
    border-width: 2px;
    color: var(--text-muted);
  }
  .logo-gallery-item.upload-box:hover {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
  }
  .logo-gallery-item img {
    max-width: calc(100% - 24px);
    max-height: 70px;
    object-fit: contain;
    pointer-events: none;
  }
  .logo-gallery-item .active-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--accent-color);
    color: white;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: bold;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
    z-index: 2;
  }
  .logo-gallery-item .gallery-btn-delete {
    position: absolute;
    bottom: 6px;
    right: 6px;
    background: rgba(239, 68, 68, 0.9);
    border: none;
    border-radius: 4px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease-in-out;
    padding: 0;
    z-index: 3;
    opacity: 0;
  }
  .logo-gallery-item:hover .gallery-btn-delete {
    opacity: 1;
  }
  .logo-gallery-item .gallery-btn-delete:hover {
    background: rgb(239, 68, 68);
    transform: scale(1.05);
  }
  .logo-gallery-item .gallery-btn-delete svg {
    width: 13px;
    height: 13px;
  }
</style>
<div class="card settings-card">
  <h2 style="font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin: 0 0 12px 0;">
    {% if current_lang == 'de' %}Einstellungen{% else %}Settings{% endif %}
  </h2>

  {% if success %}
    <div class="flash-message flash-success">
      <span>
        {% if current_lang == 'de' %}
          Einstellungen erfolgreich gespeichert!
        {% else %}
          Settings saved successfully!
        {% endif %}
      </span>
    </div>
  {% endif %}

  {% if error_msg %}
    <div class="flash-message flash-danger">
      <span>{{ error_msg }}</span>
    </div>
  {% endif %}

  <form id="settings-form" action="/settings" method="POST" class="editor-form" enctype="multipart/form-data">
    <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
    <!-- LDAP Authentication Configuration -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}User-Authentifizierung{% else %}User Authentication{% endif %}
      </h3>
      <div class="settings-section-desc">
        {% if current_lang == 'de' %}
          Ist LDAP aktiv, ersetzt es die lokale Passwortprüfung vollständig. Wer sich einloggen darf und welche Rolle (editor/admin) er bekommt, wird weiterhin lokal über die "Rollen"-Seite verwaltet. Beim Ein- oder Ausschalten werden alle angemeldeten Nutzer (inkl. dir) automatisch ausgeloggt.
        {% else %}
          When LDAP is active, it fully replaces local password checking. Who may log in and which role (editor/admin) they get is still managed locally via the "Roles" page. Turning it on or off automatically logs out all currently logged-in users (including you).
        {% endif %}
      </div>
      <div class="form-row" style="display: flex; align-items: center; gap: 8px; margin-bottom: 16px;">
        <input type="checkbox" id="settings-ldap-enabled" name="ldap_enabled" {% if ldap_enabled %}checked{% endif %} style="width: 16px; height: 16px; cursor: pointer;" onchange="toggleLdapFields()">
        <label for="settings-ldap-enabled" style="font-weight: 550; cursor: pointer; user-select: none; margin: 0;">
          {% if current_lang == 'de' %}LDAP-Login aktivieren{% else %}Enable LDAP login{% endif %}
        </label>
      </div>

      <!-- Editor Password -->
      <div id="admin-password-container" class="form-group" style="margin-bottom: 0; {% if ldap_enabled %}display: none;{% endif %}">
        <label class="form-label" for="settings-password">
          {% if current_lang == 'de' %}Neues Admin Passwd{% else %}New Admin Passwd{% endif %}
        </label>
        <input type="password" id="settings-password" name="password" class="form-input" placeholder="{% if current_lang == 'de' %}Unverändert lassen, um nicht zu ändern{% else %}Leave blank to keep current password{% endif %}">
      </div>

      <div id="ldap-fields-container" style="{% if not ldap_enabled %}display: none;{% endif %}">
        <div class="form-row" style="display: grid; grid-template-columns: 2fr 1fr; gap: 16px; margin-bottom: 16px;">
          <div class="form-group">
            <label class="form-label" for="settings-ldap-host">
              {% if current_lang == 'de' %}LDAP-Server{% else %}LDAP Host{% endif %}
            </label>
            <input type="text" id="settings-ldap-host" name="ldap_host" class="form-input" placeholder="ldap.example.org" value="{{ ldap_host }}">
          </div>
          <div class="form-group">
            <label class="form-label" for="settings-ldap-port">
              {% if current_lang == 'de' %}Port{% else %}Port{% endif %}
            </label>
            <input type="text" id="settings-ldap-port" name="ldap_port" class="form-input" placeholder="389" value="{{ ldap_port }}">
          </div>
        </div>

        <div class="form-group" style="margin-bottom: 16px;">
          <label class="form-label" for="settings-ldap-user-dn-template">
            {% if current_lang == 'de' %}Nutzer-DN-Vorlage{% else %}User DN Template{% endif %}
          </label>
          <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 8px;">
            {% if current_lang == 'de' %}
              <code>%s</code> wird durch den eingegebenen Benutzernamen ersetzt, z.B. <code>uid=%s,ou=people,dc=example,dc=org</code>.
            {% else %}
              <code>%s</code> is replaced with the entered username, e.g. <code>uid=%s,ou=people,dc=example,dc=org</code>.
            {% endif %}
          </div>
          <input type="text" id="settings-ldap-user-dn-template" name="ldap_user_dn_template" class="form-input" style="font-family: 'Courier New', Courier, monospace;" placeholder="uid=%s,ou=people,dc=example,dc=org" value="{{ ldap_user_dn_template }}">
        </div>

        <div class="form-row" style="display: flex; align-items: center; gap: 24px;">
          <div style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="settings-ldap-use-ssl" name="ldap_use_ssl" {% if ldap_use_ssl %}checked{% endif %} style="width: 16px; height: 16px; cursor: pointer;">
            <label for="settings-ldap-use-ssl" style="font-weight: 550; cursor: pointer; user-select: none; margin: 0;">
              {% if current_lang == 'de' %}LDAPS (implizites TLS){% else %}LDAPS (implicit TLS){% endif %}
            </label>
          </div>
          <div style="display: flex; align-items: center; gap: 8px;">
            <input type="checkbox" id="settings-ldap-start-tls" name="ldap_start_tls" {% if ldap_start_tls %}checked{% endif %} style="width: 16px; height: 16px; cursor: pointer;">
            <label for="settings-ldap-start-tls" style="font-weight: 550; cursor: pointer; user-select: none; margin: 0;">
              {% if current_lang == 'de' %}StartTLS versuchen (nur falls Server unterstützt){% else %}Attempt StartTLS (only if server supports it){% endif %}
            </label>
          </div>
        </div>

        <div style="border-top: 1px solid var(--bg-tertiary); margin: 20px 0 0 0; padding-top: 16px;">
          <div style="font-weight: 600; margin-bottom: 4px;">
            {% if current_lang == 'de' %}Nutzersuche für die Rollenvergabe{% else %}User Search for Role Assignment{% endif %}
          </div>
          <div style="font-size: 0.8rem; color: var(--text-muted); margin-bottom: 12px;">
            {% if current_lang == 'de' %}
              Auf der "Rollen"-Seite lässt sich einem Benutzer nur über diese Suche eine Rolle zuweisen — ohne sie müsste der exakte LDAP-Benutzername blind erraten werden. Erfordert einen separaten Lese-Account, da nicht mit dem Passwort des einloggenden Admins gesucht werden kann.
            {% else %}
              On the "Roles" page, assigning a user a role only works through this search — without it, the exact LDAP username would have to be guessed blind. Requires a separate reader account, since the admin's own login password isn't available for searching.
            {% endif %}
          </div>

          <div class="form-group" style="margin-bottom: 16px;">
            <label class="form-label" for="settings-ldap-search-bind-dn">
              {% if current_lang == 'de' %}Bind-DN des Lese-Accounts{% else %}Reader Account Bind DN{% endif %}
            </label>
            <input type="text" id="settings-ldap-search-bind-dn" name="ldap_search_bind_dn" class="form-input" style="font-family: 'Courier New', Courier, monospace;" placeholder="cn=reader,dc=example,dc=org" value="{{ ldap_search_bind_dn }}">
          </div>

          <div class="form-group" style="margin-bottom: 16px;">
            <label class="form-label" for="settings-ldap-search-bind-password">
              {% if current_lang == 'de' %}Passwort des Lese-Accounts{% else %}Reader Account Password{% endif %}
            </label>
            <input type="password" id="settings-ldap-search-bind-password" name="ldap_search_bind_password" class="form-input" placeholder="••••••••" value="{{ ldap_search_bind_password }}">
          </div>

          <div class="form-group" style="margin-bottom: 0;">
            <label class="form-label" for="settings-ldap-search-base-dn">
              {% if current_lang == 'de' %}Such-Basis-DN{% else %}Search Base DN{% endif %}
            </label>
            <input type="text" id="settings-ldap-search-base-dn" name="ldap_search_base_dn" class="form-input" style="font-family: 'Courier New', Courier, monospace;" placeholder="ou=people,dc=example,dc=org" value="{{ ldap_search_base_dn }}">
          </div>
        </div>
      </div>
    </div>

    <!-- Allowed IP Rules -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}Zugriff auf interne Seiten verwalten{% else %}Manage Access to Internal Pages{% endif %}
      </h3>
      <div class="settings-section-desc" style="margin-bottom: 12px;">
        {% if current_lang == 'de' %}
          Erlaubt sind einzelne IP-Adressen (z.B. <code>127.0.0.1</code>) oder CIDR-Netzwerkbereiche (z.B. <code>192.168.1.0/24</code>).
        {% else %}
          You can specify individual IP addresses (e.g. <code>127.0.0.1</code>) or CIDR blocks (e.g. <code>192.168.1.0/24</code>).
        {% endif %}
      </div>
      <div class="form-group" style="margin-bottom: 0;">
        <textarea id="settings-ips" name="allowed_ips" class="form-textarea" style="font-family: 'Courier New', Courier, monospace; min-height: 150px; font-size: 0.95rem;" placeholder="127.0.0.1&#10;::1&#10;192.168.1.0/24">{{ allowed_ips }}</textarea>
      </div>
    </div>


    <!-- Top Header Links Manager -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}Links in der Kopfzeile verwalten{% else %}Manage Top Header Links{% endif %}
      </h3>
      <div class="settings-section-desc" style="margin-bottom: 12px;">
        {% if current_lang == 'de' %}
          Geben Sie die Links Zeile für Zeile im Format <strong style="color: var(--accent-color); font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; padding: 0 6px;">Bezeichnung | URL</strong> an. Verwenden Sie <strong style="color: var(--accent-color); font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; padding: 0 6px;">---</strong> für eine Trennlinie.
        {% else %}
          Specify links line by line in the format <strong style="color: var(--accent-color); font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; padding: 0 6px;">Label | URL</strong>. Use <strong style="color: var(--accent-color); font-family: 'Courier New', Courier, monospace; font-size: 0.95rem; padding: 0 6px;">---</strong> for a visual divider line.
        {% endif %}
      </div>
      
      <!-- Input format guide box -->
      <div style="font-size: 0.8rem; background-color: var(--bg-secondary); border: 1px solid var(--card-border); padding: 10px 14px; border-radius: 8px; margin-bottom: 12px; font-family: 'Courier New', Courier, monospace; line-height: 1.4;">
        <span style="font-weight: 700; color: var(--text-primary); display: block; margin-bottom: 4px;">
          {% if current_lang == 'de' %}Eingabe-Beispiel:{% else %}Example Format:{% endif %}
        </span>
        <span style="color: var(--text-muted);">Example | https://example.org</span><br>
        <span style="color: var(--accent-color); font-weight: bold;">---</span><br>
        <span style="color: var(--text-muted);">Wiki Home | /</span>
      </div>

      <div class="form-group">
        <textarea id="settings-header-links" name="header_links" class="form-textarea" style="font-family: 'Courier New', Courier, monospace; min-height: 150px; font-size: 0.95rem;" placeholder="Home | /&#10;---&#10;Example | https://example.org">{{ header_links_str }}</textarea>
      </div>
    </div>

    <!-- Design & Branding Configuration -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}Design & Branding{% else %}Design & Branding{% endif %}
      </h3>
      <div class="settings-section-desc">
        {% if current_lang == 'de' %}
          Passen Sie Name, Farbschema (Theme) und Logo des Wikis an. Sie können ein eigenes Logo hochladen oder ein Standard-Logo wählen.
        {% else %}
          Customize the name, color scheme (theme) and logo of the wiki. You can upload a custom logo or choose a default logo.
        {% endif %}
      </div>

      <div class="form-row" style="display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px;">
        <div class="form-group">
          <label class="form-label" for="settings-site-name">
            {% if current_lang == 'de' %}Name des Wikis{% else %}Wiki Name{% endif %}
          </label>
          <input type="text" id="settings-site-name" name="site_name" class="form-input" placeholder="Wiki" value="{{ site_name }}">
          <div class="settings-section-desc" style="margin-top: 6px;">
            {% if current_lang == 'de' %}Erscheint im Browser-Titel und in der Fußzeile.{% else %}Shown in the browser title and in the footer.{% endif %}
          </div>
        </div>
      </div>

      <div class="form-row" style="display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px;">
        <div class="form-group">
          <label class="form-label" for="settings-theme">
            {% if current_lang == 'de' %}Farbschema (Theme){% else %}Color Scheme (Theme){% endif %}
          </label>
          <select id="settings-theme" name="theme" class="form-input" style="height: 45px; cursor: pointer;" onchange="toggleCustomColorField()">
            <option value="default-green" {% if theme == 'default-green' %}selected{% endif %}>{% if current_lang == 'de' %}Grün (Standard){% else %}Green (default){% endif %}</option>
            <option value="classic-blue" {% if theme == 'classic-blue' %}selected{% endif %}>{% if current_lang == 'de' %}Klassisches Blau{% else %}Classic Blue{% endif %}</option>
            <option value="custom" {% if theme == 'custom' %}selected{% endif %}>{% if current_lang == 'de' %}Eigene Farbe (Hex-Code){% else %}Custom Color (Hex Code){% endif %}</option>
          </select>
        </div>
      </div>

      <!-- Custom Color Picker / Hex Input -->
      <div id="custom-color-container" class="{% if theme == 'custom' %}show{% endif %}">
        <div class="form-group">
          <label class="form-label" for="settings-color-picker">Picker</label>
          <input type="color" id="settings-color-picker" class="form-input" style="padding: 4px; height: 45px; cursor: pointer;" value="{{ custom_color }}" oninput="syncColorPickerToText(this.value)">
        </div>
        <div class="form-group">
          <label class="form-label" for="settings-custom-color">Hex Code</label>
          <input type="text" id="settings-custom-color" name="custom_color" class="form-input" placeholder="#6366f1" value="{{ custom_color }}" oninput="syncTextColorToPicker(this.value)">
        </div>
      </div>

      <!-- Logo Gallery Configuration -->
      <div class="form-group" style="margin-bottom: 0;">
        <label class="form-label" style="margin-bottom: 8px; display: block;">
          {% if current_lang == 'de' %}Logo-Auswahl (Galerie - Klicken zum Auswählen){% else %}Logo Selection (Gallery - Click to select){% endif %}
        </label>
        <input type="hidden" id="selected-logo-input" name="logo_select" value="{{ logo_url }}">
        <div class="logo-gallery-grid" id="logo-gallery-grid">
          {% for logo in logos %}
            <div class="logo-gallery-item {% if logo == logo_url %}active{% endif %}" onclick="selectGalleryLogo('{{ logo }}', this)">
              <img src="{{ logo }}" alt="Logo Option">
              <div class="active-badge" style="display: {% if logo == logo_url %}flex{% else %}none{% endif %};">✓</div>
              {% if logo != '/static/logo.png' and logo != '/static/favicon.png' %}
                <button type="button" class="gallery-btn-delete" onclick="event.stopPropagation(); deleteGalleryLogo('{{ logo }}')" title="{% if current_lang == 'de' %}Logo löschen{% else %}Delete logo{% endif %}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                </button>
              {% endif %}
            </div>
          {% endfor %}

          <!-- Upload Box as a Gallery Item -->
          <div class="logo-gallery-item upload-box" onclick="document.getElementById('settings-logo-upload').click()" title="{% if current_lang == 'de' %}Neues Logo hochladen{% else %}Upload new logo{% endif %}">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.75rem; text-align: center; gap: 6px;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 22px; height: 22px;">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
              <span style="font-weight: 600; font-size: 0.7rem;">PNG, JPG, SVG</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Hidden Input for File Dialog -->
      <input type="file" id="settings-logo-upload" name="logo_upload" accept=".png,.jpg,.jpeg,.svg" style="display: none;" onchange="autoSubmitOnUpload(this)">

      <!-- Favicon Gallery Configuration -->
      <div class="form-group" style="margin-bottom: 0; margin-top: 20px; padding-top: 20px; border-top: 1px solid var(--card-border);">
        <label class="form-label" style="margin-bottom: 8px; display: block;">
          {% if current_lang == 'de' %}Favicon-Auswahl (Galerie - Klicken zum Auswählen){% else %}Favicon Selection (Gallery - Click to select){% endif %}
        </label>
        <div class="settings-section-desc" style="margin-bottom: 8px;">
          {% if current_lang == 'de' %}
            Das Favicon wird unabhängig vom Logo über dem Menü verwendet (z.B. als Browser-Tab-Symbol).
          {% else %}
            The favicon is used independently of the logo above the menu (e.g. as the browser tab icon).
          {% endif %}
        </div>
        <input type="hidden" id="selected-favicon-input" name="favicon_select" value="{{ favicon_url }}">
        <div class="logo-gallery-grid" id="favicon-gallery-grid">
          {% for logo in logos %}
            <div class="logo-gallery-item {% if logo == favicon_url %}active{% endif %}" onclick="selectGalleryFavicon('{{ logo }}', this)">
              <img src="{{ logo }}" alt="Favicon Option">
              <div class="active-badge" style="display: {% if logo == favicon_url %}flex{% else %}none{% endif %};">✓</div>
              {% if logo != '/static/logo.png' and logo != '/static/favicon.png' %}
                <button type="button" class="gallery-btn-delete" onclick="event.stopPropagation(); deleteGalleryLogo('{{ logo }}')" title="{% if current_lang == 'de' %}Bild löschen{% else %}Delete image{% endif %}">
                  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                  </svg>
                </button>
              {% endif %}
            </div>
          {% endfor %}

          <!-- Upload Box as a Gallery Item -->
          <div class="logo-gallery-item upload-box" onclick="document.getElementById('settings-favicon-upload').click()" title="{% if current_lang == 'de' %}Neues Favicon hochladen{% else %}Upload new favicon{% endif %}">
            <div style="display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 0.75rem; text-align: center; gap: 6px;">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" style="width: 22px; height: 22px;">
                <line x1="12" y1="5" x2="12" y2="19"></line>
                <line x1="5" y1="12" x2="19" y2="12"></line>
              </svg>
              <span style="font-weight: 600; font-size: 0.7rem;">PNG, JPG, SVG</span>
            </div>
          </div>
        </div>
      </div>

      <!-- Hidden Input for Favicon File Dialog -->
      <input type="file" id="settings-favicon-upload" name="favicon_upload" accept=".png,.jpg,.jpeg,.svg" style="display: none;" onchange="autoSubmitOnUpload(this)">
    </div>

    <!-- Server Ports Configuration -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        {% if current_lang == 'de' %}Netzwerk Ports (HTTP / HTTPS){% else %}Network Ports (HTTP / HTTPS){% endif %}
      </h3>
      <div class="settings-section-desc">
        {% if current_lang == 'de' %}
          Konfigurieren Sie die Ports für den Webserver. Wenn Sie die Felder leer lassen, werden standardmäßig Port 80 für HTTP und Port 443 für HTTPS verwendet.
        {% else %}
          Configure the ports for the web server. Leaving these fields empty defaults to port 80 for HTTP and port 443 for HTTPS.
        {% endif %}
      </div>
      <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px;">
        <div class="form-group">
          <label class="form-label" for="settings-http-port">HTTP Port</label>
          <input type="text" id="settings-http-port" name="http_port" class="form-input" value="{{ http_port }}" placeholder="Standard: 80">
        </div>
        <div class="form-group">
          <label class="form-label" for="settings-https-port">HTTPS Port</label>
          <input type="text" id="settings-https-port" name="https_port" class="form-input" value="{{ https_port }}" placeholder="Standard: 443">
        </div>
      </div>
    </div>

    <!-- SSL/TLS Certificate for HTTPS -->
    <div class="settings-section">
      <h3 class="settings-section-title">
        HTTPS / SSL / TLS
      </h3>
      <div class="settings-section-desc">
        {% if current_lang == 'de' %}
          Tragen Sie hier die absoluten Dateipfade auf dem Server ein (z.B. von Certbot / Let's Encrypt für eine automatische Verlängerung).
        {% else %}
          Enter the absolute file paths on the server here (e.g. from Certbot / Let's Encrypt for automatic renewal).
        {% endif %}
      </div>

      <div class="form-row" style="display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px;">
        <div class="form-group">
          <label class="form-label" for="settings-tls-cert-path">
            {% if current_lang == 'de' %}Zertifikatspfad (z.B. fullchain.pem){% else %}Certificate Path (e.g. fullchain.pem){% endif %}
          </label>
          <input type="text" id="settings-tls-cert-path" name="tls_cert_path" class="form-input" placeholder="/etc/letsencrypt/live/yourdomain/fullchain.pem" value="{{ tls_cert_path }}">
        </div>
        <div class="form-group">
          <label class="form-label" for="settings-tls-key-path">
            {% if current_lang == 'de' %}Schlüsselpfad (z.B. privkey.pem){% else %}Private Key Path (e.g. privkey.pem){% endif %}
          </label>
          <input type="text" id="settings-tls-key-path" name="tls_key_path" class="form-input" placeholder="/etc/letsencrypt/live/yourdomain/privkey.pem" value="{{ tls_key_path }}">
        </div>
      </div>

      <div class="form-row" style="display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 16px;">
        <div class="form-group">
          <label class="form-label" for="settings-tls-key-passphrase">
            {% if current_lang == 'de' %}Schlüssel-Passphrase (optional, falls verschlüsselt){% else %}Key Passphrase (optional, if encrypted){% endif %}
          </label>
          <input type="password" id="settings-tls-key-passphrase" name="tls_key_passphrase" class="form-input" placeholder="••••••••" value="{{ tls_key_passphrase }}">
        </div>
      </div>

      <div class="form-row" style="display: flex; align-items: center; gap: 8px;">
        <input type="checkbox" id="settings-redirect-http" name="redirect_http" {% if redirect_http %}checked{% endif %} style="width: 16px; height: 16px; cursor: pointer;">
        <label for="settings-redirect-http" style="font-weight: 550; cursor: pointer; user-select: none; margin: 0;">
          {% if current_lang == 'de' %}HTTP-Anfragen automatisch zu HTTPS umleiten{% else %}Automatically redirect HTTP requests to HTTPS{% endif %}
        </label>
      </div>
    </div>

    <!-- Submit buttons -->
    <div style="display: flex; justify-content: flex-end; gap: 12px; border-top: 1px solid var(--card-border); padding-top: 12px;">
      <a href="/" class="btn btn-secondary">
        {% if current_lang == 'de' %}Zurück zum Wiki{% else %}Back to Wiki{% endif %}
      </a>
      <button type="submit" class="btn btn-primary">
        {% if current_lang == 'de' %}Einstellungen speichern{% else %}Save Settings{% endif %}
      </button>
    </div>
  </form>
</div>

<script>
  function toggleCustomColorField() {
    const themeSelect = document.getElementById('settings-theme');
    const container = document.getElementById('custom-color-container');
    if (themeSelect.value === 'custom') {
      container.classList.add('show');
    } else {
      container.classList.remove('show');
    }
  }

  function toggleLdapFields() {
    const checkbox = document.getElementById('settings-ldap-enabled');
    const container = document.getElementById('ldap-fields-container');
    const passwordContainer = document.getElementById('admin-password-container');
    if (checkbox.checked) {
      container.style.display = '';
      passwordContainer.style.display = 'none';
    } else {
      container.style.display = 'none';
      passwordContainer.style.display = '';
    }
  }

  function syncColorPickerToText(val) {
    document.getElementById('settings-custom-color').value = val;
  }

  function syncTextColorToPicker(val) {
    if (val.startsWith('#') && (val.length === 4 || val.length === 7)) {
      document.getElementById('settings-color-picker').value = val;
    }
  }

  function selectGalleryLogo(logoPath, element) {
    document.getElementById('selected-logo-input').value = logoPath;

    document.getElementById('logo-gallery-grid').querySelectorAll('.logo-gallery-item').forEach(item => {
      item.classList.remove('active');
      const badge = item.querySelector('.active-badge');
      if (badge) badge.style.display = 'none';
    });

    element.classList.add('active');
    const badge = element.querySelector('.active-badge');
    if (badge) badge.style.display = 'flex';
  }

  function selectGalleryFavicon(faviconPath, element) {
    document.getElementById('selected-favicon-input').value = faviconPath;

    document.getElementById('favicon-gallery-grid').querySelectorAll('.logo-gallery-item').forEach(item => {
      item.classList.remove('active');
      const badge = item.querySelector('.active-badge');
      if (badge) badge.style.display = 'none';
    });

    element.classList.add('active');
    const badge = element.querySelector('.active-badge');
    if (badge) badge.style.display = 'flex';
  }

  function deleteGalleryLogo(logoPath) {
    if (confirm('{% if current_lang == "de" %}Möchten Sie dieses Logo wirklich aus der Galerie löschen?{% else %}Are you sure you want to delete this logo from the gallery?{% endif %}')) {
      const form = document.createElement('form');
      form.method = 'POST';
      form.action = '/settings/delete-logo';

      const csrfInput = document.createElement('input');
      csrfInput.type = 'hidden';
      csrfInput.name = 'csrf_token';
      csrfInput.value = '{{ csrf_token }}';
      form.appendChild(csrfInput);

      const input = document.createElement('input');
      input.type = 'hidden';
      input.name = 'logo';
      input.value = logoPath;

      form.appendChild(input);
      document.body.appendChild(form);
      form.submit();
    }
  }

  function autoSubmitOnUpload(uploadInput) {
    if (uploadInput && uploadInput.files && uploadInput.files.length > 0) {
      document.getElementById('settings-form').submit();
    }
  }
</script>
{% endblock %}