@extends('home.layouts.index')

@section('title')
    {{ $article->title }}
@endsection

@section('keywords')
    {{ $article->meta_key }}
@endsection

@section('style')
    <style>
        :root {
            --primary-red: #be132d;
            --dark-bg: #1e1e1e;
            --text-primary: #ffffff;
            --text-secondary: #cccccc;
            --content-bg: #2a2a2a;
        }

        @font-face {
            font-family: dana;
            src: url("./assets/fonts/dana-medium.woff2");
        }

        body {
            margin: 0;
            font-family: "Vazirmatn", sans-serif;
            background-color: var(--dark-bg);
            color: var(--text-primary);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            box-sizing: border-box;
            font-family: "dana", "Tahoma", "Arial", sans-serif;
            background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
            min-height: 100%;
            font-size: 14px;
            overflow-x: hidden;
        }

        /* Post Header */
        .post-header {
            height: 50vh;
            min-height: 400px;
            background-image: linear-gradient(
                rgba(0, 0, 0, 0.5),
                rgba(0, 0, 0, 0.5)
            ),
            url("https://images.unsplash.com/photo-1521737711867-e3b97375f902?q=80&w=1974&auto=format&fit=crop");
            background-position: center;
            background-repeat: no-repeat;
            background-size: cover;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            /* padding: 0 2rem; */
        }

        .post-title {
            font-size: 1.5rem;
            font-weight: 700;
            margin: 0 0 1rem 0;
            line-height: 1.2;
            max-width: 800px;
            margin-top: 50px;
        }

        .post-meta {
            font-size: 1rem;
            color: var(--text-secondary);
        }

        /* Main content container */
        /* .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 4rem 2rem;
        } */

        .post-body {
            font-size: 1.1rem;
            line-height: 1.8;
        }

        .back-link {
            display: inline-flex;
            align-items: center;
            gap: 0.5rem;
            color: var(--text-secondary);
            text-decoration: none;
            margin-bottom: 2rem;
            transition: color 0.3s ease;
        }

        .back-link:hover {
            color: var(--primary-red);
        }

        .back-link svg {
            transform: rotate(180deg);
            transition: transform 0.3s ease;
        }

        .back-link:hover svg {
            transform: rotate(180deg) translateX(-5px);
        }

        /* Styles for content from a Rich Text Editor */
        #post-content h2,
        #post-content h3,
        #post-content h4 {
            margin-top: 2.5em;
            margin-bottom: 1em;
            line-height: 1.3;
        }

        #post-content h2 {
            font-size: 1.8rem;
        }

        #post-content h3 {
            font-size: 1.5rem;
        }

        #post-content p {
            margin-bottom: 1.5em;
            text-align: justify;
        }

        #post-content a {
            color: var(--primary-red);
            text-decoration: none;
            border-bottom: 1px solid var(--primary-red);
            transition: background-color 0.3s;
        }

        #post-content a:hover {
            background-color: rgba(190, 19, 45, 0.2);
        }

        #post-content ul,
        #post-content ol {
            padding-right: 2em;
            margin-bottom: 1.5em;
        }

        #post-content li {
            margin-bottom: 0.75em;
        }

        #post-content blockquote {
            margin: 2em 0;
            padding: 1em 1.5em;
            border-right: 4px solid var(--primary-red);
            background-color: var(--content-bg);
            color: var(--text-secondary);
            font-style: italic;
        }

        #post-content blockquote p {
            margin-bottom: 0;
        }

        #post-content code {
            background: var(--content-bg);
            padding: 0.2em 0.4em;
            border-radius: 4px;
            font-size: 90%;
        }

        #post-content pre {
            background: var(--content-bg);
            padding: 1em;
            border-radius: 4px;
            overflow-x: auto;
        }

        #post-content pre code {
            padding: 0;
            background: transparent;
        }

        @media (max-width: 768px) {
            .post-title {
                font-size: 1rem;
                margin-top: 0;
            }

            /* .container {
                padding: 3rem 1rem;
            } */

            .post-body {
                font-size: 1rem;
            }
        }
        .content{
            padding-top: 0 !important
        }

        @media (max-width: 768px) {
    .mt-80b {
        margin-top: 150px !important;
    }
}
    </style>
@endsection

@section('script')
@endsection

@section('content')
    <div class="post-header mt-80b"
         style="
         margin-top:10px;background-image: linear-gradient(rgba(0, 0, 0, 0.5),
                                                 rgba(0, 0, 0, 0.5)),
                 url('{{ asset(env('ARTICLES_IMAGES_UPLOAD_PATH') . $article->image) }}');">
        <h1 class="post-title">{{ $article->title }}</h1>
        <p class="post-meta">منتشر شده در تاریخ {{ verta($article->created_at)->format('Y-m-d') }}</p>
    </div>
    <div class="container">
        <a href="index.html" class="back-link">
            <svg
                width="18"
                height="18"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
            >
                <circle
                    cx="12"
                    cy="12"
                    r="11"
                    stroke="currentColor"
                    stroke-width="2"
                />
                <path
                    d="M14.5 17L9.5 12L14.5 7"
                    stroke="currentColor"
                    strokeWidth="2"
                    strokeLinecap="round"
                    strokeLinejoin="round"
                />
            </svg>
            بازگشت به وبلاگ
        </a>
        <article class="post-body">
            <!-- The content from your rich text editor will be injected here -->
            <div id="post-content">
                <p>
                    {{$article->shortDescription}}
                </p>
                <h3>{{$article->title}}</h3>
                <div id="desc">
                    {!! $article->description !!}
                </div>
            </div>
        </article>
    </div>
@endsection