<div class="container">
  <div class="row my-3">
    <div class="col-md-3">
      <div class="card sticky-top" style="top: 1rem">
        <div class="card-body">
          <img class="float-end logo-glow ms-2 mb-2" ngSrc="/assets/logo.png" alt="Apollusia Logo" width="64"
               height="64">
          <h5 class="card-title">
            Welcome to Apollusia!
          </h5>
          <p class="card-text">
            You can create polls and share them with your friends.
          </p>
          <a class="btn btn-primary bi-calendar-plus icon" type="button" routerLink="/poll/create">
            Create Poll
          </a>
        </div>
      </div>
    </div>
    <div class="col-md-6">
      <h1 class="mb-4">
        My {{ participated ? 'Participations' : 'Polls' }}
      </h1>
      <ul class="nav nav-pills sticky-top py-3 bg-body" style="margin-top: -1rem">
        <li class="nav-item">
          <a class="nav-link bi-calendar" routerLink="." [queryParams]="{active: null}" routerLinkActive="active"
             [routerLinkActiveOptions]="{exact: true}">
            Active
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link bi-hourglass-bottom" routerLink="." [queryParams]="{active: false}"
             routerLinkActive="active">
            Inactive
          </a>
        </li>
        <li class="nav-item">
          <a class="nav-link bi-person-check" routerLink="." [queryParams]="{active: null, participated: true}"
             routerLinkActive="active">
            Participations
          </a>
        </li>
        <li class="me-auto"></li>
        <li class="nav-item">
          <input class="form-control" type="search" placeholder="Type to search..." aria-label="Search"
                 [(ngModel)]="searchText">
        </li>
      </ul>
      <ul class="list-unstyled">
        @for (poll of polls|search:searchText; track poll._id) {
          <li class="mb-3">
            <app-card [poll]="poll" [admin]="!participated"></app-card>
          </li>
        }
        <li class="text-center text-muted if-empty">
          There is nothing here.
          Maybe you {{ searchText ? 'can try another search' : 'should create a poll' }}?
        </li>
      </ul>
    </div>
    <div class="col-md-3">
      @defer { @if (!loggedIn) {
        <div class="card">
          <div class="card-body">
            <img class="card-img" src="/assets/artwork/account.svg" alt="Account" width="100%">
            <h5 class="card-title">
              Sign In to Apollusia
              <span class="badge bg-primary">New</span>
            </h5>
            <p class="card-text">
              You can now log into Apollusia with an account, so you can manage your polls on all your devices and continue to use these features:
            </p>
            <ul class="card-text">
              <li>Email notifications for your polls</li>
              <li>Push notifications for your polls</li>
              <li>Email notifications for your participations</li>
            </ul>
            <p class="card-text">
              We will also add the following features built on accounts soon:
            </p>
            <ul>
              <li>Additional poll admins</li>
              <li>Push notifications for your participations</li>
            </ul>
            <button class="btn btn-primary w-100 mb-3" (click)="login()">
              Sign Up
            </button>
            <p class="card-text small text-muted">
              <i class="bi-info-circle"></i>
              Accounts are free, secure and forever optional.
              <a href="https://github.com/Morphclue/apollusia/issues/169" target="_blank">Learn more</a>
            </p>
          </div>
        </div>
      }}
      @if (loggedIn && unclaimed && !participated) {
        <div class="alert alert-warning">
          <p>
            It looks like some of your polls are not associated with your account yet.
          </p>
          <p>
            To ensure you can always manage them on all your devices, you can claim them now.
          </p>
          <button class="btn btn-primary" (click)="claim()">
            Claim Polls
          </button>
        </div>
      }
    </div>
  </div>
</div>
