@props([
    'title' => '-',
    'author' => '',
    'excerpt1' => '-',
    'excerpt2' => '',
    'image' => '',
    'facebook_url',
    'twitter_url',
    'youtube_url',
    'show_time',
])

<div class="bg-grad-header overflow-x-hidden">
    <x-sections.header-top />

    <div class="relative pt-10">
        <div class="container-3 lg:flex pt-10 lg:pt-2">
            <div class="mx-auto lg:mx-0 max-w-2xl lg:w-3/5">
                <h1 class="h2 md:h1 text-white pb-9 text-center lg:text-left">{{ $title }}</h1>
            </div>
            <div class="relative mx-auto w-60 h-32 lg:w-2/5 lg:ml-24">
                <div
                    class="lg:absolute w-full aspect-square bg-cover bg-center bg-no-repeat"
                    style="background-image: url({{ $image }})"
                ></div>
            </div>
        </div>
        <div class="bg-grad-more-alt lg:bg-grad-more">
            <div class="h-32 lg:h-0"></div>
            <div class="container-3">
                <div class="mx-auto lg:mx-0 max-w-2xl lg:w-3/5 prose text-white pt-5 pb-9 lg:min-h-[270px]">
                    <div x-data="{ expanded: false }">
                        <span class="[&_a]:text-white [&_a]:underline">
                            {!! $excerpt1 !!}
                            @if(!empty($excerpt2))
                                <button
                                    x-show="!expanded"
                                    class="underline font-semibold text-white"
                                    @click="expanded = ! expanded"
                                >
                                    Show More
                                </button>
                            @endif
                        </span>
                        @if(!empty($excerpt2))
                            <div class="transition-all max-h-0 overflow-hidden" :class="{'max-h-[200px]': expanded}">
                                <br />
                                <span>
                                    {!! $excerpt2 !!}
                                 <button
                                     x-show="expanded"
                                     class="underline font-semibold text-white"
                                     @click="expanded = !expanded"
                                 >
                                    Show Less
                                </button>
                                </span>
                            </div>
                        @endif
                    </div>

                    @if(!empty($author))
                        <p class="[&_a]:text-white [&_a]:underline">
                            Presented by {!! $author !!}
                        </p>
                    @endif

                    @if(!empty($show_time))
                        <div class="h4 text-white">
                            {{ $show_time }}
                        </div>
                    @endif

                    <div class="justify-center md:justify-start pt-4 -ml-4">

                        @if(!empty($facebook_url))
                        <a
                            target="_blank"
                            href="{{ $facebook_url }}"
                            class="p-2 hover:opacity-90 btn-on-dark"
                        >
                            <x-icon name="social-facebook" size="1.8rem" class="text-white" />
                        </a>
                        @endif

                        @if(!empty($twitter_url))
                        <a
                            target="_blank"
                            href="{{ $twitter_url }}"
                            class="p-2 hover:opacity-90 btn-on-dark"
                        >
                            <x-icon name="social-twitter" size="2rem" class="text-white" />
                        </a>
                        @endif

                        @if(!empty($youtube_url))
                        <a
                            target="_blank"
                            href="{{ $youtube_url}}"
                            class="p-2 hover:opacity-90 btn-on-dark"
                        >
                            <x-icon name="social-youtube" size="1.8rem" class="text-white" />
                        </a>
                        @endif
                    </div>

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

    {{ $slot ?? '' }}

    @push('head.bottom')
        <link
            rel="stylesheet"
            href="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.css"
        />
    @endpush
    @push('body.bottom')
        <script src="https://cdn.jsdelivr.net/npm/swiper@8/swiper-bundle.min.js"></script>
        <script>

        </script>
    @endpush
</div>