{{ header }}
{{ content_top }}
<main class="service-page">
  <section class="service-hero">
    <div class="container-fluid">
      <ul class="service-breadcrumb">
        {% for key,breadcrumb in breadcrumbs %}
        <li><a href="{{ breadcrumb.href }}">{{ breadcrumb.text }}</a>{% if key + 1 < breadcrumbs|length %}<span>•</span>{% endif %}</li>
        {% endfor %}
      </ul>
      <div class="service-hero__grid{% if not thumb %} service-hero__grid--single{% endif %}">
        <div class="service-hero__copy">
          <div class="service-eyebrow">Услуги свадебного салона</div>
          <h1>{{ heading_title }}</h1>
          {% if summary %}<p>{{ summary }}</p>{% endif %}
          <div class="service-hero__actions">
            <a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
            <a href="{{ category_href }}" class="service-text-link">{{ button_all_services }} <span>→</span></a>
          </div>
        </div>
        {% if thumb %}
        <div class="service-hero__visual">
          <img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" />
        </div>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="service-content-section">
    <div class="container-fluid">
      <div class="service-content-layout">
        <article class="service-content">{{ description }}</article>
        <aside class="service-sidebar">
          <div class="service-sidebar__card">
            <div class="service-eyebrow">Персональная консультация</div>
            <h2>Обсудим ваш образ</h2>
            <p>Ответим на вопросы, расскажем о деталях услуги и запишем вас на примерку.</p>
            <a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
          </div>
        </aside>
      </div>
    </div>
  </section>

  {% if products %}
  <section class="service-related-section">
    <div class="container-fluid">
      <div class="service-related-head">
        <div class="service-eyebrow">Дополните образ</div>
        <h2>{{ text_related_product }}</h2>
      </div>
      <div class="row g-3 product-items">
        {% for product in products %}
        <div class="col-6 col-lg-4">{% include 'dominik/template/common/product.twig' %}</div>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}

  {% if services %}
  <section class="service-related-section">
    <div class="container-fluid">
      <div class="service-related-head">
        <div class="service-eyebrow">Вам также может подойти</div>
        <h2>{{ text_related }}</h2>
      </div>
      <div class="service-related-grid">
        {% for service in services %}
        <article class="service-related-card">
          <a href="{{ service.href }}" class="service-related-card__image">
            {% if service.thumb %}<img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" loading="lazy" />{% endif %}
          </a>
          <div class="service-related-card__body">
            <h3><a href="{{ service.href }}">{{ service.name }}</a></h3>
            <p>{{ service.description }}</p>
            <a href="{{ service.href }}" class="service-card__link">{{ button_more }} <span>→</span></a>
          </div>
        </article>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}
</main>
{{ content_bottom }}
{{ footer }}
