<c8y-title>{{ application | humanizeAppName | async }}</c8y-title>

<c8y-breadcrumb *ngIf="!isMicroservice">
  <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Ecosystem' | translate"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="'c8y-modules'"
    [label]="'Applications' | translate"
    [path]="'ecosystem/applications'"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="breadcrumbConfig?.icon"
    [label]="breadcrumbConfig?.label"
    [path]="breadcrumbConfig?.path"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="application | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Properties' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<c8y-breadcrumb *ngIf="isMicroservice">
  <c8y-breadcrumb-item [icon]="'c8y-atom'" [label]="'Ecosystem' | translate"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item
    [icon]="breadcrumbConfig?.icon"
    [label]="breadcrumbConfig?.label"
    [path]="breadcrumbConfig?.path"
  ></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="application | humanizeAppName | async"></c8y-breadcrumb-item>
  <c8y-breadcrumb-item [label]="'Properties' | translate"></c8y-breadcrumb-item>
</c8y-breadcrumb>

<div class="row">
  <div [ngClass]="{ 'col-md-8': !isActivityLogSupported, 'col-md-12': isActivityLogSupported }">
    <div
      *ngIf="application"
      [ngClass]="{ 'd-grid grid__col--7-5--md': isActivityLogSupported }"
      class="card content-fullpage"
    >
      <form
        (ngSubmit)="formGroup.valid && save(formGroup.value)"
        [formGroup]="formGroup"
        class="d-flex d-col content-fullpage"
        novalidate
      >
        <div *ngIf="!isLoading" class="d-contents">
          <div class="card-block separator-bottom large-padding flex-no-shrink">
            <div class="d-flex-md a-i-start text-center text-left-md">
              <c8y-app-icon
                *ngIf="!isPackage && !isFeature && !isMicroservice && !isExternal"
                [app]="application"
                [contextPath]="application.contextPath"
                [name]="application.name"
                class="icon-48"
              ></c8y-app-icon>
              <i *ngIf="isPackage" c8yIcon="big-parcel" class="icon-48"></i>
              <i *ngIf="isFeature" c8yIcon="tab" class="icon-48"></i>
              <i *ngIf="isMicroservice" c8yIcon="microchip" class="icon-48"></i>
              <i *ngIf="isExternal" c8yIcon="globe1" class="icon-48"></i>

              <div class="p-t-md-16 p-l-md-16 p-r-md-32 flex-grow">
                <h4 class="text-medium m-b-8">{{ application | humanizeAppName | async }}</h4>
                <p *ngIf="!isOwner">
                  <em class="text-muted">
                    {{ application.description || ('No description available.' | translate) }}
                  </em>
                </p>
                <div *ngIf="isOwner" class="form-group m-b-0">
                  <label
                    [ngClass]="{ updated: formGroup?.controls?.description?.dirty }"
                    class="editable"
                  >
                    <textarea
                      c8y-textarea-autoresize
                      class="form-control no-resize"
                      formControlName="description"
                      name="description"
                      placeholder="{{ 'No description available.' | translate }}"
                    ></textarea>
                  </label>
                </div>
              </div>
              <div class="text-right-md m-t-4">
                <span [ngClass]="appState?.class" class="label">{{
                  appState?.label | translate
                }}</span>
                <div class="fit-w m-t-2" *ngIf="isPackage || isMicroservice">
                  <label class="text-label-small" translate>Version:</label>
                  <small class="p-l-4 text-bold">{{ application.manifest?.version }}</small>
                </div>
                <div class="fit-w m-t-2">
                  <label class="text-label-small" translate>Creation time:</label>
                  <small class="p-l-4 text-bold">{{ binaryMo?.creationTime | c8yDate }}</small>
                </div>
                <div class="m-t-8">
                  <button
                    (click)="openApp(application); $event.stopPropagation()"
                    [disabled]="disableOpenInBrowser"
                    *ngIf="canOpenInBrowser"
                    class="btn btn-default btn-xs"
                    title="{{ 'Open' | translate }}"
                  >
                    <i [c8yIcon]="'external-link'"></i>
                    {{ 'Open' | translate }}
                  </button>
                  <div *ngIf="canOpenInBrowser && disableOpenInBrowser">
                    <small class="text-muted" translate
                      >The application is overwritten by a custom application sharing the same
                      path</small
                    >
                  </div>
                  <span *ngIf="isCustomMicroservice">
                    <button
                      (click)="subscribe()"
                      *ngIf="!isSubscribed"
                      class="btn btn-default btn-xs"
                      title="{{ 'Subscribe' | translate }}"
                    >
                      <i [c8yIcon]="'check-circle-o'"></i>
                      {{ 'Subscribe' | translate }}
                    </button>
                    <button
                      (click)="unsubscribe()"
                      *ngIf="isSubscribed"
                      class="btn btn-default btn-xs"
                      title="{{ 'Unsubscribe' | translate }}"
                    >
                      <i [c8yIcon]="'minus-circle'"></i>
                      {{ 'Unsubscribe' | translate }}
                    </button>
                  </span>
                </div>
              </div>
            </div>
          </div>
          <div class="inner-scroll bg-white flex-grow">
            <div class="card-block large-padding">
              <div *ngIf="isPackage" class="row p-16">
                <c8y-properties-list
                  [data]="application.manifest"
                  [properties]="packageProperties"
                  [title]="'Package details' | translate"
                  icon="info"
                ></c8y-properties-list>
              </div>
              <div *ngIf="package" class="row p-16">
                <c8y-properties-list
                  [data]="package.manifest"
                  [properties]="packageProperties"
                  [title]="'Source package information' | translate"
                  icon="info"
                ></c8y-properties-list>
              </div>
              <div class="row">
                <div class="col-sm-5">
                  <c8y-form-group>
                    <label>ID</label>
                    <input
                      [readonly]="true"
                      autocomplete="off"
                      class="form-control"
                      formControlName="id"
                      name="id"
                      type="text"
                    />
                  </c8y-form-group>
                </div>
                <div class="col-sm-7">
                  <c8y-form-group>
                    <label>{{ 'Name' | translate }}</label>
                    <input
                      [readonly]="!isOwner"
                      class="form-control"
                      formControlName="name"
                      name="name"
                      placeholder="{{ 'e.g. My application' | translate }}"
                      required
                      type="text"
                    />
                    <c8y-messages>
                      <c8y-message *ngIf="formGroup?.controls?.name?.errors?.required" translate>
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>
                </div>
              </div>

              <div class="row">
                <div class="col-sm-5">
                  <c8y-form-group>
                    <label>{{ 'Application key' | translate }}</label>
                    <input
                      [readonly]="application.id || !isOwner"
                      class="form-control"
                      name="key"
                      formControlName="key"
                      placeholder="{{ 'e.g. my-application-key' | translate }}"
                      required
                      type="text"
                    />
                    <c8y-messages>
                      <c8y-message *ngIf="formGroup?.controls?.key?.errors?.required" translate>
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>
                </div>

                <div class="col-sm-7">
                  <c8y-form-group>
                    <label>{{ 'Type' | translate }}</label>
                    <div>
                      <div *ngIf="application.id">
                        <p class="form-control-static">
                          <i [c8yIcon]="iconMap[application.type]"></i>
                          <span>
                            {{ application.type | translate }}
                          </span>
                        </p>
                      </div>
                    </div>
                  </c8y-form-group>
                </div>
              </div>

              <div [ngSwitch]="application.type">
                <div *ngSwitchCase="'HOSTED'">
                  <c8y-form-group>
                    <label>{{ 'Path' | translate }}</label>
                    <div class="input-group">
                      <span class="input-group-addon">/apps/</span>
                      <input
                        [readOnly]="application.id || !isOwner"
                        class="form-control"
                        name="contextPath"
                        placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
                        required
                        type="text"
                        formControlName="contextPath"
                      />
                    </div>
                    <c8y-messages>
                      <c8y-message
                        *ngIf="formGroup?.controls?.contextPath?.errors?.required"
                        translate
                      >
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>
                </div>

                <div *ngSwitchCase="'MICROSERVICE'">
                  <c8y-form-group>
                    <label>{{ 'Path' | translate }}</label>
                    <div class="input-group">
                      <span class="input-group-addon">/service/</span>
                      <input
                        [readOnly]="application.id || !isOwner"
                        class="form-control"
                        name="contextPath"
                        placeholder="{{ 'e.g. my-microservice`used in URL`' | translate }}"
                        required
                        type="text"
                        formControlName="contextPath"
                      />
                    </div>
                    <c8y-messages>
                      <c8y-message
                        *ngIf="formGroup?.controls?.contextPath?.errors?.required"
                        translate
                      >
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>
                  <div class="row">
                    <div *ngIf="application.manifest.version" class="col-sm-4 m-b-16 flex-auto">
                      <label>{{ 'Version' | translate }}</label>
                      <p class="form-control-static">
                        {{ application.manifest.version }}
                      </p>
                    </div>
                    <div *ngIf="application.manifest.isolation" class="col-sm-4 m-b-16 flex-auto">
                      <label>{{ 'Isolation' | translate }}</label>
                      <p class="form-control-static">
                        <span *ngIf="singleTenant">
                          <i [c8yIcon]="'c8y-enterprise'" class="c8y-icon-duocolor h4"></i>
                          {{ 'Single tenant' | translate }}
                        </span>
                        <span *ngIf="!singleTenant">
                          <i [c8yIcon]="'c8y-sub-tenants'" class="c8y-icon-duocolor h4"></i>
                          {{ 'Multi tenant' | translate }}
                        </span>
                      </p>
                    </div>
                    <div *ngIf="application.manifest.isolation" class="col-sm-4 m-b-16 flex-auto">
                      <label>{{ 'Billing mode' | translate }}</label>
                      <p class="form-control-static">
                        <span
                          *ngIf="subscription"
                          [tooltip]="'Resources usage assigned to: Owner' | translate"
                        >
                          {{ 'Subscription' | translate }}
                        </span>
                        <span
                          *ngIf="!subscription && singleTenant"
                          [tooltip]="'Resources usage assigned to: Subscriber | translate'"
                        >
                          {{ 'Resources' | translate }}
                        </span>
                        <span
                          *ngIf="!subscription && !singleTenant"
                          [tooltip]="'Resources usage assigned to: Owner' | translate"
                        >
                          {{ 'Resources' | translate }}
                        </span>
                      </p>
                    </div>
                  </div>

                  <div *ngIf="application.manifest.provider" class="legend form-block m-t-40">
                    {{ 'Provider' | translate }}
                  </div>
                  <div class="list-inline" *ngIf="application.manifest.provider">
                    <div *ngIf="application.manifest.provider.name">
                      <div class="col-sm-4 m-b-16">
                        <label>{{ 'Name' | translate }}</label>
                        <p class="form-control-static">
                          {{ application.manifest.provider.name }}
                        </p>
                      </div>
                    </div>
                    <div *ngIf="application.manifest.provider.domain">
                      <div class="col-sm-4 m-b-16">
                        <label>{{ 'Domain' | translate }}</label>
                        <p class="form-control-static">
                          {{ application.manifest.provider.domain }}
                        </p>
                      </div>
                    </div>
                    <div *ngIf="application.manifest.provider.support">
                      <div class="col-sm-4 m-b-16">
                        <label>{{ 'Support' | translate }}</label>
                        <p class="form-control-static">
                          {{ application.manifest.provider.support }}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>

                <div *ngSwitchCase="'REPOSITORY'">
                  <c8y-form-group>
                    <label>{{ 'Path' | translate }}</label>
                    <div class="input-group">
                      <span class="input-group-addon"> /apps/ </span>
                      <input
                        [readOnly]="application.id || !isOwner"
                        class="form-control"
                        formControlName="contextPath"
                        name="contextPath"
                        placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
                        required
                        type="text"
                      />
                    </div>
                    <c8y-messages>
                      <c8y-message
                        *ngIf="formGroup?.controls?.contextPath?.errors?.required"
                        translate
                      >
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>

                  <c8y-form-group>
                    <label>{{ 'Server URL' | translate }}</label>
                    <input
                      class="form-control"
                      name="resourcesUrl"
                      formControlName="resourcesUrl"
                      placeholder="{{ 'e.g. my-application`used in URL`' | translate }}"
                      required
                      type="url"
                    />
                    <c8y-messages>
                      <c8y-message
                        *ngIf="formGroup?.controls?.resourcesUrl?.errors?.required"
                        translate
                      >
                        This field is required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>

                  <div class="form-group">
                    <label> {{ 'Username' | translate }}</label>
                    <input
                      class="form-control"
                      formControlName="username"
                      name="username"
                      type="text"
                    />
                  </div>

                  <div class="form-group">
                    <label>{{ 'Password' | translate }}</label>
                    <input
                      class="form-control"
                      formControlName="password"
                      name="password"
                      type="text"
                    />
                  </div>
                </div>

                <div *ngSwitchCase="'EXTERNAL'">
                  <c8y-form-group>
                    <label>{{ 'External URL' | translate }}</label>
                    <input
                      [pattern]="'^(?!javascript:).+'"
                      [readOnly]="!isOwner"
                      class="form-control"
                      formControlName="externalUrl"
                      name="externalUrl"
                      placeholder="{{ 'e.g.' | translate }} http://www.example.com/"
                      required
                      type="url"
                    />
                    <c8y-messages>
                      <c8y-message
                        *ngIf="formGroup?.controls?.externalUrl?.errors?.required"
                        translate
                      >
                        This field is required.
                      </c8y-message>
                      <c8y-message
                        *ngIf="formGroup?.controls?.externalUrl?.errors?.pattern"
                        translate
                      >
                        Valid URL required.
                      </c8y-message>
                    </c8y-messages>
                  </c8y-form-group>
                </div>
              </div>
            </div>
          </div>
          <ng-container *ngIf="isCustomMicroservice">
            <div *ngIf="!isLoading" class="d-contents">
              <c8y-upload-archive
                [(application)]="application"
                (refresh)="onNewArchive()"
              ></c8y-upload-archive>
            </div>
          </ng-container>
          <div
            *ngIf="application && !!isOwner && hasAdminPermissions"
            class="card-footer separator"
          >
            <button
              (click)="cancel()"
              class="btn btn-default"
              title="{{ 'Cancel' | translate }}"
              type="button"
            >
              {{ 'Cancel' | translate }}
            </button>
            <button
              (click)="delete()"
              *ngIf="canDelete"
              class="btn btn-danger"
              title="{{ 'Delete' | translate }}"
              type="button"
            >
              {{ 'Delete' | translate }}
            </button>
            <button
              [disabled]="!application.type || formGroup.invalid || formGroup.pristine"
              class="btn btn-primary btn-form"
              title="{{ 'Save' | translate }}"
              type="submit"
            >
              {{ 'Save' | translate }}
            </button>
          </div>
        </div>
      </form>

      <div *ngIf="isActivityLogSupported" class="content-fullpage d-flex d-col bg-gray-white">
        <div class="card-header separator">
          <h4 class="card-title" translate>Activity log</h4>
          <div class="m-l-auto">
            <button
              (click)="load()"
              class="btn btn-link"
              title="{{ 'Reload' | translate }}"
              type="button"
            >
              <i [ngClass]="{ 'icon-spin': isLoading }" c8yIcon="refresh"></i>
              {{ 'Reload' | translate }}
            </button>
          </div>
        </div>
        <div *ngIf="isLoading" class="p-16 text-center">
          <c8y-loading></c8y-loading>
        </div>
        <c8y-activity-log
          *ngIf="!isLoading"
          [hasAdminPermissions]="hasAdminPermissions"
          [application]="application"
          class="d-contents"
        ></c8y-activity-log>
      </div>
    </div>
  </div>
</div>