<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="UTF-8">
<title>Plusfit – Mitgliederübersicht</title>

<style>
body {
    font-family: Arial, sans-serif;
    background: #f4f6f8;
}

.container {
    max-width: 98%;
    margin: 15px auto;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

h2 {
    margin-top: 0;
}

/* 🔍 Suche */
.search-box {
    margin-bottom: 10px;
}

.search-box input {
    padding: 6px;
    width: 250px;
}

/* 📊 Tabelle */
table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}

th, td {
    border: 1px solid #ccc;
    padding: 6px;
    vertical-align: top;
}

th {
    background: #e9ecef;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* 🔶 Leere Felder */
.empty {
    background-color: #fff8e1;
    color: #8a6d00;
    font-style: italic;
}

/* 🔒 Gesperrte User */
.locked {
    background-color: #ffe5e5;
}

/* Aktionen */
.actions a {
    margin-right: 6px;
    text-decoration: none;
}

.actions a:hover {
    text-decoration: underline;
}

/* Scrollbar */
.table-wrapper {
    overflow-x: auto;
}
</style>
</head>

<body>
<div class="container">

<h2>Mitgliederübersicht</h2>

<div class="search-box">
    <form method="GET">
        <input
            type="text"
            name="q"
            placeholder="Suche Name, Ort, E-Mail"
            value="<%= search || '' %>"
        >
        <button>Suchen</button>
        <a href="/users/create">➕ Neu</a>
        <a href="/users/dashboard">🏠 Dashboard</a>
    </form>
</div>

<div class="table-wrapper">
<table>
<thead>
<tr>
    <th>ID</th>
    <th>Vertragsnr.</th>
    <th>Variante</th>
    <th>Name</th>
    <th>Geburtsdatum</th>

    <th>Straße</th>
    <th>Nr</th>
    <th>PLZ</th>
    <th>Ort</th>
    <th>Land</th>

    <th>Mobil</th>
    <th>Telefon</th>
    <th>E-Mail</th>

    <th>Kontoinhaber</th>
    <th>IBAN</th>
    <th>BIC</th>
    <th>Mandat</th>

    <th>Status</th>
    <th>Aktion</th>
</tr>
</thead>

<tbody>
<% if (users.length === 0) { %>
<tr>
    <td colspan="16">Keine Mitglieder gefunden</td>
</tr>
<% } %>

<% users.forEach(u => { %>
<tr class="<%= u.gesperrt ? 'locked' : '' %>">

<td><%= u.id %></td>
<td><%= u.vertragsnummer || '—' %></td>

<td class="<%= u.vertragsvariante ? '' : 'empty' %>"><%= u.vertragsvariante || 'fehlt' %></td>
<td><%= u.vorname %> <%= u.nachname %></td>
<td class="<%= !u.geburtsdatum ? 'empty-field' : '' %>"><%= u.geburtsdatum || '— fehlt —' %></td>


<td class="<%= u.strasse ? '' : 'empty' %>"><%= u.strasse || 'fehlt' %></td>
<td class="<%= u.hausnummer ? '' : 'empty' %>"><%= u.hausnummer || 'fehlt' %></td>
<td class="<%= u.plz ? '' : 'empty' %>"><%= u.plz || 'fehlt' %></td>
<td class="<%= u.ort ? '' : 'empty' %>"><%= u.ort || 'fehlt' %></td>
<td class="<%= u.land ? '' : 'empty' %>"><%= u.land || 'fehlt' %></td>

<td class="<%= u.mobil ? '' : 'empty' %>"><%= u.mobil || 'fehlt' %></td>
<td class="<%= u.telefon ? '' : 'empty' %>"><%= u.telefon || 'fehlt' %></td>
<td class="<%= u.email ? '' : 'empty' %>"><%= u.email || 'fehlt' %></td>

<td class="<%= u.kontoinhaber ? '' : 'empty' %>"><%= u.kontoinhaber || 'fehlt' %></td>
<td class="<%= u.iban ? '' : 'empty' %>"><%= u.iban || 'fehlt' %></td>
<td class="<%= u.bic ? '' : 'empty' %>"><%= u.bic || 'fehlt' %></td>
<td class="<%= u.mandatsreferenz ? '' : 'empty' %>"><%= u.mandatsreferenz || 'fehlt' %></td>

<td>
    <%= u.gesperrt ? '🔒 gesperrt' : '🟢 aktiv' %>
</td>

<td class="actions">
    <a href="/users/edit/<%= u.id %>">✏️</a>
</td>

</tr>
<% }) %>
</tbody>
</table>
</div>

</div>
</body>
</html>
