{% extends 'base.html' %}

{% block content %}
<section class="page-header">
    <div class="container">
        <h1 class="page-title">{{ service.title }}</h1>
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb">
                <li class="breadcrumb-item"><a href="{% url 'home' %}">خانه</a></li>
                <li class="breadcrumb-item"><a href="{% url 'services' %}">خدمات</a></li>
                <li class="breadcrumb-item active">{{ service.title }}</li>
            </ol>
        </nav>
    </div>
</section>

<section class="section">
    <div class="container">
        <div class="row g-5">
            <div class="col-lg-8">
                <article>
                    {% if service.image %}
                    <img src="{{ service.image.url }}" alt="{{ service.title }}" class="img-fluid rounded-4 mb-4" loading="lazy">
                    {% endif %}
                    <div class="content-body">
                        {{ service.full_description|safe }}
                    </div>
                </article>
            </div>
            <aside class="col-lg-4">
                <div class="sidebar-card sticky-top">
                    <h3>نیاز به مشاوره دارید؟</h3>
                    <p>برای اطلاعات بیشتر درباره {{ service.title }} با ما تماس بگیرید.</p>
                    <a href="{% url 'contact' %}" class="btn btn-primary w-100">تماس با مطب</a>
                </div>
            </aside>
        </div>
    </div>
</section>
{% endblock %}