@if (!connected()) {
  <main class="landing-shell">
    <section class="hero">
      <div class="eyebrow">Mastodon is My Blog <span>Lite</span></div>
      <h1>See your Mastodon<br />as a place, not a feed.</h1>
      <p class="hero-copy">
        A small client that runs entirely in this browser. No install. No project server holding
        your account.
      </p>

      <div class="connect-card">
        <label for="instance">Your Mastodon instance</label>
        <div class="connect-row">
          <input
            id="instance"
            name="instance"
            type="text"
            [(ngModel)]="instance"
            placeholder="mastodon.social"
            autocomplete="url"
            (keyup.enter)="connect()"
          />
          <button type="button" [disabled]="connecting()" (click)="connect()">
            {{ connecting() ? 'Connecting…' : 'Connect' }}
          </button>
        </div>
        <p class="privacy-note">
          Your access token and loaded posts stay in local browser storage. Lite requests read
          access, including permission to publish posts you write here.
        </p>
        @if (error()) {
          <div class="error-banner" role="alert">{{ error() }}</div>
        }
      </div>

      <button class="sample-button" type="button" (click)="useSampleData()">
        Explore with sample data <span aria-hidden="true">→</span>
      </button>
      @if (heavyUrl) {
        <a class="sample-button" [href]="heavyUrl"
          >Switch to heavy <span aria-hidden="true">→</span></a
        >
      }
    </section>

    <aside class="hero-art" aria-label="A small preview of the Lite client">
      <div class="preview-window">
        <div class="preview-top"><i></i><i></i><i></i><b>LIVE, BOUNDED VIEW</b></div>
        <div class="preview-body">
          <div class="preview-side"><span></span><span></span><span></span><span></span></div>
          <div class="preview-posts">
            <article>
              <small>river&#64;forest.example</small><strong>The good web is still here.</strong>
            </article>
            <article>
              <small>ada&#64;tech.example</small
              ><strong>Software should leave room for a weekend.</strong>
            </article>
          </div>
        </div>
      </div>
    </aside>
  </main>
} @else {
  <div class="lite-bar">
    <button class="brand" type="button" (click)="navigate('people')">
      Mastodon is My Blog <span>Lite</span>
    </button>
    <div class="lite-context">
      <span class="live-dot"></span>
      {{ sampleMode() ? 'SAMPLE DATA' : 'LIVE, BOUNDED VIEW' }}
    </div>
    @if (heavyUrl) {
      <a class="heavy-link" [href]="heavyUrl">Switch to heavy</a>
    }
    <div class="account-chip">
      @if (account()?.avatar) {
        <img [src]="account()!.avatar" alt="" />
      } @else if (account()) {
        <span class="avatar-fallback">{{ initials(account()!) }}</span>
      }
      <span>{{ account()?.acct }}</span>
      <button type="button" (click)="disconnect()">Disconnect</button>
    </div>
  </div>

  <header class="site-header">
    <nav aria-label="Lite navigation">
      <button [class.active]="page() === 'people'" type="button" (click)="navigate('people')">
        People
      </button>
      <button [class.active]="page() === 'content'" type="button" (click)="navigate('content')">
        Content
      </button>
      <button [class.active]="page() === 'forums'" type="button" (click)="navigate('forums')">
        Forums
      </button>
      <button [class.active]="page() === 'write'" type="button" (click)="navigate('write')">
        Write
      </button>
      <button [class.active]="page() === 'analytics'" type="button" (click)="navigate('analytics')">
        Analytics
      </button>
      <button
        [class.active]="page() === 'observability'"
        type="button"
        (click)="navigate('observability')"
      >
        Observability
      </button>
    </nav>
  </header>

  @if (page() === 'write') {
    <app-lite-write />
  } @else if (page() === 'analytics') {
    <app-lite-analytics [sampleMode]="sampleMode()" />
  } @else if (page() === 'observability') {
    <app-lite-observability />
  } @else {
    <main class="client-grid" [class.aggregate-view]="page() !== 'people'">
      @if (page() === 'people') {
        <aside class="people-panel">
          <div class="panel-title">
            <span>Blog roll</span>
            <small>{{ visiblePeople().length }} of {{ following().length }} loaded</small>
          </div>
          <div class="people-filters" role="group" aria-label="Blog roll filters">
            @if (blogRollDropdown) {
              <select
                aria-label="Blog roll filter"
                [ngModel]="peopleFilter()"
                (ngModelChange)="setPeopleFilter($event)"
              >
                @for (entry of peopleFilterEntries; track entry[0]) {
                  <option [value]="entry[0]">
                    {{ entry[1] }} ({{ peopleFilterCounts()[entry[0]] }})
                  </option>
                }
              </select>
            } @else {
              @for (entry of peopleFilterEntries; track entry[0]) {
                <button
                  type="button"
                  [class.active]="peopleFilter() === entry[0]"
                  [class.zero]="peopleFilterCounts()[entry[0]] === 0"
                  (click)="setPeopleFilter(entry[0])"
                >
                  {{ entry[1] }} <span class="count">{{ peopleFilterCounts()[entry[0]] }}</span>
                </button>
              }
            }
            <button
              class="reclassify"
              type="button"
              [disabled]="loading()"
              (click)="reclassify()"
              title="Re-fetch relationships and notifications to refresh the classifications."
            >
              Reclassify
            </button>
          </div>
          <button class="person" type="button" (click)="selectFollowing(account()!)">
            @if (account()?.avatar) {
              <img [src]="account()!.avatar" alt="" />
            } @else if (account()) {
              <span class="avatar-fallback">{{ initials(account()!) }}</span>
            }
            <span
              ><b>{{ account()?.display_name || account()?.acct }}</b
              ><small>&#64;{{ account()?.acct }}</small></span
            >
          </button>
          @for (person of visiblePeople(); track person.id) {
            <button class="person" type="button" (click)="selectFollowing(person)">
              @if (person.avatar) {
                <img [src]="person.avatar" alt="" />
              } @else {
                <span class="avatar-fallback">{{ initials(person) }}</span>
              }
              <span
                ><b>{{ person.display_name || person.acct }}</b
                ><small>&#64;{{ person.acct }}</small></span
              >
            </button>
          } @empty {
            <div class="empty-state">No one matches this filter in the loaded window.</div>
          }
        </aside>
      }

      <aside class="filter-panel">
        <div class="panel-title"><span>View</span></div>
        @if (page() === 'forums') {
          @for (entry of forumFilterEntries; track entry[0]) {
            <button
              type="button"
              [class.active]="forumFilter() === entry[0]"
              [class.zero]="forumFilterCounts()[entry[0]] === 0"
              (click)="setForumFilter(entry[0])"
            >
              {{ entry[1] }} <span class="count">{{ forumFilterCounts()[entry[0]] }}</span>
            </button>
          }
          @if (forumFacets().length > 0) {
            <div class="panel-title facet-title"><span>Hashtags</span></div>
            <div class="facet-chips">
              @for (facet of forumFacets(); track facet.tag) {
                <button
                  type="button"
                  class="facet-chip"
                  [class.active]="forumHashtags().has(facet.tag)"
                  (click)="toggleForumHashtag(facet.tag)"
                >
                  #{{ facet.tag }} <span class="count">{{ facet.count }}</span>
                </button>
              }
            </div>
          }
        } @else {
          @for (viewFilter of viewFilters(); track viewFilter) {
            <button
              type="button"
              [class.active]="filter() === viewFilter"
              [class.zero]="filterCounts()[viewFilter] === 0"
              (click)="setFilter(viewFilter)"
            >
              {{ filterLabels[viewFilter] }}
              <span class="count">{{ filterCounts()[viewFilter] }}</span>
            </button>
          }
        }
        <div class="budget-note">
          <b>{{ callsUsed() }}/10</b> API calls in the last action
        </div>
      </aside>

      <section class="feed-panel">
        @if (threadAnchor()) {
          <div class="thread-view">
            <button class="thread-back" type="button" (click)="closeThread()">
              ← Back to {{ page() === 'forums' ? 'discussions' : filterLabel() }}
            </button>
            @if (threadLoading()) {
              <div class="loading-state"><span></span> Fetching the whole thread…</div>
            } @else {
              @for (post of threadContext()?.ancestors ?? []; track post.id) {
                <ng-container
                  *ngTemplateOutlet="postCard; context: { post, muted: true, anchor: false }"
                />
              }
              <ng-container
                *ngTemplateOutlet="
                  postCard;
                  context: { post: threadAnchor()!, muted: false, anchor: true }
                "
              />
              @for (post of threadContext()?.descendants ?? []; track post.id) {
                <ng-container
                  *ngTemplateOutlet="postCard; context: { post, muted: false, anchor: false }"
                />
              }
            }
          </div>
        } @else if (page() === 'forums') {
          <div class="feed-heading">
            <div>
              <div class="eyebrow">DISCUSSIONS</div>
              <h1>{{ forumFilterLabels[forumFilter()] }}</h1>
              <p>{{ visibleThreads().length }} threads in this loaded window</p>
            </div>
            <button class="refresh-button" type="button" [disabled]="loading()" (click)="refresh()">
              Refresh
            </button>
          </div>

          @if (error()) {
            <div class="error-banner" role="alert">{{ error() }}</div>
          }
          @if (loading()) {
            <div class="loading-state"><span></span> Asking your instance…</div>
          }

          @for (thread of visibleThreads(); track thread.rootId) {
            <article class="thread-card">
              <div class="thread-meta">
                @if (thread.root) {
                  <b>{{ thread.root.account.display_name || thread.root.account.acct }}</b>
                  @if (thread.rootInstance) {
                    <small>{{ thread.rootInstance }}</small>
                  }
                } @else {
                  <span class="partial-badge">earlier post not loaded</span>
                }
                @if (thread.hasQuestion) {
                  <span class="question-badge">asks a question</span>
                }
                <small class="thread-time">{{ relativeDate(thread.latestActivity) }}</small>
              </div>
              @if (thread.root) {
                <div class="post-content thread-excerpt" [innerHTML]="thread.root.content"></div>
              } @else {
                <div
                  class="post-content thread-excerpt"
                  [innerHTML]="thread.replies[0].content"
                ></div>
              }
              <footer class="thread-footer">
                <span class="thread-repliers">
                  @for (replier of threadRepliers(thread); track replier.id) {
                    @if (replier.avatar) {
                      <img
                        [src]="replier.avatar"
                        [title]="replier.display_name || replier.acct"
                        alt=""
                      />
                    }
                  }
                  {{ thread.replyCount }} repl{{ thread.replyCount === 1 ? 'y' : 'ies' }}
                </span>
                <button class="view-thread" type="button" (click)="openThreadRoot(thread)">
                  View full thread →
                </button>
              </footer>
            </article>
          } @empty {
            @if (!loading()) {
              <div class="empty-state">No discussions match this filter in the loaded window.</div>
            }
          }
        } @else {
          <div class="feed-heading">
            <div>
              <div class="eyebrow">
                {{ page() === 'people' ? 'MICROBLOG' : filterLabel().toUpperCase() }}
              </div>
              <h1>
                {{
                  page() === 'people'
                    ? selectedAccount()?.display_name || account()?.display_name || account()?.acct
                    : filterLabel()
                }}
              </h1>
              <p>{{ visibleStatuses().length }} posts in this loaded window</p>
            </div>
            <button class="refresh-button" type="button" [disabled]="loading()" (click)="refresh()">
              Refresh
            </button>
          </div>

          @if (error()) {
            <div class="error-banner" role="alert">{{ error() }}</div>
          }
          @if (loading()) {
            <div class="loading-state"><span></span> Asking your instance…</div>
          }

          @for (status of visibleStatuses(); track status.id) {
            @let post = displayStatus(status);
            <article class="post-card">
              @if (status.reblog) {
                <div class="boost-label">
                  {{ status.account.display_name || status.account.acct }} boosted
                </div>
              }
              <div class="post-author">
                @if (post.account.avatar) {
                  <img [src]="post.account.avatar" alt="" />
                } @else {
                  <span class="avatar-fallback">{{ initials(post.account) }}</span>
                }
                <div>
                  <b>{{ post.account.display_name || post.account.acct }}</b
                  ><small>&#64;{{ post.account.acct }} · {{ relativeDate(post.created_at) }}</small>
                </div>
              </div>
              @if (post.spoiler_text) {
                <details>
                  <summary>{{ post.spoiler_text }}</summary>
                  <div class="post-content" [innerHTML]="post.content"></div>
                </details>
              } @else {
                <div class="post-content" [innerHTML]="post.content"></div>
              }
              @for (media of post.media_attachments; track media.id) {
                @if (media.type === 'image') {
                  <img
                    class="post-media"
                    [src]="media.preview_url || media.url"
                    [alt]="media.description || ''"
                    loading="lazy"
                  />
                } @else if (media.type === 'video' || media.type === 'gifv') {
                  <video class="post-media" [src]="media.url" controls preload="metadata"></video>
                }
              }
              <footer>
                <span>↩ {{ post.replies_count }}</span
                ><span>⟳ {{ post.reblogs_count }}</span
                ><span>♡ {{ post.favourites_count }}</span>
                @if (hasThread(status)) {
                  <button class="thread-link" type="button" (click)="openThread(status)">
                    View thread
                  </button>
                }
                @if (post.url) {
                  <a [href]="post.url" target="_blank" rel="noopener noreferrer"
                    >Open on Mastodon ↗</a
                  >
                }
              </footer>
            </article>
          } @empty {
            @if (!loading()) {
              <div class="empty-state">No matching posts in this loaded window.</div>
            }
          }
        }
      </section>
    </main>
  }
}

<ng-template #postCard let-post="post" let-muted="muted" let-anchor="anchor">
  <article class="post-card" [class.thread-muted]="muted" [class.thread-anchor]="anchor">
    <div class="post-author">
      @if (post.account.avatar) {
        <img [src]="post.account.avatar" alt="" />
      } @else {
        <span class="avatar-fallback">{{ initials(post.account) }}</span>
      }
      <div>
        <b>{{ post.account.display_name || post.account.acct }}</b
        ><small>&#64;{{ post.account.acct }} · {{ relativeDate(post.created_at) }}</small>
      </div>
    </div>
    @if (post.spoiler_text) {
      <details>
        <summary>{{ post.spoiler_text }}</summary>
        <div class="post-content" [innerHTML]="post.content"></div>
      </details>
    } @else {
      <div class="post-content" [innerHTML]="post.content"></div>
    }
    <footer>
      <span>↩ {{ post.replies_count }}</span
      ><span>⟳ {{ post.reblogs_count }}</span
      ><span>♡ {{ post.favourites_count }}</span>
      @if (post.url) {
        <a [href]="post.url" target="_blank" rel="noopener noreferrer">Open on Mastodon ↗</a>
      }
    </footer>
  </article>
</ng-template>