{% extends "base.html" %}

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

{% block content %}
{% if logged_in_admin %}
<header class="term-cmd">
  <div>
    <p class="term-cmd-line">
      <span class="t-green">visitor@universal-web</span><span class="t-dim">:</span><span class="t-blue">~</span><span class="t-dim">$</span>
      ls -la
    </p>
    <h1 class="term-title">{{ t(key="home-title", lang=lang | default(value='sk')) }}</h1>
    <p class="term-sub">// {{ t(key="home-sub", lang=lang | default(value='sk')) }}</p>
  </div>
  <div class="term-cmd-actions">
    <a href="/blog" class="btn btn-outline btn-sm">[ {{ t(key="home-all-posts", lang=lang | default(value='sk')) }} ]</a>
  </div>
</header>

<div class="term-screen mb-6">
  <p class="line" data-p="visitor@universal-web:~$">whoami</p>
  <p class="line out">→ {{ t(key="home-tagline", lang=lang | default(value='sk')) }}</p>
  <p class="line" data-p="visitor@universal-web:~$">ls ~/sections</p>
  <p class="line out">{{ t(key="home-sections", lang=lang | default(value='sk')) }}</p>
</div>

<section>
  <p class="term-cmd-line mb-6"><span class="t-dim"># </span>{{ t(key="home-recent", lang=lang | default(value='sk')) }} <span class="t-dim">({{ articles | length }})</span></p>
  {% if articles | length > 0 %}
    <div class="term-stack">
      {% for article in articles %}
        <article class="card">
          <div class="term-head">
            <span class="term-dots" aria-hidden="true">
              <span class="term-dot r"></span><span class="term-dot y"></span><span class="term-dot g"></span>
            </span>
            <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">
            <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="home-no-posts", lang=lang | default(value='sk')) }}</p>
    </div>
  {% endif %}
</section>
{% else %}
<header class="term-cmd">
  <div>
    <h1 class="term-title">{{ t(key="home-title", lang=lang | default(value='sk')) }}</h1>
    <p class="term-sub">{{ t(key="home-sub", lang=lang | default(value='sk')) }}</p>
  </div>
  <div class="term-cmd-actions">
    <a href="/blog" class="btn btn-outline btn-sm">{{ t(key="home-all-posts", lang=lang | default(value='sk')) }}</a>
  </div>
</header>

<div class="term-screen mb-6">
  <p class="line">{{ t(key="home-tagline", lang=lang | default(value='sk')) }}</p>
  <p class="line out">{{ t(key="home-sections", lang=lang | default(value='sk')) }}</p>
</div>

<section>
  <p class="term-cmd-line mb-6"><span class="t-dim"># </span>{{ t(key="home-recent", lang=lang | default(value='sk')) }} <span class="t-dim">({{ articles | length }})</span></p>
  {% 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">
            <h2 class="card-title text-base">
              <a href="/blog/{{ article.slug }}">{{ article.title }}</a>
            </h2>
            {% if article.excerpt %}
            <p class="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="home-no-posts", lang=lang | default(value='sk')) }}</p>
    </div>
  {% endif %}
</section>
{% endif %}
{% endblock content %}