<div class="d-flex flex-wrap gap-2 mb-3">
    <x-button type="primary">Primary</x-button>
    <x-button type="secondary">Secondary</x-button>
    <x-button type="success">Success</x-button>
    <x-button type="danger">Danger</x-button>
    <x-button type="outline-primary">Outline</x-button>
    <x-button type="primary" :opacity="true">opacity</x-button>
</div>

<div class="d-flex flex-wrap gap-2">
    {{-- Ohne Slot und ohne label: Standardtext „Speichern“ --}}
    <x-button type="success" />
    <x-button type="info" label="Mit label" tooltip="Tooltip über data-bs-title" />
    {{-- Mit href wird ein <a class="btn"> gerendert --}}
    <x-button.link href="#ex-buttons-index" type="outline-secondary">
        <i class="bi bi-link-45deg"></i> Link
    </x-button.link>
</div>

<x-modal modid="demoCancelModal" title="button.cancel">
    <p class="mb-0">button.cancel schließt das Modal über data-bs-dismiss.</p>
    <x-slot:footer>
        <x-button.cancel />
        <x-button.cancel type="outline-danger" label="Verwerfen" />
    </x-slot:footer>
</x-modal>

<div class="d-flex flex-wrap gap-2 align-items-start">
    <x-button type="outline-primary" data-bs-toggle="modal" data-bs-target="#demoCancelModal">
        Modal mit button.cancel öffnen
    </x-button>

    <div class="border rounded p-2">
        <div class="small text-body-secondary mb-1">&lt;x-submit&gt;</div>
        <x-submit type="primary">Senden</x-submit>
    </div>
</div>

<div class="d-flex flex-wrap gap-2">
    <x-button.clipboard text="DE00 0000 0000 0000 0000 00">
        <i class="bi bi-clipboard"></i> IBAN kopieren
    </x-button.clipboard>

    {{-- html: zusätzlich formatiert (text/html) in die Zwischenablage --}}
    <x-button.clipboard type="outline-primary" text="Erika Mustermann" html="<b>Erika</b> Mustermann"
        message="Name mit Formatierung kopiert">
        <i class="bi bi-type-bold"></i> Mit HTML kopieren
    </x-button.clipboard>
</div>

