{% extends "base.html" %}

{% block title %}Blog{% endblock title %}
{% block crumb %}blog{% 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">~/blog</span><span class="t-dim">$</span>
      ls -la
    </p>
    <h1 class="term-title">blog</h1>
    <p class="term-sub">// {{ articles | length }} published article(s).</p>
  </div>
  <div class="term-cmd-actions">
    <a href="/admin/blog/articles" class="btn btn-outline btn-sm">[ manage ]</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-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">post</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">[ cat → ]</a>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
{% else %}
  <div class="term-empty">
    <p class="font-medium">no published posts yet</p>
    <p class="term-empty-cmd">$ ls ~/blog → 0 results</p>
  </div>
{% endif %}
{% else %}
<header class="term-cmd">
  <div>
    <h1 class="term-title">blog</h1>
    <p class="term-sub">{{ articles | length }} published article(s).</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">post</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">read</a>
          </div>
        </div>
      </article>
    {% endfor %}
  </div>
{% else %}
  <div class="term-empty">
    <p class="font-medium">no published posts yet</p>
  </div>
{% endif %}
{% endif %}
{% endblock content %}