@extends('website.layouts.app')

@section('meta_title', "Techne | $page->title")
@section('meta_description', $page->min_description)
{{-- @section('meta_keywords','Techne') --}}
{{-- @foreach ($page->seos as $seo)
    @section($seo->key, $seo->value)
@endforeach --}}

@section('content')

    @if (! empty($page->title) || ! empty($page->min_description) || ! empty($page->coverImage))
        <section class="page-top wrapper @if ($page->coverImage) image-wrapper bg-image bg-overlay @else bg-color4 @endif" id="pageTopSection"
            @if ($page->coverImage)
                data-image-src="{{ asset('storage/'.($page->coverImage->thumbnail ?? $page->coverImage->path)) }}"
                style="background-attachment: fixed !important; background-repeat: no-repeat; background-position: center center; background-size: cover;"
            @endif
        >
            <div class="container py-10 py-md-14 text-center text-white">
                <div class="row">
                    <div class="col-12col-md-10 col-xl-8 mx-auto">
                        <h1 class="fs-48 fw-bold text-white text-uppercase mb-3">{{ $page->title }}</h1>

                        @if(! empty($page->min_description))
                            <div class="mb-4">
                                {!! nl2br($page->min_description) !!}
                            </div>
                        @endif
                    </div>
                </div>
            </div>
        </section>
    @endif

    @if(! empty($page->description))
        <section class="wrapper" id="pageContentSection">
            <div class="container py-9">
                <div class="page-body ">
                    {!! html_entity_decode($page->description) !!}
                </div>
            </div>
        </section>
    @endif

    @if (count($pageLogosCategories))
        @include('website.sections.logos-by-category', ['eventLogosCategories' => $pageLogosCategories])
    @endif

    @if (! empty($page->link))
        <div class="container-fluid g-0">
            <div class="row">
                <div class="col-auto mx-auto w-100">
                    <iframe src="{{ $page->link }}" frameborder="0" scrolling="yes" class="w-100" style="height: 1000px;"></iframe> 
                </div>
            </div>
        </div>
    @endif

    @if (! empty($page->iframe))
        <div class="container-fluid">
            <div class="row">
                <div class="col-auto mx-auto w-100">
                    {!! $page->iframe !!}
                </div>
            </div>
        </div>
    @endif

@endsection