<div *ngIf="action !== 'register'" class="card">
  <div class="card-header">Licencing</div>

  <div [ngSwitch]="action" class="card-block">
    <div class="card-text">
      <ng-container *ngSwitchCase="'key'">
        <p class="key-error" *ngIf="!keyError">
          Licence key is invalid. We can't provide you more details at the
          moment
        </p>

        <p
          class="key-error"
          *ngIf="keyError"
          [innerHTML]="licenseErrors[keyError]"
        ></p>

        <p *ngIf="errorDetails"><strong>Details:</strong> {{ errorDetails }}</p>
      </ng-container>

      <ng-container *ngSwitchCase="'limit'">
        <p class="key-error">
          The registered number of users reached the limit specified for your
          licence. Please contact
          <contact-link classes="color-green" />
          or your reseller to arrange additional licences for this product.
        </p>
      </ng-container>

      <ng-container *ngSwitchCase="'update'">
        <p class="key-error">
          Update the license key by uploading the licence file or by pasting a
          license key and activation key in the inputs below.
        </p>
      </ng-container>

      <p><strong>Protocol:</strong> {{ protocol }}</p>

      <p>
        <strong>SYSSITE:</strong>
        <span
          *ngFor="let id of syssite.value; let i = index"
          [class.misskey]="missmatchedKey && missmatchedKey === id"
        >
          {{ id }}{{ i === syssite.value?.length! - 1 ? '' : ',' }}
        </span>

        <a
          class="tooltip tooltip-md tooltip-top-right"
          (click)="copySyssite(copyIcon, copyTooltip, syssite.value || [])"
        >
          <clr-icon
            #copyIcon
            class="cursor-pointer"
            shape="copy"
            size="15"
          ></clr-icon>
          <span #copyTooltip class="tooltip-content">Copy to clipboard</span>
        </a>
      </p>

      <p *ngIf="licenseKeyData && userCountLimitation" class="m-0">
        <strong>Allowed users:</strong>
        {{ licenseKeyData.users_allowed }}
      </p>

      <clr-tabs>
        <clr-tab>
          <button clrTabLink>Upload licence</button>
          <clr-tab-content>
            <input
              #licenceFile
              (change)="onFileCapture($event)"
              type="file"
              hidden
            />
            <div
              (click)="licenceFile.click()"
              appFileDrop
              (fileDrop)="onFileCapture($event, true)"
              class="drop-area"
            >
              <clr-spinner
                class="spinner-sm"
                *ngIf="licenceFileLoading"
              ></clr-spinner>
              <ng-container *ngIf="!licenceFileLoading">
                <div *ngIf="licencefile.filename === ''">
                  Drop / Browse licence file
                </div>
                <div *ngIf="licencefile.filename !== ''">
                  Selected file: <strong>{{ licencefile.filename }}</strong>
                </div>
                <div *ngIf="licenceFileError">
                  <strong>{{ licenceFileError }}</strong>
                </div>
              </ng-container>
            </div>
          </clr-tab-content>
        </clr-tab>

        <clr-tab>
          <button clrTabLink>Paste licence</button>
          <clr-tab-content>
            <form class="clr-form license-key-form">
              <p>Licence key:</p>
              <div class="clr-control-container">
                <textarea
                  [(ngModel)]="licenceKeyValue"
                  (mouseleave)="trimKeys()"
                  name="license-key-area"
                  placeholder="Paste licence key here"
                  class="clr-textarea"
                ></textarea>
              </div>
            </form>

            <form class="clr-form activation-key-form">
              <p>Activation key:</p>
              <div class="clr-control-container">
                <textarea
                  [(ngModel)]="activationKeyValue"
                  (mouseleave)="trimKeys()"
                  name="activation-key-area"
                  placeholder="Paste activation key here"
                  class="clr-textarea"
                ></textarea>
              </div>
            </form>
          </clr-tab-content>
        </clr-tab>
      </clr-tabs>
    </div>

    <div class="card-footer d-flex clr-align-items-center">
      <button
        (click)="applyKeys()"
        class="btn btn-primary apply-keys"
        [clrLoading]="applyingKeys"
        [disabled]="disableApplyButton"
      >
        Apply licence keys
      </button>

      <button
        *ngIf="isAppFreeTier.value"
        routerLink="/"
        class="btn btn-sm btn-link"
      >
        Continue with free tier
      </button>
    </div>
  </div>
</div>

<app-terms *ngIf="action === 'register'"></app-terms>
