<div *ngIf="!(group$ | async)?.isEnabled; else inParty">
  <p
    class="optional-info"
    [innerHtml]="'COMPONENT.PARTY_MENU.EXPERIENCE_WARNING' | transloco"
  ></p>
  <ul>
    <li style="line-height: 1.3em; height: auto">
      {{ 'COMPONENT.PARTY_MENU.GUIDELINES.PARTY' | transloco }}
    </li>
    <li style="line-height: 1.3em; height: auto">
      {{ 'COMPONENT.PARTY_MENU.GUIDELINES.PARTY_LEADER_TALK' | transloco }}
    </li>
    <li style="line-height: 1.3em; height: auto">
      {{
        'COMPONENT.PARTY_MENU.GUIDELINES.PARTY_LEADER_LOOT_QUESTITEMS'
          | transloco
      }}
    </li>
    <li style="line-height: 1.3em; height: auto">
      {{ 'COMPONENT.PARTY_MENU.GUIDELINES.KEEP_PARTY_LEADER' | transloco }}
    </li>
    <li style="line-height: 1.3em; height: auto">
      {{ 'COMPONENT.PARTY_MENU.GUIDELINES.ONE_PARTY_PER_SERVER' | transloco }}
    </li>
  </ul>

  <button
    class="party-menu-button"
    (click)="launchParty()"
    [disabled]="isLaunchPartyDisabled$ | async"
  >
    {{ 'COMPONENT.PARTY_MENU.LAUNCH_PARTY' | transloco }}
  </button>

  <div class="separator">
    {{ 'COMPONENT.PARTY_MENU.INVITES' | transloco }}
  </div>

  <div *ngIf="invitations$ | async as invites">
    <div *ngIf="invites.length === 0" class="no-invites">
      {{ 'COMPONENT.PARTY_MENU.NO_INVITES' | transloco }}
    </div>
    <button
      *ngFor="let player of invites"
      class="party-menu-button"
      (click)="acceptPartyInvite(player.id)"
    >
      {{
        'COMPONENT.PARTY_MENU.ACCEPT_INVITE' | transloco: { name: player.name }
      }}
    </button>
  </div>
</div>

<ng-template #inParty>
  <div
    *ngIf="(memberCount$ | async) === 0; else notEmpty"
    style="margin-bottom: 1rem"
    class="no-players"
  >
    <span>{{ 'COMPONENT.PARTY_MENU.NO_PLAYERS_IN_PARTY' | transloco }}</span>
  </div>

  <ng-template #notEmpty>
    <div class="member-list">
      <table cellspacing="5" cellpadding="5" class="player-list-table">
        <thead class="list-header">
          <tr>
            <th>
              {{ 'COMPONENT.PARTY_MENU.TABLE_HEADERS.LEVEL' | transloco }}
            </th>
            <th>{{ 'COMPONENT.PARTY_MENU.TABLE_HEADERS.NAME' | transloco }}</th>
            <th>
              {{ 'COMPONENT.PARTY_MENU.TABLE_HEADERS.LOCATION' | transloco }}
            </th>
            <th></th>
          </tr>
        </thead>
        <tbody>
          <tr *ngFor="let player of members$ | async">
            <td>{{ player.level }}</td>
            <td>{{ player.name }}</td>
            <td>{{ player.cellName }}</td>
            <td>
              <button
                class="user-action-button"
                (click)="teleportToPlayer(player.id)"
              >
                {{ 'COMPONENT.PARTY_MENU.ACTIONS.TELEPORT' | transloco }}
              </button>
              <button
                (click)="kickMember(player.id)"
                [disabled]="!(isPartyLeader$ | async)"
                class="user-action-button"
                [ngClass]="!(isPartyLeader$ | async) ? 'hidden' : ''"
              >
                {{ 'COMPONENT.PARTY_MENU.ACTIONS.KICK' | transloco }}
              </button>
              <!--
              <button
                [disabled]="!isPartyLeader"
                class="user-action-button"
                [ngClass]="!isPartyLeader ? 'hidden' : ''"
                (click)="changeLeader(player.id)"
              >
                {{ 'COMPONENT.PARTY_MENU.ACTIONS.MAKE_LEADER' | transloco }}
              </button>
              -->
            </td>
          </tr>
        </tbody>
      </table>
    </div>
  </ng-template>

  <button class="party-menu-button btn" (click)="leave()">
    {{ 'COMPONENT.PARTY_MENU.LEAVE_PARTY' | transloco }}
  </button>
</ng-template>
