@extends('layouts.web')

@section('head-js')
    <script src="{{ asset('js/web/pages/news_show.js') }}" defer></script>
@endsection

@section('css')
    <link rel="stylesheet" href="{{ asset('css/web/pages/news_show.css') }}">
@endsection

@section('content')
    @component('web.components.layout.banner_pages', [
        'title' => $news->publication->title,
        'style' => 'background-image: url(' . asset('images/placeholder/web/banner-tratamentos.webp') . ')',
    ])
    @endcomponent
    @component('web.components.default.section', [
        'class' => 'news',
    ])
        <div class="col-lg-4 row gap-2 order-lg-0 order-last">
            @include('web.components.pages.news.menu')
        </div>

        <div class="col-lg-7 offset-0 offset-lg-1 p-4 p-lg-0">
            <div class="row">
                <div class="col-12 col-md-6 col-lg-12">
                    @if (!empty($news->cover->path))
                        <figure class="text-start news__image">
                            @include('web.components.default.medias.image', [
                                'media' => [
                                    'path' => $news->cover->path,
                                    'placeholder' => 'images/placeholder/web/logo-placeholder.png',
                                    'alt' => 'Ícone do tratamento de ' . $news->publication->title,
                                    'class' => 'w-100',
                                ],
                            ])
                        </figure>
                    @endif
                </div>

                <div class="col-12 col-md-6 col-lg-12">
                    <h2 class="news__title">{{ $news->publication->title }}</h2>
                    <div class="news__content">
                        {!! $news->publication->content !!}
                    </div>
                </div>
            </div>
        </div>
        <div class="col-lg-12">
            @includeWhen($news->gallery_count > 0, 'web.components.default.publication.publication_gallery', [
                'slide' => [
                    'class' => 'news-splide mt-5',
                    'id' => 'gallery',
                    'slides' => $news->gallery_count,
                ],
                'medias' => $news->gallery,
            ])
        </div>
    @endcomponent
@endsection