<div class="row g-3 align-items-center">
    <div class="col-md-6">
        {{-- Klick: Livewire.dispatch('testing') · Shift: Popup · Strg: neuer Tab --}}
        <x-button.dispatch modalName="testing" :href="route('demo.core.components')">
            <i class="bi bi-broadcast"></i> Event „testing“ senden
        </x-button.dispatch>
    </div>
    <div class="col-md-6">
        {{-- Die Counter-Komponente des Packages lauscht mit #[On('testing')] --}}
        <div class="border rounded p-2 text-center">
            <livewire:counter />
        </div>
    </div>
</div>

<div class="d-flex flex-wrap gap-2">
    {{-- Klick: zentriertes Popup-Fenster · Strg-Klick: neuer Tab --}}
    <x-button.popup :href="route('demo.core.index')">
        <i class="bi bi-window-stack"></i> Popup öffnen
    </x-button.popup>

    <x-button.popup :href="route('demo.core.index')" popup="width=480,height=360" type="outline-primary">
        Kleines Popup (480×360)
    </x-button.popup>
</div>

<x-button.group>
    <x-button type="outline-secondary"><i class="bi bi-chevron-left"></i></x-button>
    <x-button type="outline-secondary">Heute</x-button>
    <x-button type="outline-secondary"><i class="bi bi-chevron-right"></i></x-button>
</x-button.group>

<x-button.group class="btn-group-sm ms-2">
    <x-button.link href="#ex-buttons-group" type="outline-primary"><i class="bi bi-pencil-square"></i></x-button.link>
    <x-button.clipboard type="outline-primary" text="Kopierter Text" tooltip=""><i class="bi bi-clipboard"></i></x-button.clipboard>
</x-button.group>

{{-- Link zum übergeordneten Model. Die Route wird aus getShowRouteName()
     oder aus dem Klassennamen (props.show, contacts.show, …) abgeleitet;
     gibt es sie nicht, bleibt der Button deaktiviert. --}}
<div class="d-flex flex-wrap gap-2 align-items-center">
    <x-button.model :model="$prop->model_type" :modid="$prop->model_id" />
    <span class="small text-body-secondary">
        {{ $prop->model_type }} #{{ $prop->model_id }} – keine Route contacts.show, daher deaktiviert
    </span>
</div>

<div class="row g-3">
    <div class="col-lg-6">
        <x-card>
            <x-slot name="headerLeft"><strong>Kontakt</strong></x-slot>
            <x-slot name="headerRight">
                <x-button.link href="#ex-basics-card" type="outline-secondary" class="btn-sm">
                    <i class="bi bi-pencil-square"></i>
                </x-button.link>
            </x-slot>

            Erika Mustermann, Musterstadt

            <x-slot name="footer">
                <small class="text-body-secondary">Slots: headerLeft, headerRight, footer</small>
            </x-slot>
        </x-card>
    </div>
    <div class="col-lg-6">
        {{-- Slot header ersetzt den kompletten Kartenkopf --}}
        <x-card class="border-primary">
            <x-slot name="header">
                <div class="card-header text-bg-primary">Eigener Kopf über den Slot header</div>
            </x-slot>
            Ohne headerLeft/headerRight zeigt die Karte Platzhaltertexte – deshalb hier header.
        </x-card>
    </div>
</div>

{{-- acc_id und row_id stabil wählen (nicht rand()), damit Livewire-Re-Renders
     die Zuordnung von Button und Collapse nicht zerstören. --}}
<x-accordion acc_id="demo-accordion">
    <x-accordion.item acc_id="demo-accordion" row_id="demo-acc-1" header="Was ist ein Prop?" :collapsed="false">
        Eine polymorphe Eigenschaft (key, state, type, value), die an jedes Model gehängt werden kann.
    </x-accordion.item>
    <x-accordion.item acc_id="demo-accordion" row_id="demo-acc-2" header="Welche Typen gibt es?">
        birth_date, death_date, iban und metadata.
    </x-accordion.item>
    <x-accordion.item acc_id="demo-accordion" row_id="demo-acc-3" header="Und die Status?">
        active, error, verified, unverified und pending.
    </x-accordion.item>
</x-accordion>

<div>
    <div class="d-flex flex-wrap gap-3 align-items-start">

        {{-- dropdown: Button mit frei gestaltbarem, dunklem Menü --}}
        <x-dropdown label="<i class='bi bi-funnel'></i> dropdown" :toggle="true" width="16rem">
            <div class="px-3 py-2 small">Beliebiger Inhalt im Menü.</div>
        </x-dropdown>

        {{-- dropdown.list: Einträge aus option (href => Text) --}}
        <x-dropdown.list label="dropdown.list" :option="[
            route('demo.core.layout') => 'App-Shell',
            route('demo.core.livewire') => 'Livewire',
            route('demo.core.registries') => 'Registries',
        ]" />

        {{-- dropdown.click: wire:click auf eine Methode der Livewire-Komponente --}}
        <x-dropdown.list label="dropdown.click">
            <x-dropdown.click click="click">Methode click() aufrufen</x-dropdown.click>
            <x-dropdown.click click="click" confirm="Wirklich ausführen?">Mit wire:confirm</x-dropdown.click>
        </x-dropdown.list>

        {{-- dropdown.sort: ruft sortBy() und liest sortField/sortAsc der Komponente --}}
        <x-dropdown.list label="dropdown.sort">
            <x-dropdown.sort field="name" label="Name" :wire="$this" />
            <x-dropdown.sort field="city" label="Ort" :wire="$this" />
        </x-dropdown.list>

    </div>

    <p class="small text-body-secondary mt-3 mb-0">
        click(): {{ $clicks }}× · Sortierung: {{ $sortField }} {{ $sortAsc ? 'aufsteigend' : 'absteigend' }}
    </p>
</div>

@php
    $tabs = ['Übersicht', 'Details', '<i class="bi bi-gear"></i> Einstellungen'];
    $token = 'demo-tabs';
    $show = 0;
@endphp

<x-nav.tabs :$tabs :$token :$show>
    <x-nav.item tab="0" :$token :$show>
        <p class="pt-3 mb-0">Inhalt von Tab 1 – die Tab-Titel dürfen HTML enthalten.</p>
    </x-nav.item>
    <x-nav.item tab="1" :$token :$show>
        <p class="pt-3 mb-0">Inhalt von Tab 2.</p>
    </x-nav.item>
    <x-nav.item tab="2" :$token :$show>
        <p class="pt-3 mb-0">Inhalt von Tab 3.</p>
    </x-nav.item>
</x-nav.tabs>

{{-- field.html.default: klassische Formularfelder mit name, old() und @error --}}
<x-form action="#" method="GET" onsubmit="event.preventDefault()">
    <div class="row g-3">
        <div class="col-md-6">
            <x-field field="name" label="Name" value="Erika Mustermann" />
        </div>
        <div class="col-md-6">
            <x-field field="email" label="E-Mail" type="email" value="erika.mustermann@example.com" />
        </div>
        <div class="col-md-6">
            <label class="form-label">field.select</label>
            <x-field.select field="city" label="Ort" value="Testdorf" :options="[
                'Musterstadt' => 'Musterstadt',
                'Beispielhausen' => 'Beispielhausen',
                'Testdorf' => 'Testdorf',
            ]" />
        </div>
        <div class="col-md-6">
            <label class="form-label">field.text</label>
            <x-field.text field="memo" rows="3" value="Mehrzeiliger Text" />
        </div>
    </div>
