{% extends "base.html" %}

{% block title %}Home{% endblock title %}
{% block crumb %}{% endblock crumb %}

{% block content %}
<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">home</h1>
    <p class="term-sub">// latest news and updates.</p>
  </div>
  <div class="term-cmd-actions">
    <a href="/blog" class="btn btn-outline btn-sm">[ all posts ]</a>
  </div>
</header>

<div class="term-screen mb-6">
  <p class="line" data-p="visitor@universal-web:~$">whoami</p>
  <p class="line out">→ guitar player - original songs, albums and notes</p>
  <p class="line" data-p="visitor@universal-web:~$">ls ~/sections</p>
  <p class="line out">about/   blog/   audio/   songs/</p>
</div>

<section>
  <p class="term-cmd-line mb-6"><span class="t-dim"># </span>recent posts <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">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 %}
</section>
{% endblock content %}