@extends('layout.app')

@section('content')
    <!-- section start -->
    <section class="masthead -blog js-masthead-blog-article" data-parallax="0.7">
        <!-- masthead__img start -->
        <div class="masthead__img overlay-black-md" data-parallax-target>
            <div class="bg-image js-lazy" data-bg="{{ Storage::url($article->article_image_path) }}"></div>
        </div>
        <!-- masthead__img end -->

        <!-- masthead__content start -->
        <div class="masthead__content">
            <div class="container">
            <div class="row">
                <div class="col-xl-9 col-lg-10">
                <div class="d-flex align-items-center text-white js-info">
                    <div class="masthead__date">
                        <a href="#">{{ $article->created_at->diffForHumans() }}</a>
                    </div>

                    <div class="masthead__line bg-white mr-16 ml-16"></div>

                    <div class="masthead__tags">
                        @foreach ($article->categories as $category)
                            @if (!$loop->last)
                                <a href="#">{{ $category->name }}</a>,
                            @else
                                <a href="#">{{ $category->name }}</a>
                            @endif
                        @endforeach
                    </div>
                </div>

                <div data-split="lines">
                    <h1 class="masthead__title text-white fw-600 leading-md mt-40 md:mt-24 js-title">
                        {{ $article->title }}
                    </h1>
                </div>
                </div>
            </div>
            </div>
        </div>
        <!-- masthead__content end -->
    </section>
    <!-- section end -->
        
        
    <!-- section start -->
    <section class="layout-pt-md layout-pb-lg">
        <!-- container start -->
        <div class="container">
            <!-- row start -->
            <div class="row no-gutters justify-content-between">
            <div class="col-lg-12">
                <div class="blogPost -single -light">
                    <div class="blogPost__content">
                        @if($article->excerpt)
                            <div class="article-excerpt mb-4 p-4 bg-light rounded">
                                <h6>Summary:</h6>
                                <p>{{ $article->excerpt }}</p>
                            </div>
                        @endif
                        
                        <div class="html-article-content">
                            {!! $article->content !!}
                        </div>
                    </div>
                </div>
            </div>

            <div class="col-lg-12 mt-5">
                <aside class="blogSidebar widget_area">
                    <!-- widget start -->
                    <div class="widget widget_recent_entries">
                        <h5 class="widget-title">
                        Recent Posts
                        </h5>

                        <ul>
                            @foreach ($recentArticles as $recentArticle)
                                <li>
                                    <span class="post-date">{{ $recentArticle->created_at->diffForHumans() }}</span>
                                    <a href="{{ route('articles.show', $recentArticle) }}">
                                        {{ $recentArticle->title }}
                                    </a>
                                </li>  
                            @endforeach
                        </ul>
                    </div>
                    <!-- widget end -->
                </aside>
            </div>
            </div>
            <!-- row end -->
        </div>
        <!-- container end -->
    </section>
    <!-- section end -->
@endsection

@push('styles')
<style>
.html-article-content {
    line-height: 1.8;
}
.html-article-content h1, .html-article-content h2, .html-article-content h3 {
    margin-top: 2rem;
    margin-bottom: 1rem;
}
.html-article-content p {
    margin-bottom: 1.5rem;
}
.html-article-content img {
    max-width: 100%;
    height: auto;
    margin: 1rem 0;
}
.html-article-content pre {
    background: #f8f9fa;
    padding: 1rem;
    border-radius: 0.375rem;
    overflow-x: auto;
}
.html-article-content code {
    background: #f8f9fa;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-family: monospace;
}
</style>
@endpush