<section class="identities">
  <header class="identities__header">
    <h1>Connected accounts</h1>
    <p>Sign in with any of these. You can add or remove them at any time.</p>
  </header>

  @switch (state()) {
    @case ('loading') {
      <p class="identities__status" role="status">Loading…</p>
    }
    @case ('error') {
      <div class="identities__status identities__status--error" role="alert">
        <app-icon name="warning" [size]="18" />
        <span>Could not load your connected accounts.</span>
        <button type="button" class="identities__retry" (click)="reload()">Retry</button>
      </div>
    }
    @case ('ready') {
      @if (conflict(); as message) {
        <div class="identities__conflict" role="alert">
          <app-icon name="warning" [size]="18" />
          <span>{{ message }}</span>
        </div>
      }

      <ul class="identities__list">
        @for (identity of identities(); track identity.provider) {
          <li class="identity">
            <span class="identity__icon"><app-icon name="user" [size]="20" /></span>
            <span class="identity__body">
              <span class="identity__name">{{ label(identity.provider) }}</span>
              @if (identity.displayName) {
                <span class="identity__detail">{{ identity.displayName }}</span>
              }
            </span>
            <button
              type="button"
              class="identity__unlink"
              [disabled]="isLastIdentity() || unlinking() === identity.provider"
              [attr.title]="isLastIdentity() ? 'This is your only way to sign in - add another before removing it.' : null"
              (click)="unlink(identity.provider)"
            >
              @if (unlinking() === identity.provider) {
                <app-icon name="refresh" [size]="16" />
              } @else {
                <app-icon name="trash" [size]="16" />
              }
              <span>Remove</span>
            </button>
          </li>
        }
      </ul>

      @if (linkable().length) {
        <div class="identities__add">
          <h2>Add another</h2>
          @for (provider of linkable(); track provider) {
            <app-social-login-button [provider]="provider" returnTo="/account/identities" />
          }
        </div>
      }
    }
  }
</section>
