@extends('layouts.app')

@section('title', $article->title.' | '.$siteSettings['site_name'])
@section('description', $article->description)
@section('canonical', route('articles.show', $article->slug))

@push('head')
    <link rel="stylesheet" href="{{ asset('css/editor-enhancements.css') }}">
    <meta property="og:type" content="article">
    <meta property="og:title" content="{{ $article->title }}">
    <meta property="og:description" content="{{ $article->description }}">
    <meta property="og:image" content="{{ $article->imageUrl() }}">
    <meta property="og:url" content="{{ route('articles.show', $article->slug) }}">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="{{ $article->title }}">
    <meta name="twitter:description" content="{{ $article->description }}">
    <meta name="twitter:image" content="{{ $article->imageUrl() }}">
@endpush

@section('content')
@if($siteTemplate)
    @include('templates.'.$siteTemplate.'.article')
@else
<div class="container article-page">
    <nav class="breadcrumbs" aria-label="مسار الصفحة"><a href="{{ route('home') }}">الرئيسية</a><span>/</span>@if($article->category)<a href="{{ route('categories.show', $article->category->slug) }}">{{ $article->category->name }}</a><span>/</span>@endif<span>الخبر</span></nav>
    <header class="article-header article-hero">
        @if($article->category)<a class="category-label" href="{{ route('categories.show', $article->category->slug) }}">{{ $article->category->name }}</a>@endif
        <h1>{{ $article->title }}</h1>
        @if($article->subtitle)<p class="article-subtitle">{{ $article->subtitle }}</p>@endif
        <div class="article-hero-meta"><span>كل الخبر</span><time datetime="{{ $article->published_at?->toAtomString() }}">{{ $article->published_at?->translatedFormat('j F Y') }}</time></div>
    </header>
    <div class="article-layout">
        <article class="article-main">
            <figure class="article-cover"><img src="{{ $article->imageUrl() }}" alt="{{ $article->main_image_caption ?: $article->title }}" decoding="async">@if($article->main_image_caption)<figcaption>{{ $article->main_image_caption }}</figcaption>@endif</figure>
            <div class="share-row" aria-label="مشاركة الخبر">
                <span>شارك:</span>
                <a target="_blank" rel="noopener" href="https://www.facebook.com/sharer/sharer.php?u={{ urlencode(url()->current()) }}">فيسبوك</a>
                <a target="_blank" rel="noopener" href="https://twitter.com/intent/tweet?url={{ urlencode(url()->current()) }}&text={{ urlencode($article->title) }}">إكس</a>
                <a target="_blank" rel="noopener" href="https://wa.me/?text={{ urlencode($article->title.' '.url()->current()) }}">واتساب</a>
            </div>
            <div class="article-content">
                @if($article->editor_content)
                    {!! $article->editor_content !!}
                @elseif($article->contentBlocks->isNotEmpty())
                    @foreach($article->contentBlocks as $block)<x-article-block :block="$block" />@endforeach
                @else
                    @foreach(preg_split('/\R{2,}/u', trim($article->content_text ?? '')) as $paragraph)
                        @if($paragraph)<p>{{ $paragraph }}</p>@endif
                    @endforeach
                @endif
            </div>
            @include('comments._form', ['article' => $article])
        </article>
        @if($article->tags->isNotEmpty())
        <aside class="article-aside">
                <section class="article-tag-rail" aria-labelledby="article-tags-title">
                    <h2 id="article-tags-title">وسوم الخبر</h2>
                    <p>موضوعات مرتبطة بهذا الخبر</p>
                    <div class="article-tag-list" role="list">
                        @foreach($article->tags as $tag)<a role="listitem" href="{{ route('tags.show', $tag->slug) }}">#{{ str_replace(' ', '_', $tag->name) }}</a>@endforeach
                    </div>
                </section>
        </aside>
        @endif
    </div>
    @if($related->isNotEmpty())
        <section class="related-news"><div class="section-heading"><h2>أخبار ذات صلة</h2></div><div class="related-grid">@foreach($related as $item)<x-news-card :article="$item" size="standard" />@endforeach</div></section>
    @endif
</div>
@endif
@endsection