{{ header }}
{{ content_top }}
<main class="blog-article-page">
  <section class="blog-article-hero">
    <div class="container-fluid">
      <ul class="blog-category-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="blog-article-hero__grid{% if not thumb %} blog-article-hero__grid--single{% endif %}">
        <div class="blog-article-hero__copy">
          <div class="blog-category-eyebrow">Журнал свадебного салона</div>
          <h1>{{ heading_title }}</h1>
          <div class="blog-article-meta">
            <time>{{ date_added }}</time>
            <span class="blog-article-meta__divider"></span>
            <span class="blog-article-meta__views">
              <svg width="17" height="17" viewBox="0 0 24 24" aria-hidden="true">
                <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
                <circle cx="12" cy="12" r="2.5"></circle>
              </svg>
              {{ viewed }}
            </span>
            {% if review_status and rating %}
            <span class="blog-article-meta__rating" aria-label="Рейтинг: {{ rating }} из 5">
              {% for i in 1..5 %}<span class="{% if rating < i %}is-empty{% endif %}">★</span>{% endfor %}
            </span>
            {% endif %}
          </div>
        </div>
        {% if thumb %}
        <div class="blog-article-hero__image">
          <img src="{{ thumb }}" alt="{{ heading_title }}" title="{{ heading_title }}" />
        </div>
        {% endif %}
      </div>
    </div>
  </section>

  <section class="blog-article-content">
    <div class="container-fluid">
      <div class="blog-article-content__grid">
        <article class="blog-article-copy">
          {{ description }}
        </article>
        <aside class="blog-article-aside">
          <div class="blog-category-eyebrow">Dominik</div>
          <p>Примеряйте образы без спешки. Наши стилисты помогут найти платье, которое будет ощущаться именно вашим.</p>
          <a href="#" onclick="SendRequest(0);return false;" class="blog-article-aside__link">
            Записаться на примерку
            <svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
              <path d="M0 6h16M11 1l5 5-5 5"></path>
            </svg>
          </a>
        </aside>
      </div>

      {% if download_status and downloads %}
      <div class="blog-article-downloads">
        {% for download in downloads %}
        <a href="{{ download.href }}">{{ download.name }} <span>{{ download.size }}</span></a>
        {% endfor %}
      </div>
      {% endif %}
    </div>
  </section>

  {% if products %}
  <section class="blog-article-section blog-article-products">
    <div class="container-fluid">
      <div class="blog-article-section__head">
        <span class="blog-category-eyebrow">Образы из статьи</span>
        <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 articles %}
  <section class="blog-article-section blog-article-related">
    <div class="container-fluid">
      <div class="blog-article-section__head">
        <span class="blog-category-eyebrow">Читайте также</span>
        <h2>{{ text_related }}</h2>
      </div>
      <div class="blog-article-related__grid">
        {% for article in articles %}
        <article class="blog-category-card">
          <a href="{{ article.href }}" class="blog-category-card__image">
            <img src="{{ article.thumb }}" alt="{{ article.name }}" title="{{ article.name }}" loading="lazy" />
          </a>
          <div class="blog-category-card__body">
            <div class="blog-category-card__meta">
              <time>{{ article.date_added }}</time>
              <span class="blog-category-card__divider"></span>
              <span class="blog-category-card__views">
                <svg width="16" height="16" viewBox="0 0 24 24" aria-hidden="true">
                  <path d="M2.5 12s3.5-6 9.5-6 9.5 6 9.5 6-3.5 6-9.5 6-9.5-6-9.5-6Z"></path>
                  <circle cx="12" cy="12" r="2.5"></circle>
                </svg>
                {{ article.viewed }}
              </span>
            </div>
            <h3><a href="{{ article.href }}">{{ article.name }}</a></h3>
            <p>{{ article.description }}</p>
            <div class="blog-category-card__footer">
              <a href="{{ article.href }}" class="blog-category-card__link">
                {{ button_more }}
                <svg width="18" height="12" viewBox="0 0 18 12" aria-hidden="true">
                  <path d="M0 6h16M11 1l5 5-5 5"></path>
                </svg>
              </a>
            </div>
          </div>
        </article>
        {% endfor %}
      </div>
    </div>
  </section>
  {% endif %}
</main>
{{ content_bottom }}
{{ footer }}
