@extends('layouts.app')

@section('content')
    @php
        $banner = !empty($menu->szBannerImage)
            ? asset('uploads/abouts/' . $menu->szBannerImage)
            : asset('uploads/abouts/brief.jpg');
    @endphp

    <section class="page-banner position-relative d-flex align-items-end" style="background-image:url('{{ $banner }}');
               background-position:center;
               background-size:cover;
               background-repeat:no-repeat;
               min-height:450px;">
        <div class="position-absolute top-0 start-0 w-100 h-100 banner-overlay"></div>

        <div class="container position-relative text-white pb-5">
            <h1 class="display-3 fw-bold mb-3">
                {{ $szType }}
            </h1>
            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            {{ __('messages.home') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#" class="text-white text-decoration-none">
                            {{ fixed('Office corner', 'कार्यालय केंद्र') }}
                        </a>
                    </li>
                    <li class="breadcrumb-item">
                        <a href="#" class="text-warning text-decoration-none">
                            {{ $szType }}
                        </a>
                    </li>
                </ol>
            </nav>
        </div>
    </section>
    <section class="background-section py-5">
        <div class="container">
            <div class="background-card">
                <livewire:officer-page :slug="$slug" />
            </div>
        </div>

    </section>
@endsection