@extends('layouts.app')

@section('title', $singleRecord->title ?? $Title)

@section('content')
<main>
    <section class="sec-1-single-1 pb-70">
        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-lg-1 offset-md-1">
                    <nav aria-label="breadcrumb">
                        <ul class="breadcrumb list-unstyled d-flex flex-row gap-2 align-items-center m-0 ps-0 py-4">
                            <li class="breadcrumb-item"><a href="{{ url('/') }}" class="text-600 fs-7 hover-dark">Home</a></li>

                            <li class="breadcrumb-item">
                                <span class="icon-shape icon-xxs">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                            </li>

                            <li class="breadcrumb-item">
                                <a href="#" class="text-600 fs-7 hover-dark">Pages</a>
                            </li>

                            <li class="breadcrumb-item">
                                <span class="icon-shape icon-xxs">
                                    <svg xmlns="http://www.w3.org/2000/svg" width="15" height="15" viewBox="0 0 15 15" fill="none">
                                        <path d="M6.125 4.5625L9.5625 7.84375L6.125 11.125" stroke="#626568" stroke-width="0.9375" stroke-linecap="round" stroke-linejoin="round" />
                                    </svg>
                                </span>
                            </li>

                            <li class="breadcrumb-item active text-dark fs-7" aria-current="page">
                                {{ $singleRecord->title ?? 'Page' }}
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </div>

        {{-- Feature Image --}}
        <div class="custom-container-2 py-5">
            @if(!empty($singleRecord->image))
            <img class="rounded-16 w-100"
                src="{{ asset( (\Illuminate\Support\Str::startsWith($singleRecord->image, ['http','/'])) ? $singleRecord->image : 'storage/'.$singleRecord->image ) }}"
                alt="{{ $singleRecord->title ?? 'Page image' }}" />
            @else
            <img class="rounded-16 w-100" src="{{ asset('assets/imgs/page/img-112.png') }}" alt="{{ $singleRecord->title ?? 'Page image' }}" />
            @endif
        </div>

        <div class="container">
            <div class="row">
                <div class="col-lg-9 col-md-10 offset-lg-1 offset-md-1">
                    <div class="d-flex flex-column gap-3">

                        {{-- Title --}}
                        <h1 class="mb-0">{{ $singleRecord->title ?? "" }}</h1>

                        {{-- Intro / excerpt --}}
                        @if(!empty($singleRecord->short_description))
                        <p class="text-dark">{!! $singleRecord->short_description !!}</p>
                        @endif

                        {{-- Body content (allow HTML) --}}
                        <div class="article-content text-dark">
                            {!! $singleRecord->description !!}
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </section>

</main>
@endsection