{include file="_partials/head.tpl"}

<div class="bz-container">
  <div class="bz-article-layout">
    <main>
      <article>
        [if {news.cover}]
          <div class="bz-article-cover">
            <img src="{news.cover|large}" alt="{news.title}">
          </div>
        [/if]

        <div class="bz-article-meta">
          [if {news.category}]<span class="bz-tag">{news.category.title}</span>[/if]
          <span class="bz-by">By <b>admin</b></span>
          <span>·</span>
          <span class="bz-icon-text">{icon name="calendar" size="14"} {news.date}</span>
          <span>·</span>
          <span class="bz-icon-text">{icon name="eye" size="14"} {news.views}</span>
          <div class="bz-card-meta-actions" style="margin-left:auto">
            <button type="button" aria-label="Bookmark">{icon name="bookmark" size="14"}</button>
            <button type="button" aria-label="Like">{icon name="heart" size="14"}</button>
          </div>
        </div>

        <h1 class="bz-article-title">{news.title}</h1>

        <div class="bz-article-body">
          {news.body|raw}
        </div>

        <div class="bz-tags-row">
          <div class="bz-tags">
            <b>Tags:</b>
            [if {news.category}]<a href="/category/{news.category.slug}">{news.category.title}</a>[/if]
          </div>
          <div class="bz-share-row">
            <a href="#" aria-label="Facebook">{icon name="facebook" size="14"}</a>
            <a href="#" aria-label="Twitter">{icon name="twitter" size="14"}</a>
            <a href="#" aria-label="LinkedIn">{icon name="linkedin" size="14"}</a>
          </div>
        </div>
      </article>

      <section id="comments" class="bz-comments">
        <h2>Комментарии</h2>

        [if {comment_status}="ok"]<div class="bz-alert success">Спасибо, комментарий опубликован.</div>[/if]
        [if {comment_status}="pending"]<div class="bz-alert info">Спасибо! Комментарий отправлен на модерацию.</div>[/if]
        [if {comment_error}="rate"]<div class="bz-alert error">Вы слишком часто комментируете. Подождите немного.</div>[/if]
        [if {comment_error}="spam"]<div class="bz-alert error">Комментарий помечен как спам.</div>[/if]
        [if {comment_error}="csrf"]<div class="bz-alert error">Сессия истекла. Обновите страницу.</div>[/if]
        [if {comment_error}="invalid"]<div class="bz-alert error">Проверьте имя и текст (не меньше 3 символов).</div>[/if]

        [if {comments}]
          [foreach var="comments" as="c"]
            <div class="bz-comment">
              <div class="bz-comment-avatar">{c.author_name}</div>
              <div>
                <div class="bz-comment-head">
                  <b>{c.author_name}</b>
                  <span class="bz-muted">{c.created_at}</span>
                </div>
                <div class="bz-comment-body">{c.body}</div>
              </div>
            </div>
          [/foreach]
        [else]
          <p class="bz-muted">Комментариев ещё нет. Будьте первым.</p>
        [/if]

        [if {comments_open}="1"]
          <form method="post" action="/news/{news.slug}/comments" class="bz-comment-form">
            {csrf}
            <div style="position:absolute;left:-9999px"><input type="text" name="website" tabindex="-1" autocomplete="off"></div>
            <div class="bz-row">
              <input type="text" name="author_name" placeholder="Имя" required>
              <input type="email" name="author_email" placeholder="Email (не публикуется)">
            </div>
            <textarea name="body" rows="4" placeholder="Поделитесь мнением…" required></textarea>
            <button type="submit" class="bz-btn-primary">Отправить {icon name="arrow_right" size="14"}</button>
          </form>
        [else]
          <p class="bz-muted">Комментарии закрыты.</p>
        [/if]
      </section>
    </main>

    {include file="_partials/sidebar.tpl"}
  </div>
</div>

{include file="_partials/foot.tpl"}
