<div>
    <section class="pt-0 cover-background ipad-top-space-margin sm-pb-0"
        style="background-image:
      linear-gradient(rgba(0,0,0,0.45), rgba(0,0,0,0.45)),
      url('{{ $news->thumbnail }}');">
        <div class="shape-image-animation bottom-0 p-0 w-100 d-none d-md-block">
            <svg xmlns="http://www.w3.org/2000/svg" widht="3000" height="400" viewBox="0 180 2500 200" fill="#ffffff">
                <path class="st1" d="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250">
                    <animate attributeName="d" dur="5s"
                        values="M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 400 50 400 400 3000 250 L 3000 550 L 0 550 L 0 250;
                            M 0 250 C 1200 400 1200 50 3000 250 L 3000 550 L 0 550 L 0 250"
                        repeatCount="indefinite" />
                </path>
            </svg>
        </div>
        <div class="container">
            <div class="row align-items-center justify-content-center h-500px sm-h-300px">
                <div class="col-12 col-lg-6 col-md-10 position-relative text-center page-title-extra-large d-flex flex-wrap flex-column align-items-center justify-content-center"
                    data-anime='{ "el": "childs", "translateY": [30, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                    <span
                        class="ps-25px pe-25px pt-5px pb-5px mb-15px text-uppercase text-white fs-12 ls-1px fw-600 border-radius-100px bg-gradient-dark-gray-transparent d-flex"><i
                            class="bi bi-megaphone text-white icon-small me-10px"></i>{{ $pageTitle }}</span>
                    <h5 class="mb-20px text-white fw-600 ls-minus-1px">{{ $pageDescription }}</h5>
                </div>
            </div>
        </div>
    </section>

    <!-- start section -->
    <section class="p-0">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-10 overlap-section text-center">
                    <div class="p-10 box-shadow-extra-large border-radius-4px bg-white text-center">
                        @foreach ($news->categories as $category)
                            <a href="{{ route('news.index', ['category' => $category->id]) }}"
                                class="bg-solitude-blue text-uppercase fs-13 ps-25px pe-25px alt-font fw-500 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-3 sm-mb-15px">{{ $category->name }}</a>
                        @endforeach
                        <h3 class="alt-font text-dark-gray fw-600 ls-minus-1px mb-15px">{{ $news->title }}</h3>
                        <div class="lg-20px sm-mb-0">
                            <span>{{ $news->author_name }}</span>
                            <span class="ms-10px">{{ $news->formatted_date }}</span>
                            <span class="ms-10px"><i class="feather icon-feather-eye"></i>
                                {{ $news->formatted_views }}</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->

    <!-- start section -->
    <section class="overlap-section text-center p-0 sm-pt-30px">
        <img class="rounded-circle box-shadow-extra-large w-130px h-130px border border-8 border-color-white"
            src="{{ $news->author_avatar }}" alt="{{ $news->author_name }}">
    </section>
    <!-- end section -->

    <!-- start section -->
    <section class="pb-0 pt-3">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-9 last-paragraph-no-margin"
                    data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                    <div class="text-medium-gray entry-content">
                        {!! $news->content !!}
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->

    <!-- start section -->
    <section class="half-section pb-0">
        <div class="container">
            <div class="row justify-content-center">
                <div class="col-lg-9"
                    data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 1200, "delay": 0, "staggervalue": 150, "easing": "easeOutQuad" }'>
                    <div class="row mb-30px">
                        <div class="tag-cloud col-md-12 text-center text-md-start sm-mb-15px">
                            @foreach ($news->tags as $tag)
                                <a href="{{ route('news.index', ['tag' => $tag->name]) }}">{{ $tag->name }}</a>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->

    <!-- start section -->
    <section class="bg-solitude-blue position-relative sm-pb-20px mt-5">
        <div class="container">
            <div class="row justify-content-center mb-1">
                <div class="col-lg-7 text-center">
                    <span
                        class="bg-white box-shadow-quadruple-large text-uppercase fs-13 ps-25px pe-25px alt-font fw-600 text-base-color lh-40 sm-lh-55 border-radius-100px d-inline-block mb-25px"
                        data-anime='{ "translateY": [30, 0], "opacity": [0,1], "delay": 500, "staggervalue": 100, "easing": "easeOutQuad" }'>Mungkin
                        Anda suka</span>
                    <h3 class="alt-font text-dark-gray fw-600 ls-minus-1px"
                        data-anime='{ "el": "lines", "translateY": [30, 0], "opacity": [0,1], "delay": 500, "staggervalue": 100, "easing": "easeOutQuad" }'>
                        Berita Terkait</h3>
                </div>
            </div>
            <div class="row">
                <div class="col-12 px-0">
                    <ul class="blog-classic blog-wrapper grid grid-4col xl-grid-4col lg-grid-3col md-grid-2col sm-grid-2col xs-grid-1col gutter-double-extra-large"
                        data-anime='{ "el": "childs", "translateY": [50, 0], "opacity": [0,1], "duration": 600, "delay": 0, "staggervalue": 300, "easing": "easeOutQuad" }'>
                        <li class="grid-sizer"></li>
                        @foreach ($relatedNews as $related)
                            <!-- start blog item -->
                            <li class="grid-item">
                                <div class="card bg-transparent border-0 h-100">
                                    <div class="blog-image position-relative overflow-hidden border-radius-4px">
                                        <a href="{{ route('news.show', $related->slug) }}"><img
                                                src="{{ $related->thumbnail }}" alt="{{ $related->title }}"
                                                class="w-100" /></a>
                                    </div>
                                    <div class="card-body px-0 pb-30px pt-30px xs-pb-15px last-paragraph-no-margin">
                                        <span class="fs-13 text-uppercase mb-5px d-block">
                                            @if ($related->primary_category)
                                                <a href="{{ route('news.index', ['category' => $related->primary_category->id]) }}"
                                                    class="text-dark-gray fw-500 categories-text">{{ $related->primary_category->name }}</a>
                                            @endif
                                            <a href="javascript:void(0)"
                                                class="blog-date">{{ $related->formatted_date }}</a>
                                        </span>
                                        <a href="{{ route('news.show', $related->slug) }}"
                                            class="card-title mb-0 fw-500 fs-18 lh-30 text-dark-gray d-inline-block">{{ $related->title }}</a>
                                    </div>
                                </div>
                            </li>
                            <!-- end blog item -->
                        @endforeach
                    </ul>
                </div>
            </div>
        </div>
    </section>
    <!-- end section -->
</div>
