<div class="card content-fullpage d-col">
  <div class="card-header p-0">
    <c8y-ui-tabs
      class="card-has-tabs card-tabs"
      [tabs]="tabs"
      [orientation]="'horizontal'"
    ></c8y-ui-tabs>
  </div>
  <div class="inner-scroll bg-level-0 flex-grow">
    <form class="card-block--formly fit-h">
      <router-outlet (activate)="onActivate($event)"></router-outlet>
    </form>
  </div>
  <div
    class="card-footer separator sticky-bottom"
    *ngIf="componentInstance?.fields?.length > 0"
  >
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="componentInstance.cancel()"
      [disabled]="!componentInstance.form.dirty"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Save' | translate }}"
      type="button"
      [disabled]="componentInstance.form.invalid || !componentInstance.form.dirty"
      (click)="componentInstance.save()"
    >
      {{ 'Save' | translate }}
    </button>
  </div>
</div>