@extends('layouts.app')

@section('page_title', 'Die Kaffeeliste - Übersicht')

@section('content')
    <section class="hero hero--split">
        <div class="hero__content">
            <div>
                <p class="hero__kicker">Übersicht</p>
                <h2 class="hero__title">Dein Bereich</h2>
                <p class="hero__lead">
                    Die wichtigsten Werte auf einen Blick.
                </p>
            </div>
            <div class="hero__meta">
                <span class="badge">Heute</span>
                <span class="badge">Aktiv</span>
                <span class="badge badge--solid">Bereit</span>
            </div>
        </div>

        <aside class="hero__aside">
            <article class="card metric metric--compact">
                <p class="metric__label">Status</p>
                <div class="metric__value">OK</div>
                <p class="muted">Alles läuft normal.</p>
            </article>
            <article class="card metric metric--compact">
                <p class="metric__label">Letzte Aktivität</p>
                <div class="metric__value">Heute</div>
                <p class="muted">Neueste Änderungen im Bereich.</p>
            </article>
        </aside>
    </section>

    <section class="grid grid--4">
        <article class="card metric">
            <p class="metric__label">Kontostand</p>
            <div class="metric__value">7,50 EUR</div>
            <p class="muted">Aktueller Stand.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Striche</p>
            <div class="metric__value">5</div>
            <p class="muted">Diesen Monat.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Einzahlungen</p>
            <div class="metric__value">1</div>
            <p class="muted">Diesen Monat.</p>
        </article>
        <article class="card metric">
            <p class="metric__label">Letzte Buchung</p>
            <div class="metric__value">Heute</div>
            <p class="muted">Aktuelle Aktivität.</p>
        </article>
    </section>

    <section class="split" style="margin-top: 18px;">
        <article class="table-card">
            <div class="table-card__header">
                <div>
                    <p class="card__eyebrow">Aktivität</p>
                    <h3>Letzte Buchungen</h3>
                </div>
                <span class="pill">Live</span>
            </div>
            <div class="table-card__body">
                <table>
                    <thead>
                        <tr>
                            <th>Zeit</th>
                            <th>Typ</th>
                            <th>Betrag</th>
                            <th>Status</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>09:00</td>
                            <td>Einzahlung</td>
                            <td>10,00 EUR</td>
                            <td><span class="status">Gebucht</span></td>
                        </tr>
                        <tr>
                            <td>10:30</td>
                            <td>Strich</td>
                            <td>-2,50 EUR</td>
                            <td><span class="status status--warning">Verbraucht</span></td>
                        </tr>
                        <tr>
                            <td>12:15</td>
                            <td>Hinweis</td>
                            <td>Info</td>
                            <td><span class="status">Aktiv</span></td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </article>

        <article class="panel">
            <h3>Bereiche</h3>
            <p class="muted">Im Menü liegen die zentralen Arbeitsbereiche.</p>
            <div class="timeline timeline--tight">
                <div class="timeline__item">
                    <p class="timeline__title">Mitglieder</p>
                    <p class="timeline__meta">Verwaltung im Hintergrund.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Buchungen</p>
                    <p class="timeline__meta">Striche und Zahlungen zusammen.</p>
                </div>
                <div class="timeline__item">
                    <p class="timeline__title">Exporte</p>
                    <p class="timeline__meta">Nur wenn freigeschaltet.</p>
                </div>
            </div>
            <div class="note" style="margin-top: 18px;">
                Die wichtigsten Zahlen sind hier, der Rest bleibt im Menü.
            </div>
        </article>
    </section>
@endsection
