@props([
    'title',
    'subtitle' => null,
    'crumbs' => [],
    'backUrl',
    'action',
    'method' => 'POST',
    'formId' => 'adminForm',
    'submitLabel' => 'Save',
    'submitLabelId' => null,
    'enctype' => null,
    'wide' => false,
])

@pushOnce('styles', 'admin-form-page-css')
<link rel="stylesheet" href="{{ asset('css/admin-product-form.css') }}">
@endPushOnce

@php
    $httpMethod = strtoupper($method);
    $spoof = ! in_array($httpMethod, ['GET', 'POST'], true);
@endphp

<div class="pp-page tw-migrated">
    @if (count($crumbs))
        <nav class="pp-crumb" aria-label="Breadcrumb">
            @foreach ($crumbs as $i => $crumb)
                @if ($i > 0)<span class="pp-crumb__sep">/</span>@endif
                @php
                    $label = is_array($crumb) ? ($crumb['label'] ?? '') : (string) $crumb;
                    $url = is_array($crumb) ? ($crumb['url'] ?? null) : null;
                    $isLast = $i === array_key_last($crumbs);
                @endphp
                @if ($url && ! $isLast)
                    <a href="{{ $url }}">{{ $label }}</a>
                @else
                    <span @class(['pp-crumb__current' => $isLast])>{{ $label }}</span>
                @endif
            @endforeach
        </nav>
    @endif

    <div class="pp-header">
        <div>
            <h1>{{ $title }}</h1>
            @if ($subtitle)
                <p class="pp-header__sub">{{ $subtitle }}</p>
            @endif
        </div>
        <div class="pp-header__actions">
            <a href="{{ $backUrl }}" class="pp-btn pp-btn--ghost">
                <i class="bi bi-arrow-left"></i> Back
            </a>
            <button type="submit" form="{{ $formId }}" class="pp-btn pp-btn--primary" @if ($submitLabelId) id="{{ $submitLabelId }}" @endif>
                <i class="bi bi-save"></i> <span class="pp-submit-label">{{ $submitLabel }}</span>
            </button>
        </div>
    </div>

    @if ($errors->any())
        <x-ui.alert type="danger" class="mb-3">
            <ul class="mb-0">@foreach ($errors->all() as $e)<li>{{ $e }}</li>@endforeach</ul>
        </x-ui.alert>
    @endif

    <form
        id="{{ $formId }}"
        action="{{ $action }}"
        method="{{ $spoof ? 'POST' : $httpMethod }}"
        @if ($enctype) enctype="{{ $enctype }}" @endif
    >
        @csrf
        @if ($spoof)
            @method($httpMethod)
        @endif

        <div class="pp-layout" @if ($wide) style="grid-template-columns: 1fr;" @endif>
            <div class="pp-main">
                {{ $slot }}
            </div>

            @unless ($wide)
                <aside class="pp-aside">
                    @isset($aside)
                        {{ $aside }}
                    @else
                        <section class="pp-card">
                            <div class="pp-card__head">
                                <span class="pp-card__icon pp-card__icon--summary"><i class="bi bi-tags"></i></span>
                                <div>
                                    <h2 class="pp-card__title">Summary</h2>
                                </div>
                            </div>
                            <div class="pp-card__body">
                                @isset($summary)
                                    {{ $summary }}
                                @else
                                    <p class="pp-hint mb-3">Review the details, then save when ready.</p>
                                @endisset
                                <button type="submit" class="pp-btn pp-btn--primary pp-btn--block">
                                    <i class="bi bi-save"></i> <span class="pp-submit-label">{{ $submitLabel }}</span>
                                </button>
                            </div>
                        </section>
                    @endisset
                </aside>
            @endunless
        </div>
    </form>
</div>
