{% extends "base.html" %}

{% block extra_head %}
<link rel="stylesheet" type="text/css" href="{{ static_asset('home.css') }}">
{% endblock %}

{% block content %}
<main class="home-page" aria-labelledby="home-title">
  <div class="home-atmosphere" aria-hidden="true">
    <span class="home-glow home-glow-one"></span>
    <span class="home-glow home-glow-two"></span>
    <span class="home-grain"></span>
  </div>

  <header class="home-intro home-reveal" style="--reveal-delay: 40ms">
    <div>
      <p class="home-kicker" id="home-kicker">Your private frequency</p>
      <h1 id="home-title">Where would you like to begin tonight?</h1>
    </div>
    <a class="home-library-status" href="/library" aria-label="Open library">
      <span class="home-status-dot" aria-hidden="true"></span>
      <span id="home-library-summary">Waking up your media library…</span>
      <i data-feather="arrow-up-right" aria-hidden="true"></i>
    </a>
  </header>

  <section class="home-modes" aria-label="Choose an experience">
    <a class="mode-card mode-card-flow home-reveal" style="--reveal-delay: 100ms" href="/flow">
      <div id="home-flow-collage" class="flow-collage" aria-hidden="true">
        <span class="flow-collage-placeholder"></span>
        <span class="flow-collage-placeholder"></span>
        <span class="flow-collage-placeholder"></span>
        <span class="flow-collage-placeholder"></span>
      </div>
      <span class="mode-card-shade" aria-hidden="true"></span>
      <div class="mode-card-topline">
        <span class="mode-number">01</span>
        <span class="mode-meta" id="home-flow-meta">Mixed media flow</span>
      </div>
      <div class="mode-card-copy">
        <span class="mode-label">FLOW</span>
        <h2>Let the next frame<br>find you.</h2>
        <span class="mode-action">Start Exploring <i data-feather="arrow-right" aria-hidden="true"></i></span>
      </div>
    </a>

    <a class="mode-card mode-card-radio home-reveal" style="--reveal-delay: 170ms" href="/radio">
      <div class="radio-signal" aria-hidden="true">
        <span></span><span></span><span></span><span></span><span></span><span></span><span></span>
      </div>
      <div class="mode-card-topline">
        <span class="mode-number">02</span>
        <span class="mode-meta" id="home-radio-station">Private Radio</span>
      </div>
      <div class="radio-orbit" aria-hidden="true">
        <span class="radio-orbit-core"><i data-feather="headphones"></i></span>
      </div>
      <div class="mode-card-copy">
        <span class="mode-label">RADIO</span>
        <h2 id="home-radio-title">Turn the world down for a while.</h2>
        <span class="mode-action" id="home-radio-action">Start Listening <i data-feather="arrow-right" aria-hidden="true"></i></span>
      </div>
    </a>
  </section>

  <section id="home-memories" class="home-shelf home-reveal" style="--reveal-delay: 200ms" aria-labelledby="memories-title" hidden>
    <div class="shelf-heading">
      <div>
        <p id="memories-kicker">From your archive</p>
        <h2 id="memories-title">On This Day</h2>
      </div>
      <a id="memories-link" href="/library">View Month <i data-feather="arrow-up-right" aria-hidden="true"></i></a>
    </div>
    <div id="home-memories-list" class="media-ribbon"></div>
  </section>

  <section class="home-shelf home-reveal" style="--reveal-delay: 230ms" aria-labelledby="recent-title">
    <div class="shelf-heading">
      <div>
        <p>Freshly indexed</p>
        <h2 id="recent-title">Recently Added</h2>
      </div>
      <a href="/library?mode=all">View All <i data-feather="arrow-up-right" aria-hidden="true"></i></a>
    </div>
    <div id="home-recent" class="media-ribbon" aria-live="polite">
      {% for _ in range(6) %}<span class="media-tile media-tile-loading" aria-hidden="true"></span>{% endfor %}
    </div>
  </section>

  <div class="home-lower-grid">
    <section class="home-shelf rediscover-panel home-reveal" style="--reveal-delay: 290ms" aria-labelledby="rediscover-title">
      <div class="shelf-heading">
        <div>
          <p>Not seen in a long while</p>
          <h2 id="rediscover-title">Rediscover</h2>
        </div>
        <a href="/flow?mode=forgotten">Open in Flow <i data-feather="arrow-up-right" aria-hidden="true"></i></a>
      </div>
      <div id="home-rediscover" class="rediscover-grid" aria-live="polite">
        {% for _ in range(3) %}<span class="rediscover-tile media-tile-loading" aria-hidden="true"></span>{% endfor %}
      </div>
    </section>

    <section class="home-shelf collection-panel home-reveal" style="--reveal-delay: 350ms" aria-labelledby="collections-title">
      <div class="shelf-heading">
        <div>
          <p>Curated by you</p>
          <h2 id="collections-title">Your Collections</h2>
        </div>
        <a href="/collections">Manage <i data-feather="arrow-up-right" aria-hidden="true"></i></a>
      </div>
      <div id="home-collections" class="collection-list" aria-live="polite">
        <div class="collection-empty is-loading"><span></span><span></span></div>
      </div>
    </section>
  </div>

  <footer class="home-footer home-reveal" style="--reveal-delay: 410ms">
    <span>Spooly</span>
    <span>Your media, for this moment alone.</span>
  </footer>
</main>
{% endblock %}

{% block extra_body %}
<script src="{{ static_asset('home_page_controller.js') }}"></script>
{% endblock %}