<div class="viewport-modal">
  <div class="modal-header dialog-header">
    <i [c8yIcon]="'installing-updates'"></i>
    <h4
      id="modal-title"
      *ngIf="!downgrade"
      translate
    >
      Update plugin
    </h4>
    <h4
      id="modal-title"
      *ngIf="downgrade"
      translate
    >
      Downgrade plugin
    </h4>
  </div>
  <div
    class="inner-scroll"
    id="modal-body"
  >
    <div class="card-block p-r-24 p-l-24 sticky-top bg-component separator-bottom">
      <c8y-package-version-select
        [packageContextPath]="plugin?.contextPath"
        [(ngModel)]="applicationVersion"
      ></c8y-package-version-select>
      <div
        class="alert alert-info"
        role="alert"
        *ngIf="plugin?.version && plugin.version === applicationVersion?.version"
      >
        <span
          translate
          ngNonBindable
          [translateParams]="applicationVersion"
        >
          Select another version, as {{ version }} is currently used.
        </span>
      </div>
      <div class="form-group">
        <label class="c8y-checkbox">
          <input
            type="checkbox"
            [(ngModel)]="updateAll"
          />
          <span></span>
          <span
            translate
            ngNonBindable
            [translateParams]="plugin"
          >
            Set version for all plugins using the same context path "{{ contextPath }}".
          </span>
        </label>
      </div>
      <p class="legend form-block">
        {{ 'Change log' | translate }}
      </p>
    </div>
    <div class="card-block p-l-24 p-r-24">

      <div
        class="markdown-content markdown-content--to-h3"
      >
        <c8y-contents-changelog
          [package]="plugin.originApp"
          [selectedVersion]="applicationVersion?.version"
          [previousVersion]="plugin?.version"
        ></c8y-contents-changelog>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button
      class="btn btn-default"
      title="{{ 'Cancel' | translate }}"
      type="button"
      (click)="cancel()"
    >
      {{ 'Cancel' | translate }}
    </button>
    <button
      class="btn btn-primary"
      title="{{ 'Set version' | translate }}"
      [disabled]="!applicationVersion || plugin?.version === applicationVersion?.version"
      (click)="update()"
    >
      {{ 'Set version' | translate }}
    </button>
  </div>
</div>