@extends('layouts.app')

@section('page_title', 'Die Kaffeeliste - Mitglieder')

@section('content')
    <section class="hero">
        <div>
            <p class="hero__kicker">Mitglieder</p>
            <h2 class="hero__title">Mitglieder</h2>
            <p class="hero__lead">
                Hier sind aktive Mitglieder, Rollen und Status klar gegliedert. Diese Sicht entspricht der alten
                Mitgliederverwaltung, nur als SaaS-taugliche, aufgeräumte Oberfläche.
            </p>
        </div>
        <div class="toolbar">
            <span class="badge">Aktiv: 18</span>
            <span class="badge">Admins: 3</span>
            <span class="badge badge--solid">Tenant: Demo-Workspace</span>
        </div>
    </section>

    <section class="grid grid--2">
        <article class="card metric">
            <p class="metric__label">Aktive Mitglieder</p>
            <div class="metric__value">18</div>
            <p class="muted">Für Buchungen, Auswertungen und Benachrichtigungen freigeschaltet.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Sperrstatus</p>
            <div class="metric__value">2</div>
            <p class="muted">Inaktive Konten bleiben sichtbar, aber ohne Schreibrechte.</p>
        </article>
    </section>

    <section class="table-card" style="margin-top: 18px;">
        <div class="table-card__header">
            <div>
                <p class="card__eyebrow">Mitgliederliste</p>
                <h3>Aktive Zuordnungen</h3>
            </div>
            <span class="pill">Rollenkonzept</span>
        </div>
        <div class="table-card__body">
            <table>
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>E-Mail</th>
                        <th>Rolle</th>
                        <th>Status</th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td>Max Beispiel</td>
                        <td>max@example.com</td>
                        <td>Member</td>
                        <td><span class="status">Aktiv</span></td>
                    </tr>
                    <tr>
                        <td>Jana Muster</td>
                        <td>jana@example.com</td>
                        <td>Admin</td>
                        <td><span class="status">Aktiv</span></td>
                    </tr>
                    <tr>
                        <td>Chris Reserve</td>
                        <td>chris@example.com</td>
                        <td>Member</td>
                        <td><span class="status status--warning">Pausiert</span></td>
                    </tr>
                </tbody>
            </table>
        </div>
    </section>
@endsection
