{{define "title"}}{{.SiteTitle}} — your news feed{{end}}

{{define "main"}}
<section class="mt-2 mb-8 text-center">
  <h1 class="font-display text-4xl sm:text-6xl font-bold leading-tight">
    a friendlier news feed.
  </h1>
  <p class="mx-auto mt-3 max-w-xl text-base sm:text-lg text-[color:var(--ink)]/70">
    {{if .PostingEnabled}}
    Pete reads RSS, sorts stories, and posts them to Matrix.
    Glowing cards are the ones he's posted.
    {{else}}
    Pete reads RSS and sorts stories into channels, fresh from his feeds.
    {{end}}
  </p>
  <p class="mx-auto mt-5 inline-flex items-center gap-2 rounded-full bg-[color:var(--card)] px-4 py-2 text-sm font-semibold shadow-pete border-2 border-[color:var(--ink)]/10">
    <img src="/static/img/pete.avif" alt="Pete" width="24" height="24"
         class="h-6 w-6 rounded-full object-cover">
    <span data-pete-greeting>Hey, I'm Pete. Here's what's new.</span>
  </p>
</section>

<section data-weather-card class="mb-10 empty:hidden"></section>

{{if .Trending}}
<section class="mb-10">
  <div class="flex items-end justify-between gap-3 mb-4">
    <h2 class="font-display text-xl sm:text-2xl font-bold">
      <span aria-hidden="true">🔥</span> Popular this week
    </h2>
    <span class="text-xs text-[color:var(--ink)]/50">what readers are opening most</span>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    {{range .Trending}}
      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
    {{end}}
  </div>
</section>
{{end}}

{{if .ForYou}}
<section class="mb-10">
  <div class="flex items-end justify-between gap-3 mb-4">
    <h2 class="font-display text-xl sm:text-2xl font-bold">
      <span aria-hidden="true">✨</span> For you
    </h2>
    <a href="/for-you" class="text-xs font-semibold text-[color:var(--ink)]/60 hover:text-[color:var(--ink)]">more →</a>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    {{range .ForYou}}
      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
    {{end}}
  </div>
</section>
{{end}}

{{if and .PostingEnabled .JustPosted}}
<section class="mb-10">
  <div class="flex items-end justify-between gap-3 mb-4">
    <h2 class="font-display text-xl sm:text-2xl font-bold">
      <span aria-hidden="true">📡</span> Pete just posted
    </h2>
    <span class="text-xs text-[color:var(--ink)]/50">most recent posts to Matrix</span>
  </div>
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
    {{range .JustPosted}}
      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
    {{end}}
  </div>
</section>
{{end}}

<section class="mb-10">
  <div class="flex items-end justify-between gap-3 mb-4">
    <h2 class="font-display text-xl sm:text-2xl font-bold">
      <span aria-hidden="true">📊</span> Channels
    </h2>
    <span class="text-xs text-[color:var(--ink)]/50">{{if .PostingEnabled}}last 24 hours{{else}}what Pete's tracking{{end}}</span>
  </div>
  <div class="grid grid-cols-2 lg:grid-cols-4 gap-3 sm:gap-4">
    {{range .Stats}}
    <a href="/{{.Channel.Slug}}"
       class="block rounded-3xl bg-[color:var(--card)] border-2 border-[color:var(--ink)]/10 shadow-pete p-4 hover:-translate-y-1 hover:shadow-pete-lg transition">
      <div class="flex items-center gap-2">
        <span class="inline-flex items-center justify-center h-9 w-9 rounded-2xl bg-theme-{{.Channel.Theme}} text-white text-lg">
          {{.Channel.Emoji}}
        </span>
        <span class="font-display text-lg font-semibold">{{.Channel.Title}}</span>
      </div>
      <dl class="mt-3 space-y-1 text-xs text-[color:var(--ink)]/70">
        {{if $.PostingEnabled}}
        <div class="flex justify-between gap-2">
          <dt>last post</dt>
          <dd class="font-semibold text-[color:var(--ink)]">
            {{if .HasLastPosted}}{{timeAgo .LastPostedAt}}{{else}}—{{end}}
          </dd>
        </div>
        <div class="flex justify-between gap-2">
          <dt>posted 24h</dt>
          <dd class="font-semibold text-[color:var(--ink)]">{{.PostsToday}}</dd>
        </div>
        {{end}}
        <div class="flex justify-between gap-2">
          <dt>stories</dt>
          <dd class="font-semibold text-[color:var(--ink)]">{{.Total}}</dd>
        </div>
      </dl>
    </a>
    {{end}}
  </div>
</section>

<section class="mb-12">
  <div class="flex items-end justify-between gap-3 mb-4">
    <h2 class="font-display text-xl sm:text-2xl font-bold">
      <span aria-hidden="true">🗞️</span> Latest across the feed
    </h2>
    <span class="text-xs text-[color:var(--ink)]/50">newest first, all channels</span>
  </div>
  {{if .Latest}}
  <div class="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4">
    {{range .Latest}}
      {{template "card" dict "Story" . "Theme" .Channel "ShowChannel" true}}
    {{end}}
  </div>
  {{else}}
  <div class="rounded-3xl bg-[color:var(--card)] border-2 border-dashed border-[color:var(--ink)]/15 p-8 text-center text-[color:var(--ink)]/60">
    Nothing here yet. Pete's still listening for the first story.
  </div>
  {{end}}
</section>
{{end}}