@extends('layouts.users')

@section(
    'meta_title',
    $article->articleDetail->meta_title ?? $article->title . ' - PT PLN Nusantara Power'
)

@section(
    'meta_description',
    $article->articleDetail->meta_description
        ?? Str::limit(strip_tags($article->articleDetail->content ?? ''), 155)
)

@section('content')

<section class="show-article">
    <div class="article-container">

        <!-- Breadcrumb -->
        <div class="article-breadcrumb" data-aos="fade-up">
            <a href="{{ route('home') }}">Home</a>
            <span>/</span>
            <a href="#">{{ $article->learningPath->title }}</a>
            <span>/</span>
            <span class="active">{{ $article->title }}</span>
        </div>

        <!-- Card -->
        <div class="article-card">

            <!-- Judul -->
            <h1 class="article-title" data-aos="fade-up" data-aos-delay="100">
                {{ $article->title }}
            </h1>


            <!-- Info -->
           <p class="article-meta" data-aos="fade-up" data-aos-delay="200">
                Learning Path:
                <strong>{{ $article->learningPath->title }}</strong>
            </p>

            <!-- Thumbnail -->
            <div class="article-thumbnail" data-aos="fade-up" data-aos-delay="300">
                @if ($article->articleDetail && $article->articleDetail->thumbnail)
                    <img src="{{ asset('storage/' . $article->articleDetail->thumbnail) }}"
                        alt="{{ $article->title }}">
                @else
                    <img src="{{ asset('users/assets/img/notfond.png') }}"
                        alt="{{ $article->title }}">
                @endif
            </div>

            <!-- Konten -->
            <div class="article-content">
                {!! $article->articleDetail->content ?? '<p>Konten belum tersedia.</p>' !!}
            </div>

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

@endsection