<c8y-title>{{ 'Default subscriptions' | translate }}</c8y-title>

<c8y-breadcrumb>
  <c8y-breadcrumb-item [label]="'Ecosystem' | translate" [icon]="'c8y-atom'"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [label]="'Default subscriptions' | translate"
    [icon]="'c8y-atom'"
  ></c8y-breadcrumb-item>
</c8y-breadcrumb>

<form [formGroup]="form" (ngSubmit)="save()">
  <div class="card card--fullpage col-lg-max">
    <div class="card-header separator">
      <div class="card-title" translate>Applications</div>
    </div>
    <div class="inner-scroll">
      <div class="sticky-top separator-bottom">
        <div class="d-flex">
          <div class="col-sm-6 col-xs-6 p-24 p-t-16 p-l-xs-16">
            <p translate>
              Configure default subscriptions in the platform, both for tenant creation and for
              platform upgrade. To display a full list of available applications, override inherited
              settings.
            </p>
          </div>
          <div class="col-sm-6 col-xs-6 bg-level-1 p-16 text-center separator-bottom">
            <div class="row">
              <div class="col-sm-6 col-xs-6">
                <p><strong translate>Subscribed on tenant creation</strong></p>
                <div>
                  <label class="c8y-switch" title="{{ 'Override inherited' | translate }}">
                    <input type="checkbox" formControlName="overrideOnCreationSubscriptions" />
                    <span></span>
                    <span>
                      {{ 'Override inherited' | translate }}
                    </span>
                  </label>
                </div>
              </div>
              <div class="col-sm-6 col-xs-6">
                <p><strong translate>Subscribed on platform upgrade</strong></p>
                <div>
                  <label class="c8y-switch" title="{{ 'Override inherited' | translate }}">
                    <input type="checkbox" formControlName="overrideOnUpgradeSubscriptions" />
                    <span></span>
                    <span>
                      {{ 'Override inherited' | translate }}
                    </span>
                  </label>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="card-block" *ngIf="loading"></div>
      <div class="card-block card-block d-flex a-i-center j-c-center d-col" *ngIf="loading">
        <c8y-loading></c8y-loading>
      </div>
      <div class="card-block" *ngIf="loading"></div>

      <ng-container formArrayName="appRows">
        <div class="bg-level-1" *ngIf="!loading && isEmptyView()"></div>
        <div class="card-block bg-level-0" *ngIf="!loading && isEmptyView()">
          <c8y-ui-empty-state
            [icon]="'c8y-c8y-data'"
            [title]="'No application subscriptions yet.' | translate"
            [subtitle]="
              'Select &quot;Override inherited&quot; to define the list of subscribed applications.'
                | translate
            "
          ></c8y-ui-empty-state>
        </div>
        <div class="bg-level-1" *ngIf="!loading && isEmptyView()"></div>

        <div *ngFor="let appRowControl of form.get('appRows')['controls']; let i = index">
          <ng-container
            *ngIf="shouldShowAppRow(appRowControl.getRawValue())"
            formArrayName="{{ i }}"
          >
            <div class="d-flex a-i-stretch">
              <div class="col-sm-6 col-xs-6 separator-bottom">
                <div class="c8y-list__item__block">
                  <div class="c8y-list__item__appicon">
                    <c8y-app-icon
                      [app]="appRowControl.value.app"
                      [name]="appRowControl.value.app.name"
                      [contextPath]="appRowControl.value.app.contextPath"
                    ></c8y-app-icon>
                  </div>
                  <div class="c8y-list__item__body" data-cy="defaultSubscriptionForm--c8y-list_item">
                    <div class="content-flex-30">
                      <div class="col-6">
                        <p
                          class="text-truncate"
                          title="{{ appRowControl.value.app | humanizeAppName | async }}"
                        >
                          {{ appRowControl.value.app | humanizeAppName | async }}
                        </p>
                        <small class="text-muted">{{ appRowControl.value.app.contextPath }}</small>
                      </div>
                      <div class="col-6 text-right-sm">
                        <p>
                          <span class="text-label-small m-r-4" translate>Tenant ID</span>
                          {{ appRowControl.value.app.owner.tenant.id }}
                        </p>
                        <!-- TODO: uncomment when company name is available
                            <p>
                            <span class="text-label-small m-r-4" translate>Company</span>
                            <small class="text-muted">company name</small>
                          </p> -->
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div
                class="col-sm-3 col-xs-3 bg-level-1 separator-bottom d-flex j-c-center a-i-center"
              >
                <label
                  class="c8y-checkbox"
                  [ngClass]="{ disabled: appRowControl.controls.subscribedOnCreation.disabled }"
                >
                  <input type="checkbox" formControlName="subscribedOnCreation" />
                  <span *ngIf="!appRowControl.controls.subscribedOnCreation.disabled"></span>
                  <span
                    *ngIf="appRowControl.controls.subscribedOnCreation.disabled"
                    title="{{ disabledCheckboxHint | translate }}"
                  ></span>
                  <span class="sr-only">{{ 'Subscribed on tenant creation' | translate }}</span>
                </label>
              </div>

              <div
                class="col-sm-3 col-xs-3 bg-level-1 separator-bottom d-flex j-c-center a-i-center"
              >
                <label
                  class="c8y-checkbox"
                  [ngClass]="{ disabled: appRowControl.controls.subscribedOnUpgrade.disabled }"
                >
                  <input type="checkbox" formControlName="subscribedOnUpgrade" />
                  <span *ngIf="!appRowControl.controls.subscribedOnUpgrade.disabled"></span>
                  <span
                    *ngIf="appRowControl.controls.subscribedOnUpgrade.disabled"
                    title="{{ disabledCheckboxHint | translate }}"
                  ></span>
                  <span class="sr-only">{{ 'Subscribed on platform upgrade' | translate }}</span>
                </label>
              </div>
            </div>
          </ng-container>
        </div>
      </ng-container>
    </div>
    <div class="card-footer separator">
      <button
        class="btn btn-primary"
        type="submit"
        title="{{ 'Save default subscriptions' | translate }}"
        [disabled]="form.invalid || form.pristine"
      >
        {{ 'Save' | translate }}
      </button>
    </div>
  </div>
</form>