{% extends "base.html" %}

{% block title %}
  {% if current_lang == 'de' %}Benutzerverwaltung{% else %}User Management{% endif %}
{% endblock %}{% block wrapper_class %}wrapper-settings-mode{% endblock %}

{% block content %}
<div class="card settings-card">
  <div style="border-bottom: 1px solid var(--card-border); padding-bottom: 12px; margin-bottom: 20px;">
    <h2 style="font-family: var(--font-title); font-size: 1.8rem; font-weight: 700; margin: 0;">
      {% if ldap_enabled %}
        {% if current_lang == 'de' %}Wiki-Rollen{% else %}Wiki Roles{% endif %}
      {% else %}
        {% if current_lang == 'de' %}Benutzerverwaltung für Editoren{% else %}User Management for Editors{% endif %}
      {% endif %}
    </h2>
    <p style="color: var(--text-muted); font-size: 0.9rem; margin-top: 8px;">
      {% if ldap_enabled %}
        {% if current_lang == 'de' %}Anmeldung läuft über LDAP; hier wird nur festgelegt, wer sich als Editor oder Admin einloggen darf.{% else %}Login runs through LDAP; this only controls who is authorized to log in as editor or admin.{% endif %}
      {% else %}
        {% if current_lang == 'de' %}Erstellen, bearbeiten oder löschen Sie Editor-Accounts für das Wiki.{% else %}Create, edit, or delete editor accounts for the wiki.{% endif %}
      {% endif %}
    </p>
  </div>

  {% if success_msg %}
    <div class="flash-message flash-success" style="margin-bottom: 20px;">
      <span>{{ success_msg }}</span>
    </div>
  {% endif %}

  {% if error_msg %}
    <div class="flash-message flash-danger" style="margin-bottom: 20px;">
      <span>{{ error_msg }}</span>
    </div>
  {% endif %}

  {% if ldap_enabled %}
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px;">
    <!-- Left: List of authorized LDAP users -->
    <div>
      <h3 style="font-family: var(--font-title); font-size: 1.25rem; font-weight: 650; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--bg-tertiary); padding-bottom: 6px;">
        {% if current_lang == 'de' %}Berechtigte Nutzer{% else %}Authorized Users{% endif %}
      </h3>

      <div style="display: flex; flex-direction: column; gap: 8px;">
        {% for entry in roles %}
          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background-color: var(--bg-secondary); border: 1px solid var(--card-border); border-radius: 6px;">
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="font-weight: 600; font-family: var(--font-mono);">{{ entry.Username }}</span>
              <span style="font-size: 0.75rem; background-color: var(--bg-tertiary); color: var(--text-muted); padding: 2px 6px; border-radius: 4px; text-transform: uppercase;">{{ entry.Role }}</span>
              {% if entry.Username == logged_in_user %}
                <span style="font-size: 0.75rem; background-color: var(--accent-color); color: white; padding: 2px 6px; border-radius: 4px;">
                  {% if current_lang == 'de' %}Du{% else %}You{% endif %}
                </span>
              {% endif %}
            </div>

            {% if entry.Username != logged_in_user %}
              <form action="/users/delete" method="POST" onsubmit="return confirmRevoke('{{ entry.Username }}')" style="margin: 0;">
                <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                <input type="hidden" name="username" value="{{ entry.Username }}">
                <button type="submit" class="btn btn-danger btn-sm" style="background-color: var(--danger, #ef4444); color: white; border: none;">
                  {% if current_lang == 'de' %}Zugriff entziehen{% else %}Revoke Access{% endif %}
                </button>
              </form>
            {% endif %}
          </div>
        {% endfor %}
      </div>
    </div>

    <!-- Right: Grant / change role -->
    <div>
      <h3 style="font-family: var(--font-title); font-size: 1.25rem; font-weight: 650; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--bg-tertiary); padding-bottom: 6px;">
        {% if current_lang == 'de' %}Rolle vergeben / ändern{% else %}Grant / Change Role{% endif %}
      </h3>

      <form action="/users/create" method="POST" class="editor-form">
        <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
        <div class="form-group" style="margin-bottom: 12px;">
          <label class="form-label" for="new-username">
            {% if current_lang == 'de' %}LDAP-Benutzername{% else %}LDAP Username{% endif %}
          </label>
          {% if ldap_search_configured %}
            <div style="position: relative;">
              <input type="text" id="ldap-search-box" class="form-input" autocomplete="off"
                placeholder="{% if current_lang == 'de' %}Name oder Benutzername suchen...{% else %}Search name or username...{% endif %}"
                oninput="onLdapSearchInput()">
              <input type="hidden" id="new-username" name="username" required>
              <div id="ldap-search-results" style="display: none; position: absolute; z-index: 10; top: 100%; left: 0; right: 0; margin-top: 4px; background-color: var(--bg-secondary); border: 1px solid var(--card-border); border-radius: 6px; max-height: 220px; overflow-y: auto; box-shadow: 0 4px 12px rgba(0,0,0,0.15);"></div>
            </div>
            <div style="font-size: 0.75rem; color: var(--text-muted); margin-top: 4px;">
              {% if current_lang == 'de' %}Benötigten Nutzer im Ergebnis anklicken, um ihn zu übernehmen.{% else %}Click the needed user in the results to select them.{% endif %}
            </div>
          {% else %}
            <input type="text" id="new-username" name="username" class="form-input" required placeholder="z.B. mmustermann">
          {% endif %}
        </div>
        <div class="form-group" style="margin-bottom: 12px;">
          <label class="form-label" for="new-role">
            {% if current_lang == 'de' %}Rolle{% else %}Role{% endif %}
          </label>
          <select id="new-role" name="role" class="form-input">
            <option value="editor">editor</option>
            <option value="admin">admin</option>
          </select>
        </div>
        <button type="submit" class="btn btn-primary" style="margin-top: 12px; width: 100%;">
          {% if current_lang == 'de' %}Speichern{% else %}Save{% endif %}
        </button>
      </form>
      <p style="color: var(--text-muted); font-size: 0.8rem; margin-top: 12px;">
        {% if current_lang == 'de' %}Ein bereits vorhandener Benutzername wird mit der neuen Rolle überschrieben.{% else %}An existing username will have its role overwritten.{% endif %}
      </p>
    </div>
  </div>
  {% else %}
  <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 24px;">
    <!-- Left: List of Users -->
    <div>
      <h3 style="font-family: var(--font-title); font-size: 1.25rem; font-weight: 650; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--bg-tertiary); padding-bottom: 6px;">
        {% if current_lang == 'de' %}Aktive Benutzer{% else %}Active Users{% endif %}
      </h3>

      <div style="display: flex; flex-direction: column; gap: 8px;">
        {% for u in users %}
          <div style="display: flex; align-items: center; justify-content: space-between; padding: 12px; background-color: var(--bg-secondary); border: 1px solid var(--card-border); border-radius: 6px;">
            <div style="display: flex; align-items: center; gap: 8px;">
              <span style="font-weight: 600; font-family: var(--font-mono);">{{ u.Username }}</span>
              {% if u.Username == logged_in_user %}
                <span style="font-size: 0.75rem; background-color: var(--accent-color); color: white; padding: 2px 6px; border-radius: 4px;">
                  {% if current_lang == 'de' %}Du{% else %}You{% endif %}
                </span>
              {% endif %}
            </div>
            
            <div style="display: flex; gap: 8px;">
              {% if u.Username != 'admin' and (is_admin or u.Username == logged_in_user) %}
              <button type="button" class="btn btn-secondary btn-sm" onclick="showChangePasswordForm('{{ u.Username }}')">
                {% if current_lang == 'de' %}Passwort{% else %}Password{% endif %}
              </button>
              {% endif %}
              
              {% if is_admin and u.Username != 'admin' %}
                <form action="/users/delete" method="POST" onsubmit="return confirmDelete('{{ u.Username }}')" style="margin: 0;">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
                  <input type="hidden" name="username" value="{{ u.Username }}">
                  <button type="submit" class="btn btn-danger btn-sm" style="background-color: var(--danger, #ef4444); color: white; border: none;">
                    {% if current_lang == 'de' %}Löschen{% else %}Delete{% endif %}
                  </button>
                </form>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>
    </div>

    <!-- Right: Create / Modify Form -->
    <div>
      <!-- Create User Block -->
      <div id="create-user-section">
        <h3 style="font-family: var(--font-title); font-size: 1.25rem; font-weight: 650; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--bg-tertiary); padding-bottom: 6px;">
          {% if current_lang == 'de' %}Neuen Benutzer anlegen{% else %}Create New User{% endif %}
        </h3>
        
        <form action="/users/create" method="POST" class="editor-form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <div class="form-group" style="margin-bottom: 12px;">
            <label class="form-label" for="new-username">
              {% if current_lang == 'de' %}Benutzername{% else %}Username{% endif %}
            </label>
            <input type="text" id="new-username" name="username" class="form-input" required placeholder="z.B. max_mustermann" pattern="^[a-zA-Z0-9_.-]+$" title="Only letters, numbers, _, ., -">
          </div>
          <div class="form-group" style="margin-bottom: 12px;">
            <label class="form-label" for="new-password">
              {% if current_lang == 'de' %}Passwort{% else %}Password{% endif %}
            </label>
            <input type="password" id="new-password" name="password" class="form-input" required placeholder="••••••••">
          </div>
          <button type="submit" class="btn btn-primary" style="margin-top: 12px; width: 100%;">
            {% if current_lang == 'de' %}Benutzer anlegen{% else %}Create User{% endif %}
          </button>
        </form>
      </div>

      <!-- Change Password Block (Hidden by default) -->
      <div id="change-password-section" style="display: none;">
        <h3 style="font-family: var(--font-title); font-size: 1.25rem; font-weight: 650; margin-top: 0; margin-bottom: 12px; border-bottom: 1px solid var(--bg-tertiary); padding-bottom: 6px; display: flex; justify-content: space-between; align-items: center;">
          <span>{% if current_lang == 'de' %}Passwort ändern für{% else %}Change Password for{% endif %} <span id="change-target-user" style="font-family: var(--font-mono); color: var(--accent-color);"></span></span>
          <button type="button" class="btn btn-secondary" onclick="cancelChangePassword()" style="flex-shrink: 0; margin-left: 12px;">
            {% if current_lang == 'de' %}Abbrechen{% else %}Cancel{% endif %}
          </button>
        </h3>
        
        <form action="/users/password" method="POST" class="editor-form">
          <input type="hidden" name="csrf_token" value="{{ csrf_token }}">
          <input type="hidden" id="change-username" name="username" value="">
          <div class="form-group" style="margin-bottom: 12px;">
            <label class="form-label" for="change-new-password">
              {% if current_lang == 'de' %}Neues Passwort{% else %}New Password{% endif %}
            </label>
            <input type="password" id="change-new-password" name="password" class="form-input" required placeholder="••••••••">
          </div>
          <button type="submit" class="btn btn-primary" style="margin-top: 12px; width: 100%;">
            {% if current_lang == 'de' %}Passwort speichern{% else %}Save Password{% endif %}
          </button>
        </form>
      </div>
    </div>
  </div>
  {% endif %}

  <div style="display: flex; justify-content: flex-end; border-top: 1px solid var(--card-border); padding-top: 16px;">
    <a href="/" class="btn btn-secondary">
      {% if current_lang == 'de' %}Zurück zum Wiki{% else %}Back to Wiki{% endif %}
    </a>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
  function showChangePasswordForm(username) {
    document.getElementById('create-user-section').style.display = 'none';
    document.getElementById('change-password-section').style.display = 'block';
    document.getElementById('change-username').value = username;
    document.getElementById('change-target-user').textContent = username;
  }

  function cancelChangePassword() {
    document.getElementById('change-password-section').style.display = 'none';
    document.getElementById('create-user-section').style.display = 'block';
  }

  function confirmDelete(username) {
    const confirmMsg = '{% if current_lang == "de" %}Möchten Sie den Benutzer "${username}" wirklich löschen?{% else %}Are you sure you want to delete user "${username}"?{% endif %}';
    return confirm(confirmMsg.replace('${username}', username));
  }

  function confirmRevoke(username) {
    const confirmMsg = '{% if current_lang == "de" %}Zugriff für "${username}" wirklich entziehen?{% else %}Really revoke access for "${username}"?{% endif %}';
    return confirm(confirmMsg.replace('${username}', username));
  }

  let ldapSearchTimer = null;

  function onLdapSearchInput() {
    const box = document.getElementById('ldap-search-box');
    const hiddenInput = document.getElementById('new-username');
    const resultsEl = document.getElementById('ldap-search-results');
    // Also allow directly typing a known username without picking a result.
    hiddenInput.value = box.value.trim();

    clearTimeout(ldapSearchTimer);
    const term = box.value.trim();
    if (term.length < 2) {
      resultsEl.style.display = 'none';
      resultsEl.innerHTML = '';
      return;
    }

    ldapSearchTimer = setTimeout(() => {
      fetch('/users/ldap-search?term=' + encodeURIComponent(term))
        .then(res => res.json())
        .then(data => {
          resultsEl.innerHTML = '';
          if (!data.success || !data.results || data.results.length === 0) {
            resultsEl.style.display = 'none';
            return;
          }
          data.results.forEach(item => {
            const row = document.createElement('div');
            row.style.cssText = 'padding: 8px 12px; cursor: pointer; border-bottom: 1px solid var(--bg-tertiary);';

            const userSpan = document.createElement('span');
            userSpan.style.cssText = 'font-weight: 600; font-family: var(--font-mono);';
            userSpan.textContent = item.username;

            const nameSpan = document.createElement('span');
            nameSpan.style.cssText = 'color: var(--text-muted); font-size: 0.85rem; margin-left: 8px;';
            nameSpan.textContent = item.name;

            row.appendChild(userSpan);
            row.appendChild(nameSpan);
            row.onmouseover = () => { row.style.backgroundColor = 'var(--bg-tertiary)'; };
            row.onmouseout = () => { row.style.backgroundColor = ''; };
            row.onclick = () => {
              box.value = item.name + ' (' + item.username + ')';
              hiddenInput.value = item.username;
              resultsEl.style.display = 'none';
            };
            resultsEl.appendChild(row);
          });
          resultsEl.style.display = 'block';
        })
        .catch(() => { resultsEl.style.display = 'none'; });
    }, 250);
  }

  document.addEventListener('click', function(e) {
    const resultsEl = document.getElementById('ldap-search-results');
    const box = document.getElementById('ldap-search-box');
    if (resultsEl && box && !resultsEl.contains(e.target) && e.target !== box) {
      resultsEl.style.display = 'none';
    }
  });
</script>
{% endblock %}