<div class="container my-3">
  <h1>
    Settings
  </h1>
  <div class="mb-3">
    <app-token></app-token>
  </div>
  <hr/>
  <h2>
    User Settings
  </h2>
  @if (user) {
    <div class="mb-3">
      <label class="form-label" for="userid">User ID</label>
      <div class="input-group">
        <input type="text" class="form-control" id="userid" [ngModel]="user.id" [disabled]="!!user"/>
        <button class="btn btn-outline-secondary bi-clipboard" (click)="copy(user.id)"></button>
      </div>
      <div class="form-text">
        Give this to your friends to let them add you to their polls as an admin.
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="email">E-Mail</label>
      <input type="email" class="form-control" id="email" [ngModel]="user.email" [disabled]="!!user"/>
      <div class="form-text">
        Your email cannot be changed as a registered user.
      </div>
    </div>
    <div class="mb-3">
      <label class="form-label" for="firstName">First Name</label>
      <input type="text" class="form-control" id="firstName" [(ngModel)]="user.firstName"/>
    </div>
    <div class="mb-3">
      <label class="form-label" for="lastName">Last Name</label>
      <input type="text" class="form-control" id="lastName" [(ngModel)]="user.lastName"/>
    </div>
    <button class="btn btn-primary" (click)="save()">Save</button>
  } @else {
    <div class="alert alert-warning">
      You need to <a routerLink="." (click)="login()">sign in</a> to change your name and email for notifications.
    </div>
  }
  <hr/>
  <h2>
    Push Notifications
  </h2>
  @if (user) {
    @if (pushEnabled) {
      <button class="btn btn-primary mb-3" (click)="addPush()" [disabled]="existingPush">
        Enable Push Notifications for this Device
      </button>
    } @else {
      <div class="alert alert-warning">
        Push notifications are not available on this device or browser.
      </div>
    }
    <ul class="list-group mb-3">
      @for (info of pushInfo; track info) {
        <li class="list-group-item d-flex align-items-center">
          <i class="bi-browser-{{ info.browser | lowercase }} me-3 fs-1"></i>
          <div class="flex-grow-1">
            {{ info.browser }}
            <span class="text-muted">on</span>
            {{ info.device }}
            @if (info.token.endpoint === existingPush?.endpoint) {
              <span class="badge bg-primary">This Device</span>
            }
            <br/>
            <span class="text-muted">Added {{ info.createdAt | date:'short' }}</span>
          </div>
          <button
            class="btn btn-link text-danger bi-trash ms-3"
            ngbTooltip="Remove Device"
            (click)="removePush(info)"
          ></button>
        </li>
      } @empty {
        <li class="list-group-item text-muted">
          No devices registered for push notifications.
        </li>
      }
    </ul>
  } @else {
    <div class="alert alert-warning">
      You need to <a routerLink="." (click)="login()">sign in</a> to enable push notifications.
    </div>
  }
  <hr/>
  <h2>
    Notification Preferences
  </h2>
  @if (user) {
    <table class="table">
      <thead>
        <tr>
          <th colspan="2">Event</th>
          <th>Email</th>
          <th>Push</th>
        </tr>
      </thead>
      <tbody>
        @for (category of notificationSettings; track category.title) {
          <tr>
            <th colspan="4">
              {{ category.title }}
              <div class="small text-muted fw-normal">
                {{ category.description }}
              </div>
            </th>
          </tr>
          @for (type of category.types; track type.key) {
            <tr>
              <th class="text-center">
                <i class="icon-lg text-primary-emphasis" [class]="type.icon"></i>
              </th>
              <th>
                {{ type.title }}
                <div class="small text-muted fw-normal">{{ type.description }}</div>
              </th>
              <td>
                <div class="form-check form-switch">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    [(ngModel)]="notifications[type.key + ':email']"
                    [disabled]="type.email === false"
                  />
                </div>
              </td>
              <td>
                <div class="form-check form-switch">
                  <input
                    class="form-check-input"
                    type="checkbox"
                    [(ngModel)]="notifications[type.key + ':push']"
                    [disabled]="type.push === false"
                  />
                </div>
              </td>
            </tr>
          }
        }
      </tbody>
    </table>
    <button class="btn btn-primary" (click)="saveNotificationSettings()">Save</button>
  } @else {
    <div class="alert alert-warning">
      You need to <a routerLink="." (click)="login()">sign in</a> to change your notification preferences.
    </div>
  }
</div>