</x-form>

<div>
    {{-- field.wire.default (Tags slim.*): kompakte Felder ohne Label mit wire:model --}}
    <div class="row g-3">
        <div class="col-md-4">
            <x-slim field="name" label="Name" modifier="live" />
        </div>
        <div class="col-md-4">
            <x-slim.select field="city" modifier="live" :option="[
                'Musterstadt' => 'Musterstadt',
                'Beispielhausen' => 'Beispielhausen',
                'Testdorf' => 'Testdorf',
            ]" />
        </div>
        <div class="col-md-4">
            <x-slim.text field="memo" rows="2" modifier="blur" />
        </div>
    </div>

    <p class="small text-body-secondary mt-3 mb-0">
        Livewire-Zustand: name = „{{ $name }}“, city = „{{ $city }}“, memo = „{{ $memo }}“
    </p>
</div>

<div>
    {{-- field.wire.float (Tags wire.*): Floating Labels mit wire:model --}}
    <div class="row g-3">
        <div class="col-md-6">
            <x-wire.input field="name" label="Name" modifier="live" />
        </div>
        <div class="col-md-6">
            <x-wire.select field="city" label="Ort" modifier="live" :options="[
                'Musterstadt' => 'Musterstadt',
                'Beispielhausen' => 'Beispielhausen',
                'Testdorf' => 'Testdorf',
            ]" />
        </div>
        <div class="col-md-6">
            <x-wire.select-enum field="status" label="Status (Enum)" modifier="live"
                :options="\App\Enums\ContactStatus::cases()" />
        </div>
        <div class="col-md-6">
            <x-wire.search field="search" label="Suche" modifier="live" />
        </div>
        <div class="col-12">
            <x-wire.text field="memo" label="Notiz" rows="3" modifier="blur" />
        </div>
    </div>

    <p class="small text-body-secondary mt-3 mb-0">
        Livewire-Zustand: name = „{{ $name }}“, city = „{{ $city }}“, status = „{{ $status }}“,
        search = „{{ $search }}“
    </p>
</div>

{{-- form.*: Floating-Label-Felder für klassische Formulare; x-form ergänzt @csrf und Method-Spoofing --}}
<x-form action="#" method="PUT" onsubmit="event.preventDefault()">
    <div class="row g-3">
        <div class="col-md-6">
            <x-form.input field="name" label="Name" value="Max Mustermann" />
        </div>
        <div class="col-md-6">
            <x-form.select field="city" label="Ort" value="Beispielhausen" :options="[
                'Musterstadt' => 'Musterstadt',
                'Beispielhausen' => 'Beispielhausen',
                'Testdorf' => 'Testdorf',
            ]" />
        </div>
        <div class="col-12">
            <x-form.textarea field="memo" label="Notiz" value="Text im Floating-Label-Textfeld" />
        </div>
        <div class="col-12">
            <x-form.group>
                <span class="input-group-text"><i class="bi bi-at"></i></span>
                <input type="email" class="form-control" placeholder="form.group = input-group">
            </x-form.group>
        </div>
        <div class="col-12 d-flex gap-2">
            <x-form.label label="form.label:" class="col-form-label" />
            <x-form.cancel />
            <x-form.submit>Speichern</x-form.submit>
        </div>
    </div>
