{% extends "base.html" %}
{% from "_article_rows.html" import media, row %}
{% block og_type %}article{% endblock %}
{% block content %}
  <article class="article-page">
    <header class="article-header">
      <div class="article-breadcrumbs"><a href="/">Лента</a><span>/</span><a href="/category/{{ article.category_tag }}">{{ article.category_name }}</a></div>
      <h1>{{ article.title }}</h1>
      {% if article.lead %}<p class="article-lead">{{ article.lead }}</p>{% endif %}
      <div class="article-byline">
        <time datetime="{{ article.published_at.isoformat() }}">{{ article.published_at|ekb_date }} · {{ article.published_at|ekb_time }} ЕКБ</time>
        <a href="/brand/{{ article.producer_tag }}">{{ article.producer_name }}</a>
      </div>
    </header>
    {% if article.media %}
      <div class="article-media">
        {% for item in article.media %}
          {% if item.type == 'image' %}<figure><img src="{{ item.url }}" alt="{{ item.alt or article.title }}" loading="{{ 'eager' if loop.first else 'lazy' }}" decoding="async"></figure>{% endif %}
          {% if item.type == 'video' %}<figure><video src="{{ item.url }}" controls playsinline preload="metadata"></video></figure>{% endif %}
        {% endfor %}
      </div>
    {% endif %}
    <div class="article-layout">
      <div class="article-body">{{ article.body|paragraphs }}</div>
      <aside class="article-facts">
        <div><span>Категория</span><a href="/category/{{ article.category_tag }}">{{ article.category_name }}</a></div>
        <div><span>Производитель</span><a href="/brand/{{ article.producer_tag }}">{{ article.producer_name }}</a></div>
        {% if article.source_url %}<a class="source-link" href="{{ article.source_url }}" rel="nofollow noopener" target="_blank">Первоисточник ↗</a>{% endif %}
      </aside>
    </div>
  </article>
  {% if related %}
    <section class="related-section">
      <h2>По теме</h2>
      <div class="feed-list">{% for item in related %}{{ row(item) }}{% endfor %}</div>
    </section>
  {% endif %}
{% endblock %}