{% extends 'base.html' %}
{% block title %}Benutzer — DynDNS Manager{% endblock %}

{% block content %}
<div class="d-flex justify-content-between align-items-center mb-4">
  <h4 class="mb-0"><i class="bi bi-people-fill text-primary"></i> Benutzer</h4>
  <button class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#addModal">
    <i class="bi bi-plus-lg"></i> Benutzer anlegen
  </button>
</div>

<div class="card">
  <div class="card-body p-0">
    <table class="table table-hover mb-0 align-middle">
      <thead class="table-light">
        <tr>
          <th>DynDNS-User</th>
          <th>Subdomains</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for item in users %}
        {% set u = item.row %}
        <tr>
          <td class="fw-semibold">{{ u.username }}</td>
          <td>
            {% for s in item.subdomains %}
              <span class="badge bg-light text-dark border me-1 mb-1 font-monospace">
                {% if base_domain %}{{ s.subdomain }}.{{ base_domain }}{% else %}{{ s.subdomain }}{% endif %}
                {% if s.current_ip %}<span class="text-muted">· {{ s.current_ip }}</span>{% endif %}
                <form method="post" action="{{ url_for('subdomain_delete', subdomain_id=s.id) }}"
                      class="d-inline" data-confirm="Subdomain {{ s.subdomain }} löschen?">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-link btn-sm p-0 ms-1 text-danger va-baseline"
                          title="Subdomain löschen"><i class="bi bi-x-lg"></i></button>
                </form>
              </span>
            {% else %}
              <span class="text-muted small">keine</span>
            {% endfor %}
          </td>
          <td>
            {% if u.active %}
              <span class="badge bg-success">Aktiv</span>
            {% else %}
              <span class="badge bg-secondary">Inaktiv</span>
            {% endif %}
          </td>
          <td class="text-end">
            <div class="btn-group btn-group-sm">
              <button class="btn btn-outline-success"
                      data-bs-toggle="modal" data-bs-target="#subModal{{ u.id }}"
                      title="Subdomain hinzufügen">
                <i class="bi bi-plus-lg"></i>
              </button>
              <button class="btn btn-outline-secondary"
                      data-bs-toggle="modal" data-bs-target="#editModal{{ u.id }}"
                      title="Bearbeiten">
                <i class="bi bi-pencil"></i>
              </button>
              <form method="post" action="{{ url_for('user_toggle', user_id=u.id) }}" class="d-inline">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <button type="submit" class="btn btn-outline-warning" title="Aktivieren/Deaktivieren">
                  <i class="bi bi-{% if u.active %}pause{% else %}play{% endif %}-fill"></i>
                </button>
              </form>
              <button class="btn btn-outline-danger"
                      data-bs-toggle="modal" data-bs-target="#delModal{{ u.id }}"
                      title="Löschen">
                <i class="bi bi-trash"></i>
              </button>
            </div>
          </td>
        </tr>

        <!-- Add-subdomain modal -->
        <div class="modal fade" id="subModal{{ u.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Subdomain(s) zu „{{ u.username }}" hinzufügen</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <form method="post" action="{{ url_for('subdomain_add', user_id=u.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-body">
                  <label class="form-label">Subdomain(s)</label>
                  <div class="input-group">
                    <textarea name="subdomains" class="form-control font-monospace" rows="3"
                              placeholder="mypc&#10;nas&#10;router" required></textarea>
                    {% if base_domain %}
                    <span class="input-group-text text-muted">.{{ base_domain }}</span>
                    {% endif %}
                  </div>
                  <div class="form-text">Mehrere durch Komma, Leerzeichen oder Zeilenumbruch trennen.</div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                  <button type="submit" class="btn btn-primary">Hinzufügen</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Edit modal -->
        <div class="modal fade" id="editModal{{ u.id }}" tabindex="-1">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Benutzer bearbeiten</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <form method="post" action="{{ url_for('user_edit', user_id=u.id) }}">
                <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                <div class="modal-body">
                  <div class="mb-3">
                    <label class="form-label">DynDNS-Benutzername</label>
                    <input name="username" type="text" class="form-control"
                           value="{{ u.username }}" required>
                  </div>
                  <div class="mb-3">
                    <label class="form-label">Neues Passwort <span class="text-muted">(leer = unverändert)</span></label>
                    <input name="password" type="password" class="form-control">
                  </div>
                  <div class="form-text">Subdomains werden direkt in der Tabelle per
                    <i class="bi bi-plus-lg"></i> / <i class="bi bi-x-lg"></i> verwaltet.</div>
                </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                  <button type="submit" class="btn btn-primary">Speichern</button>
                </div>
              </form>
            </div>
          </div>
        </div>

        <!-- Delete modal -->
        <div class="modal fade" id="delModal{{ u.id }}" tabindex="-1">
          <div class="modal-dialog modal-sm">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title">Benutzer löschen?</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
              </div>
              <div class="modal-body">
                <strong>{{ u.username }}</strong> mit {{ item.subdomains|length }} Subdomain(s)
                wirklich löschen? Alle Update-Logs werden ebenfalls entfernt.
              </div>
              <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
                <form method="post" action="{{ url_for('user_delete', user_id=u.id) }}" class="d-inline">
                  <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                  <button type="submit" class="btn btn-danger">Löschen</button>
                </form>
              </div>
            </div>
          </div>
        </div>

        {% else %}
        <tr><td colspan="4" class="text-center text-muted py-4">
          Noch keine Benutzer. <a href="#" data-bs-toggle="modal" data-bs-target="#addModal">Jetzt anlegen.</a>
        </td></tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<!-- Add modal -->
<div class="modal fade" id="addModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Neuen Benutzer anlegen</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>
      <form method="post" action="{{ url_for('user_add') }}">
        <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">DynDNS-Benutzername</label>
            <input name="username" type="text" class="form-control"
                   placeholder="z.B. stefan" required>
            <div class="form-text">Wird im Speedport als „Username" eingetragen.</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Passwort</label>
            <input name="password" type="password" class="form-control" required>
            <div class="form-text">Wird im Speedport als „Passwort" eingetragen.</div>
          </div>
          <div class="mb-3">
            <label class="form-label">Subdomain(s)</label>
            <div class="input-group">
              <textarea name="subdomains" class="form-control font-monospace" rows="3"
                        placeholder="mypc&#10;nas&#10;router" required></textarea>
              {% if base_domain %}
              <span class="input-group-text text-muted">.{{ base_domain }}</span>
              {% endif %}
            </div>
            <div class="form-text">
              Eine oder mehrere — durch Komma, Leerzeichen oder Zeilenumbruch getrennt.
              Nur Kleinbuchstaben, Ziffern, Bindestriche und Punkte.
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Abbrechen</button>
          <button type="submit" class="btn btn-primary">Anlegen</button>
        </div>
      </form>
    </div>
  </div>
</div>
{% endblock %}