</x-form>

{{-- Erwartet: $contacts (Paginator mit ->sortable()), $request, $cities, $statusEnum --}}
<x-table.filter class="mb-3">
    <x-table.filter.cnt_per_page route="demo.core.components" :request="$request" />
    <x-table.filter.search field="search" table="Kontakte" :oldval="$request->search" />
    <x-table.filter.dropdown field="city" label="Ort" :options="$cities" :oldval="$request->city" />
    <x-table.filter.dropdown.enum field="status" label="Status" :enum="$statusEnum" :oldval="$request->status" />
    <x-table.filter.dropdown.bool field="newsletter" label="Newsletter" :oldval="$request->newsletter" />
</x-table.filter>

<x-form :action="route('demo.core.components')" method="GET">
    @php
        $colspan = 6;
        $token = 'contacts';
        $toggleCollapse = true;
        $toggleChecks = true;
    @endphp

    <x-table :acc_id="$token" class="table-sm table-hover align-middle" :$colspan :$toggleChecks>
        @forelse ($contacts as $contact)
            @if ($loop->first)
                <x-slot:header>
                    <x-table.head.sort field="name" label="Name" width="30%" />
                    <x-table.head.sort field="city" label="Ort" width="20%" />
                    <x-table.head.sort field="status" label="Status" width="20%" />
                    <th>Newsletter</th>
                    <th></th>
                </x-slot:header>
            @endif

            <x-table.row :acc_id="$token" :row_id="$contact->id" :$toggleCollapse :$toggleChecks>
                <td>{{ $contact->name }}</td>
                <td>{{ $contact->city }}</td>
                <td><span class="badge text-bg-light border">{{ $contact->status->label() }}</span></td>
                <td>{!! $contact->newsletter ? '<i class="bi bi-check-lg text-success"></i>' : '' !!}</td>

                <x-slot:row2>
                    <td colspan="{{ $colspan - 2 }}">
                        <x-desc.list :item="$contact->only(['email', 'memo', 'created_at'])" />
                    </td>
                </x-slot:row2>
            </x-table.row>
        @empty
            <tr>
                <td colspan="{{ $colspan }}">Keine Kontakte gefunden.</td>
            </tr>
        @endforelse

        <x-slot:footer>
            <span class="small text-body-secondary">Markierte Zeilen werden als checks[] übertragen.</span>
        </x-slot:footer>
    </x-table>
</x-form>

{{ $contacts->links() }}

{{-- View der Livewire-Komponente App\Livewire\Demo\ContactListing (ListingTrait) --}}
<div>
    <div class="d-flex flex-wrap gap-2 mb-3">
        <x-button type="outline-secondary" class="btn-sm" click="reset_search">Alle Kontakte</x-button>
        <x-button type="outline-secondary" class="btn-sm" click="showNoData">Zustand „keine Daten“</x-button>
        <x-button type="outline-secondary" class="btn-sm" click="$toggle('showEmpty')">Zustand „leer“</x-button>
    </div>

    <x-card>
        {{-- Kartenkopf: Suche, Sortier-Dropdown und Select-Umschalter --}}
        @include('core::listing.card.headerLeft')

        <x-slot name="headerRight">
            <span class="badge text-bg-secondary">{{ $rows->total() }} Treffer</span>
        </x-slot>

        @if ($showEmpty)
            {{-- core::listing.empty ist derzeit eine leere Datei --}}
            @include('core::listing.empty')
            <p class="text-body-secondary small mb-0">core::listing.empty rendert (noch) nichts.</p>
        @else
            {{-- Tabellenansicht: Zeile 1 + aufklappbare Zeile 2 je Datensatz --}}
            <x-table class="table-sm" id="accordion-{{ $token }}">
                @forelse ($rows as $row)
                    @include('core::listing.table.row1')
                    @include('core::listing.table.row2')
                    @if ($loop->last && $rows->lastPage() > 1)
                        @include('core::listing.table.footer')
                    @endif
                @empty
                    @include('core::listing.nodata')
                @endforelse
            </x-table>
        @endif
    </x-card>
