<div class="container mt-3">
  <h2 class="text-center">Alliance</h2>
  <ul #nav="ngbNav" [(activeId)]="activeTab" class="nav-tabs" ngbNav>
    <li [ngbNavItem]="1">
      <button ngbNavLink>Alliance data</button>
      <ng-template ngbNavContent>
        @if (allianceForm) {
          <div class="mt-3">
            <div class="alert alert-secondary d-flex justify-content-between" role="alert">
              <div>Created: <span class="text-primary">{{ currentAlliance?.createdOn | date: 'dd.MM.yyyy' }}</span>
              </div>
              @if (currentAlliance?.modifiedOn) {
                <div>Modified: <span
                  class="text-primary">{{ currentAlliance?.modifiedOn | date: 'dd.MM.yyyy HH:mm' }}</span>
                  by <span class="text-primary">{{ currentAlliance?.modifiedBy }}</span></div>
              }
            </div>
          </div>
          <form [formGroup]="allianceForm" (ngSubmit)="onSubmit()">
            <div class="form-floating mb-3">
              <input [ngClass]="{
        'is-valid': f['server'].valid,
        'is-invalid': f['server'].invalid && (!f['server'].untouched || f['server'].dirty )
        }" type="number" min="0" formControlName="server" class="form-control" id="server" placeholder="469">
              <label for="server">Server</label>
              @if (f['server'].invalid && (!f['server'].untouched || f['server'].dirty)) {
                <div class="invalid-feedback">
                  @if (f['server'].hasError('required')) {
                    <p>Server is required</p>
                  }
                </div>
              }
            </div>

            <div class="form-floating mb-3">
              <input [ngClass]="{
        'is-valid': f['name'].valid,
        'is-invalid': f['name'].invalid && (!f['name'].untouched || f['name'].dirty )
        }" type="text" formControlName="name" maxlength="201" class="form-control" id="name" placeholder="Old Vikings">
              <label for="name">Name</label>
              @if (f['name'].invalid && (!f['name'].untouched || f['name'].dirty)) {
                <div class="invalid-feedback">
                  @if (f['name'].hasError('required')) {
                    <p>Name is required</p>
                  }
                  @if (f['name'].hasError('maxlength')) {
                    <p>Maximum 200 characters allowed</p>
                  }
                </div>
              }
            </div>

            <div class="form-floating mb-3">
              <input [ngClass]="{
        'is-valid': f['abbreviation'].valid,
        'is-invalid': f['abbreviation'].invalid && (!f['abbreviation'].untouched || f['abbreviation'].dirty )
        }" type="text" formControlName="abbreviation" maxlength="5" class="form-control" id="abbreviation"
                     placeholder="vis">
              <label for="abbreviation">Abbreviation</label>
              @if (f['abbreviation'].invalid && (!f['abbreviation'].untouched || f['abbreviation'].dirty)) {
                <div class="invalid-feedback">
                  @if (f['abbreviation'].hasError('required')) {
                    <p>Abbreviation is required</p>
                  }
                  @if (f['abbreviation'].hasError('maxlength')) {
                    <p>Maximum 4 characters allowed</p>
                  }
                </div>
              }
            </div>
            <div class="d-grid gap-2 col-6 mx-auto">
              <button [disabled]="allianceForm.invalid || !allianceForm.dirty" class="btn btn-success" type="submit">
                Update
              </button>
            </div>
          </form>
        }
      </ng-template>
    </li>
    <li [ngbNavItem]="2">
      <button ngbNavLink>User administration</button>
      <ng-template ngbNavContent>
        @if (activeTab === 2) {
          <ng-container>
            <app-alliance-user-administration [allianceId]="allianceId!"></app-alliance-user-administration>
          </ng-container>
        }
      </ng-template>
    </li>
    <li [ngbNavItem]="3">
      <button ngbNavLink>API Key</button>
      <ng-template ngbNavContent>
        @if (activeTab === 3) {
          <ng-container>
            <app-alliance-api-key [allianceId]="allianceId!"></app-alliance-api-key>
          </ng-container>
        }
      </ng-template>
    </li>
  </ul>
  <div [ngbNavOutlet]="nav" class="mt-2"></div>
</div>
