{% 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">
      <thead class="table-light">
        <tr>
          <th>Subdomain</th>
          <th>Hostname</th>
          <th>DynDNS-User</th>
          <th>Aktuelle IP</th>
          <th>Letztes Update</th>
          <th>Status</th>
          <th></th>
        </tr>
      </thead>
      <tbody>
        {% for u in users %}
        <tr>
          <td class="fw-semibold">{{ u.subdomain }}</td>
          <td class="text-muted small font-monospace">
            {% if base_domain %}{{ u.subdomain }}.{{ base_domain }}{% else %}—{% endif %}
          </td>
          <td>{{ u.username }}</td>
          <td>
            {% if u.current_ip %}
              <span class="badge bg-secondary font-monospace">{{ u.current_ip }}</span>
            {% else %}<span class="text-muted">—</span>{% endif %}
          </td>
          <td class="text-muted small">{{ u.last_updated or '—' }}</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-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">
                <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>

        <!-- 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) }}">
                <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="mb-3">
                    <label class="form-label">Subdomain</label>
                    <div class="input-group">
                      <input name="subdomain" type="text" class="form-control font-monospace"
                             value="{{ u.subdomain }}" required>
                      {% if base_domain %}
                      <span class="input-group-text text-muted">.{{ base_domain }}</span>
                      {% endif %}
                    </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">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> ({{ u.subdomain }}) 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">
                  <button type="submit" class="btn btn-danger">Löschen</button>
                </form>
              </div>
            </div>
          </div>
        </div>

        {% else %}
        <tr><td colspan="7" 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') }}">
        <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</label>
            <div class="input-group">
              <input name="subdomain" type="text" class="form-control font-monospace"
                     placeholder="mypc" required
                     pattern="[a-z0-9]([a-z0-9\-]*[a-z0-9])?"
                     title="Kleinbuchstaben, Ziffern und Bindestriche">
              {% if base_domain %}
              <span class="input-group-text text-muted">.{{ base_domain }}</span>
              {% endif %}
            </div>
            <div class="form-text">Nur Kleinbuchstaben, Ziffern und Bindestriche.</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 %}