{% 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>
    <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>

{% if featured_track or featured_album %}
<section class="mb-8">
  <p class="term-cmd-line mb-6"><span class="t-dim"># </span>{{ t(key="home-picks", lang=lang | default(value='sk')) }}</p>
  <div class="term-grid">
    {% if featured_track %}
    <article class="card">
      <div class="term-head">
        <span class="term-head-name">~/audio/tracks/{{ featured_track.slug }}</span>
        <span class="term-head-meta term-tag is-green">{{ t(key="song", lang=lang | default(value='sk')) }}</span>
      </div>
      <div class="card-body">
        <div class="term-track">
          <button type="button" class="uw-play btn btn-primary btn-sm"
            data-src="/audio/tracks/{{ featured_track.id }}/stream" data-title="{{ featured_track.title }}">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
          <span class="term-track-name"><span class="t-green">▸</span> {{ featured_track.title }}</span>
        </div>
      </div>
    </article>
    {% endif %}
    {% if featured_album %}
    <article class="card">
      <div class="term-head">
        <span class="term-head-name">~/audio/{{ featured_album.slug }}/</span>
        <span class="term-head-meta term-tag is-purple">{{ t(key="album", lang=lang | default(value='sk')) }}</span>
      </div>
      <div class="card-body">
        {% if featured_album.cover_image_id %}
        <img src="/images/{{ featured_album.cover_image_id }}" alt="" class="mb-3">
        {% endif %}
        <h2 class="card-title text-base">{{ featured_album.title }}</h2>
        {% if featured_album.artist %}
        <p class="text-sm t-aqua">{{ featured_album.artist }}</p>
        {% endif %}
        {% if featured_album.description %}
        <p class="term-prose text-sm opacity-80">{{ featured_album.description }}</p>
        {% endif %}
        <div class="flex flex-wrap gap-2 pt-2">
          <button type="button" class="uw-play-album-remote btn btn-primary btn-sm"
            data-album-tracks-url="/audio/albums/{{ featured_album.slug }}/tracks">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
          <a href="/audio/albums/{{ featured_album.slug }}" class="btn btn-outline btn-sm">{{ t(key="audio-open", lang=lang | default(value='sk')) }}</a>
        </div>
      </div>
    </article>
    {% endif %}
  </div>
</section>
{% endif %}

<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="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>

{% if featured_track or featured_album %}
<section class="mb-8">
  <p class="term-cmd-line mb-6"><span class="t-dim"># </span>{{ t(key="home-picks", lang=lang | default(value='sk')) }}</p>
  <div class="term-grid">
    {% if featured_track %}
    <article class="card">
      <div class="term-head">
        <span class="term-head-name">~/audio/tracks/{{ featured_track.slug }}</span>
        <span class="term-head-meta term-tag is-green">{{ t(key="song", lang=lang | default(value='sk')) }}</span>
      </div>
      <div class="card-body">
        <div class="term-track">
          <button type="button" class="uw-play btn btn-primary btn-sm"
            data-src="/audio/tracks/{{ featured_track.id }}/stream" data-title="{{ featured_track.title }}">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
          <span class="term-track-name"><span class="t-green">▸</span> {{ featured_track.title }}</span>
        </div>
      </div>
    </article>
    {% endif %}
    {% if featured_album %}
    <article class="card">
      <div class="term-head">
        <span class="term-head-name">~/audio/{{ featured_album.slug }}/</span>
        <span class="term-head-meta term-tag is-purple">{{ t(key="album", lang=lang | default(value='sk')) }}</span>
      </div>
      <div class="card-body">
        {% if featured_album.cover_image_id %}
        <img src="/images/{{ featured_album.cover_image_id }}" alt="" class="mb-3">
        {% endif %}
        <h2 class="card-title text-base">{{ featured_album.title }}</h2>
        {% if featured_album.artist %}
        <p class="text-sm t-aqua">{{ featured_album.artist }}</p>
        {% endif %}
        {% if featured_album.description %}
        <p class="term-prose text-sm opacity-80">{{ featured_album.description }}</p>
        {% endif %}
        <div class="flex flex-wrap gap-2 pt-2">
          <button type="button" class="uw-play-album-remote btn btn-primary btn-sm"
            data-album-tracks-url="/audio/albums/{{ featured_album.slug }}/tracks">{{ t(key="audio-play", lang=lang | default(value='sk')) }}</button>
          <a href="/audio/albums/{{ featured_album.slug }}" class="btn btn-outline btn-sm">{{ t(key="audio-open", lang=lang | default(value='sk')) }}</a>
        </div>
      </div>
    </article>
    {% endif %}
  </div>
</section>
{% endif %}

<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 %}