@extends('site.layouts.app')
@section('content')
  <!-- PAGE HERO -->
  <section class="page-hero">
    <div class="page-hero-bg">
      <img src="{{ asset('site/images/page-hider.png') }}" alt="{{ $article->title }}">
    </div>
    <div class="breadcrumb">
      <a href="{{ route('site.home') }}">الرئيسية</a>
      <span class="separator">←</span>
      <a href="{{ route('site.articles') }}">مقالات</a>
      <span class="separator">←</span>
      <span>{{ $article->title }}</span>
    </div>
  </section>

  <!-- ARTICLE DETAIL -->
  <section class="section">
    <div class="container">
      <div class="service-detail" style="padding: 0 !important;">
        <div class="service-main-content">
          <div class="service-detail-text">
            <h1>{{ $article->title }}</h1>
            {!! nl2br(e($article->content)) !!}

            <div class="service-cta mt-8">
              <a href="{{ route('site.articles') }}" class="btn">جميع المقالات <span class="arrow">←</span></a>
              <a href="{{ route('site.book-appointment') }}" class="btn-outline">احجز موعد الآن</a>
            </div>
          </div>
        </div>
      </div>
    </div>
  </section>
@endsection