{{--
    Admin layout - the primary shell used by every authenticated ERP page.
    Contains: sidebar with primary nav, topbar with search + actions + user
    menu, and a content area with page header slot.
--}}
@extends('layouts.base')

@php
    $sidebarCollapsed = (bool) session('sidebar_collapsed', config('decent.ui.sidebar_collapsed'));
    $active = $active ?? request()->route()?->getName() ?? '';
@endphp

@section('body')
    <div class="dc-shell {{ $sidebarCollapsed ? 'is-collapsed' : '' }}" id="dc-shell">
        <x-nav.sidebar :active="$active" />

        <header class="dc-topbar no-print">
            <button type="button"
                    class="dc-btn dc-btn--ghost dc-btn--icon d-none d-lg-inline-flex"
                    data-action="toggle-sidebar"
                    aria-label="{{ __('Toggle sidebar') }}">
                <x-icon name="menu" />
            </button>

            <button type="button"
                    class="dc-btn dc-btn--ghost dc-btn--icon d-inline-flex d-lg-none"
                    data-action="open-mobile-drawer"
                    aria-label="{{ __('Open menu') }}">
                <x-icon name="menu" />
            </button>

            <div class="dc-topbar__search">
                <span class="dc-topbar__search-icon"><x-icon name="search" size="18" /></span>
                <input type="search"
                       placeholder="{{ __('Search anything… (Ctrl + K)') }}"
                       aria-label="{{ __('Search') }}">
            </div>

            <div class="dc-topbar__spacer"></div>

            <a href="{{ route('styleguide') }}" class="dc-topbar__action d-none d-md-inline-flex" title="{{ __('Design system') }}">
                <x-icon name="book" size="18" />
                <span class="d-none d-lg-inline">{{ __('Style guide') }}</span>
            </a>

            <x-nav.theme-toggle />

            <div class="dc-topbar__action" aria-hidden="true" title="{{ __('Notifications') }}">
                <x-icon name="bell" size="18" />
            </div>

            <div class="dc-topbar__action" title="{{ __('Guest') }}">
                <div class="dc-sidebar__brand-mark" style="width:28px;height:28px;font-size:.75rem;">G</div>
                <span class="d-none d-md-inline">{{ __('Guest') }}</span>
            </div>
        </header>

        <main id="dc-main" class="dc-content">
            <div class="dc-content__inner">
                @includeWhen(isset($breadcrumbs), 'components.nav.breadcrumbs', ['items' => $breadcrumbs ?? []])

                <div class="dc-page-header">
                    <div>
                        <h1 class="dc-page-title">@yield('page-title', $pageTitle ?? '')</h1>
                        @isset($pageSubtitle)
                            <div class="dc-page-subtitle">{{ $pageSubtitle }}</div>
                        @endisset
                    </div>
                    <div class="d-flex gap-2 flex-wrap">
                        @yield('page-actions')
                    </div>
                </div>

                @if (session('status'))
                    <div class="dc-alert dc-alert--success mb-4" role="status">
                        <x-icon name="check" size="18" />
                        <div>{{ session('status') }}</div>
                    </div>
                @endif

                @yield('content')
            </div>
        </main>

        <div class="dc-backdrop" data-action="close-mobile-drawer" aria-hidden="true"></div>
    </div>
@endsection