{{ header }}
{{ content_top }}
<main class="service-category-page">
  <section class="service-category-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-category-hero__grid">
        <div>
          <div class="service-eyebrow">Забота о вашем образе</div>
          <h1>{{ heading_title }}</h1>
          {% if description %}
          <div class="service-category-hero__description">{{ description }}</div>
          {% else %}
          <p>Поможем продумать важные детали свадебного образа и подготовиться к вашему особенному дню.</p>
          {% endif %}
        </div>
        <div class="service-category-hero__aside">
          <span class="service-category-hero__number">{{ service_total }}</span>
          <span>направления, чтобы платье стало именно вашим</span>
        </div>
      </div>
    </div>
  </section>

  {% if categories %}
  <section class="service-refine">
    <div class="container-fluid">
      <div class="service-eyebrow">{{ text_refine }}</div>
      <div class="service-refine__list">
        {% for category in categories %}
        <a href="{{ category.href }}" class="service-refine__item">{{ category.name }}</a>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}

  <section class="service-category-content">
    <div class="container-fluid">
      {% if services %}
      <div class="service-category-grid">
        {% for service in services %}
        <article class="service-card">
          <a href="{{ service.href }}" class="service-card__image">
            {% if service.thumb %}
            <img src="{{ service.thumb }}" alt="{{ service.name }}" title="{{ service.name }}" loading="lazy" />
            {% endif %}
            <span class="service-card__number">0{{ loop.index }}</span>
          </a>
          <div class="service-card__body">
            <h2><a href="{{ service.href }}">{{ service.name }}</a></h2>
            <p>{{ service.description }}</p>
            <a href="{{ service.href }}" class="service-card__link">{{ button_more }} <span>→</span></a>
          </div>
        </article>
        {% endfor %}
      </div>
      <div class="service-category-pagination">{{ pagination }}</div>
      {% elseif not categories %}
      <div class="service-category-empty">
        <h2>{{ text_empty }}</h2>
      </div>
      {% endif %}
    </div>
  </section>

  <section class="service-category-cta">
    <div class="container-fluid">
      <div class="service-category-cta__inner">
        <div>
          <div class="service-eyebrow">Начнем с примерки</div>
          <h2>Расскажите, какой образ вы представляете</h2>
          <p>Консультант ответит на вопросы и поможет подобрать удобное время для визита в салон.</p>
        </div>
        <a href="#" onclick="SendRequest(0);return false;" class="btn btn-dark">{{ button_request }}</a>
      </div>
    </div>
  </section>
</main>
{{ content_bottom }}
{{ footer }}
