@extends('layouts.app')

@section('content')
    @php
        $banner = !empty($page->szBannerImage)
            ? asset('uploads/abouts/' . $page->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">

            <span class="page-tag">
                About ZSI
            </span>

            <h1 class="display-3 fw-bold mb-3">
                {{ $page->szPageTitle }}
            </h1>

            <nav>
                <ol class="breadcrumb mb-0">
                    <li class="breadcrumb-item">
                        <a href="{{ url('/') }}" class="text-white text-decoration-none">
                            Home
                        </a>
                    </li>

                    <li class="breadcrumb-item active text-warning">
                        {{ $page->szPageTitle }}
                    </li>
                </ol>
            </nav>

        </div>

    </section>


    <section class="background-section py-5">

        <div class="container">

            <div class="background-card">

                <div class="section-heading">

                    <div class="heading-icon">
                        <i class="fas fa-globe-asia"></i>
                    </div>

                    <div>
                        <span>Zoological Survey of India</span>
                        <h2>{{ $page->szPageTitle }}</h2>
                    </div>

                </div>

                <div class="background-content">

                    @if (!empty($page->szPageContent))
                        {!! $page->szPageContent !!}
                    @else
                        <p class="text-center">
                            Data will be updated soon.
                        </p>
                    @endif

                </div>

            </div>

            <div class="text-end mt-4">

                <a href="javascript:history.back()" class="btn btn-success">

                    <i class="fas fa-arrow-left me-2"></i>

                   {{__('messages.previous')}}

                </a>

            </div>

        </div>

    </section>
@endsection