</div>

{{-- modal mit Slot button: Auslöse-Button und Modal in einem --}}
<x-modal modid="demoIndexModal" title="Einfaches Modal" type="outline-primary">
    <x-slot:button><i class="bi bi-window"></i> Modal öffnen</x-slot:button>

    Ohne footer-Slot zeigt das Modal einen Schließen-Button.
</x-modal>

{{-- Auslöser und Modal getrennt; class landet am .modal-dialog --}}
<x-modal.button modid="demoLargeModal" type="outline-secondary">Großes Modal</x-modal.button>

<x-modal modid="demoLargeModal" title="modal-lg mit eigenem Footer" class="modal-lg">
    Inhalt
    <x-slot:footer>
        <x-button.cancel label="Schließen" />
    </x-slot:footer>
</x-modal>

<div>
    {{-- modal.save: Standard-Footer mit Abbrechen und Speichern (wire:click="saveModal") --}}
    <x-modal.save modid="demoSaveModal" title="Datensatz speichern" btnSaving="Übernehmen" type="primary">
        <x-slot:button><i class="bi bi-save"></i> modal.save öffnen</x-slot:button>

        <x-wire.input field="name" label="Name" />
    </x-modal.save>
</div>

<div>
    {{-- modal.switch liest $modalName, $modalTitle, $modalSize, $modalSwitch
         (ModalTrait) – hier der Fall editField mit $modalField = 'memo' --}}
    <x-modal.button modid="demoSwitchModal" type="outline-primary">modal.switch öffnen</x-modal.button>

    @include('core::modal.switch')

    <p class="small text-body-secondary mt-3 mb-0">memo = „{{ $memo }}“</p>
</div>

{{-- modal.msg rendert die Modals #modalBestaetigung und #modalDatei. Das Layout
     bindet es bereits global ein (layout::parts.modals), deshalb hier nur die Auslöser. --}}
<div class="d-flex flex-wrap gap-2">
    <button type="button" class="btn btn-outline-danger" data-bs-toggle="modal" data-bs-target="#modalBestaetigung">
        <i class="bi bi-trash3"></i> Bestätigung
    </button>
    <button type="button" class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#modalDatei">
        <i class="bi bi-file-earmark"></i> Dokument anzeigen
    </button>
</div>

{{-- show.info: aufklappbare Übersicht eines Models samt geladener Relationen (hier props) --}}
<x-show.info :item="$contact" />

{{-- show.item: Schlüssel-Wert-Liste eines Arrays --}}
<x-show.item :item="$prop->only(['key', 'state', 'type', 'label', 'value'])" />

{{-- field.desc.*: x-desc.group (dl.row), x-desc (dt/dd), x-desc.list (Array) --}}
<div class="row">
    <div class="col-lg-6">
        <x-desc.group>
            <x-desc label="Name" value="Erika Mustermann" />
            <x-desc label="Kunde seit" :value="2019" />
            <x-desc label="Newsletter" :value="true" />
            <x-desc label="Slot">
                <span class="badge text-bg-success">aktiv</span>
            </x-desc>
        </x-desc.group>
    </div>
    <div class="col-lg-6">
        <x-desc.group size="sm">
            <x-desc label="size=sm" value="kleinere Schrift" />
        </x-desc.group>
        <x-desc.list :item="['iban' => 'DE00 0000 0000 0000 0000 00', 'label' => 'Privat', 'state' => 'verified', 'memo' => 'nur die ersten zwei']" :count="2" />
    </div>
</div>

<div class="d-flex flex-wrap gap-3 align-items-center mb-3">
    <x-icon name="star" size="sm" />
    <x-icon name="star-half" />
    <x-icon name="star-fill" size="lg" class="text-warning" />
    <x-icon name="emoji-smile" size="xl" class="text-success" />
    <x-icon />
</div>

{{-- counter: Laufzeit seit startTime (z. B. microtime(true) im Controller) --}}
<x-counter :startTime="microtime(true) - 0.0421" />