@extends('layouts.Article')
@section('bodyClass', 'article')

@section('meta')
    @include('partials.meta')
@endsection

@section('welcome-title')
    <h1
        class='inline-block font-bold text-lg leading-10 text-white xs:text-2xl xs:leading-10 laptop:text-[37px] laptop:py-10   '>
        {{ $page->title }}
    </h1>
@endsection


@section('content')
    <div class="article_wrapper h-full flex flex-col hd:flex-row hd:gap-8 pt-[10px] !pr-5" >
        <div>
            <p>Posted by AOLCC | {{ $page->published_at->format('jS F Y') }}</p>
            @if (isset($page->image))
                <img loading="lazy" src ="/storage/{{ $page->image }}" alt="hero image">
            @endif
            {!! $page->content !!}
        </div>
        <div class="bg-teal max-w-[410px] flex-grow mt-2">
            <div class='p-4 mobile:p-6 m-auto  '>
                <x-form.side-form />
            </div>
            <div class='lazyframe p-4 mobile:p-6 pt-0 w-full  '>
                <iframe id="video-player" loading="lazy" title='youtube vid about integrated learning system'
                    src="" frameborder="0" allowfullscreen="allowfullscreen"
                    class='!rounded-none w-full aspect-video cursor-pointer'></iframe>
            </div>
        </div>
        {{-- <div class='max-w-[400px] m-auto hd:hidden shadow-[2px_0px_20px_rgba(0,0,0,.2)] '>
            <div class='py-6'>
                <x-form.side-form /> 
            </div>
        </div>  --}}
    </div>
    <a href="{{ url()->previous() }}">Back</a>

@endsection