{% extends "base.html" %}

{% block title %}{{ t(key="blog-title", lang=lang | default(value='sk')) }}{% endblock title %}
{% block crumb %}blog{% endblock crumb %}

{% block content %}
{% if logged_in_admin %}
<header class="term-cmd">
  <div>
    <h1 class="term-title">{{ t(key="blog-title", lang=lang | default(value='sk')) }}</h1>
    <p class="term-sub">// {{ articles | length }} {{ t(key="blog-sub", lang=lang | default(value='sk')) }}</p>
  </div>
  <div class="term-cmd-actions">
    <a href="/admin/blog/articles" class="btn btn-outline btn-sm">[ {{ t(key="blog-manage", lang=lang | default(value='sk')) }} ]</a>
  </div>
</header>

{% if articles | length > 0 %}
  <div class="term-stack">
    {% for article in articles %}
      <article class="card">
        <div class="term-head">
          <span class="term-head-name">~/blog/{{ article.slug }}.txt</span>
          <span class="term-head-meta term-tag">{{ t(key="post", lang=lang | default(value='sk')) }}</span>
        </div>
        <div class="card-body">
          {% if article.featured_image_id %}
          <img src="/images/{{ article.featured_image_id }}" alt="" class="mb-3 max-h-64 w-full rounded object-cover">
          {% endif %}
          <h2 class="card-title text-base">
            <a href="/blog/{{ article.slug }}">{{ article.title }}</a>
          </h2>
          {% if article.excerpt %}
          <p class="term-prose text-sm opacity-80">{{ article.excerpt }}</p>
          {% endif %}
          <div class="pt-2">
            <a href="/blog/{{ article.slug }}" class="btn btn-primary btn-sm">{{ t(key="blog-read", lang=lang | default(value='sk')) }}</a>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
{% else %}
  <div class="term-empty">
    <p class="font-medium">{{ t(key="blog-no-posts", lang=lang | default(value='sk')) }}</p>
  </div>
{% endif %}
{% else %}
<header class="term-cmd">
  <div>
    <h1 class="term-title">{{ t(key="blog-title", lang=lang | default(value='sk')) }}</h1>
    <p class="term-sub">{{ articles | length }} {{ t(key="blog-sub", lang=lang | default(value='sk')) }}</p>
  </div>
</header>

{% if articles | length > 0 %}
  <div class="term-stack">
    {% for article in articles %}
      <article class="card">
        <div class="term-head">
          <span class="term-head-name">~/blog/{{ article.slug }}.txt</span>
          <span class="term-head-meta term-tag">{{ t(key="post", lang=lang | default(value='sk')) }}</span>
        </div>
        <div class="card-body">
          {% if article.featured_image_id %}
          <img src="/images/{{ article.featured_image_id }}" alt="" class="mb-3 max-h-64 w-full rounded object-cover">
          {% endif %}
          <h2 class="card-title text-base">
            <a href="/blog/{{ article.slug }}">{{ article.title }}</a>
          </h2>
          {% if article.excerpt %}
          <p class="term-prose text-sm opacity-80">{{ article.excerpt }}</p>
          {% endif %}
          <div class="pt-2">
            <a href="/blog/{{ article.slug }}" class="btn btn-primary btn-sm">{{ t(key="blog-read", lang=lang | default(value='sk')) }}</a>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
{% else %}
  <div class="term-empty">
    <p class="font-medium">{{ t(key="blog-no-posts", lang=lang | default(value='sk')) }}</p>
  </div>
{% endif %}
{% endif %}
{% endblock content %}