<!DOCTYPE html>
@php($pageLanguageDirection = ($activeLanguage ?? null)?->direction ?? 'ltr')
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" dir="{{ $pageLanguageDirection }}" class="density-comfortable layout-sidebar container-fluid {{ $pageLanguageDirection === 'rtl' ? 'dir-rtl' : 'dir-ltr' }}">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="phone-country-code" content="{{ old('phone_country_code', \App\Support\PhoneNumber::countryCode()) }}">
    <meta name="theme-color" content="#ffffff">

    <title>@yield('title', __('ui.dashboard')) — {{ config('app.name', 'Microfinance') }}</title>

    <link rel="icon" href="{{ asset('favicon.ico') }}">
    <link rel="preload" href="{{ asset('assets/zenith/media/569ce4b8f30dc480-s.p.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="preload" href="{{ asset('assets/zenith/media/93f479601ee12b01-s.p.woff2') }}" as="font" type="font/woff2" crossorigin>
    <link rel="stylesheet" href="{{ asset('assets/zenith/css/fonts.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/zenith/css/theme.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/app.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/forms.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/phone.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/ui.css') }}">
    <link rel="stylesheet" href="{{ asset('assets/microfinance/sidebar-toggle.css') }}">
    @stack('styles')
</head>
<body class="__variable_489c90 __variable_508d3e antialiased">
    <a href="#main-content" class="sr-only focus:not-sr-only focus:fixed focus:top-4 focus:left-4 focus:z-50 focus:rounded-lg focus:bg-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-primary-foreground">{{ __('ui.skip_to_content') }}</a>

    <div class="mf-shell">
        @include('layouts.partials.sidebar', ['mobile' => false])

        <div data-mobile-overlay class="mf-mobile-overlay lg:hidden"></div>
        <aside data-mobile-drawer class="mf-mobile-drawer bg-sidebar lg:hidden">
            @include('layouts.partials.sidebar', ['mobile' => true])
        </aside>

        <div class="mf-content min-h-screen">
            @include('layouts.partials.topbar')

            <main id="main-content" class="mf-page">
                @if (session('success'))
                    <div class="mb-4 rounded-md border border-success/20 bg-success/10 px-4 py-3 text-sm text-success">{{ session('success') }}</div>
                @endif
                @if (session('error'))
                    <div class="mb-4 rounded-md border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">{{ session('error') }}</div>
                @endif
                @if ($errors->any())
                    <div class="mb-4 rounded-md border border-destructive/20 bg-destructive/10 px-4 py-3 text-sm text-destructive">
                        @if ($errors->count() === 1)
                            {{ $errors->first() }}
                        @else
                            <strong>{{ __('ui.please_review_following') }}</strong>
                            <ul class="mt-1 list-disc space-y-1 pl-5">
                                @foreach (array_unique($errors->all()) as $message)
                                    <li>{{ $message }}</li>
                                @endforeach
                            </ul>
                        @endif
                    </div>
                @endif

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

    @if (request()->routeIs('loans.create'))
        @include('loans.partials.inline-create-modals')
    @endif

    <script src="{{ asset('assets/microfinance/app.js') }}" defer></script>
    <script src="{{ asset('assets/microfinance/sidebar-toggle.js') }}" defer></script>
    @stack('scripts')
</body>
</html>
