<rd-header>
  <rd-header-title title-text="Extension details"></rd-header-title>
  <rd-header-content> <a ui-sref="portainer.extensions">Portainer extensions</a> &gt; {{ extension.Name }} </rd-header-content>
</rd-header>

<div class="row" ng-if="extension">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <div style="display: flex;">
          <div style="flex-grow: 4; display: flex; flex-direction: column; justify-content: space-between;">
            <div class="form-group">
              <div class="text-muted" style="font-size: 150%;"> {{ extension.Name }} extension </div>

              <div class="small text-muted" style="margin-top: 5px;"> By <a href="https://portainer.io" href="_blank">Portainer.io</a> </div>
            </div>

            <div class="form-group">
              <div class="text-muted">
                {{ extension.ShortDescription }}
              </div>
            </div>
          </div>

          <div style="flex-grow: 1; border-left: 1px solid #777;">
            <div class="form-group" style="margin-left: 40px;">
              <div style="font-size: 125%; border-bottom: 2px solid #2d3e63; padding-bottom: 5px;">
                <span ng-if="extension.Enabled">Enabled</span>
                <span ng-if="!extension.Enabled && extension.License.Expiration && !extension.License.Valid">Expired</span>
                <span ng-if="!extension.Enabled && !extension.License.Expiration">{{ extension.Price }}</span>
              </div>

              <div class="small text-muted col-sm-12" style="margin: 15px 0 15px 0;" ng-if="!extension.Enabled">
                {{ extension.PriceDescription }}
              </div>

              <div style="margin-top: 10px; margin-bottom: 95px;" ng-if="!extension.Enabled && extension.Available">
                <label for="instances_qty" class="col-sm-7 control-label text-left" style="margin-top: 7px;">Instances</label>
                <div class="col-sm-5">
                  <input type="number" class="form-control" ng-model="formValues.instances" id="instances_qty" placeholder="1" min="1" />
                </div>
              </div>

              <div style="margin-top: 15px;" ng-if="!extension.Enabled && extension.Available">
                <a href="{{ extension.ShopURL }}&quantity={{ formValues.instances }}" target="_blank" class="btn btn-primary btn-sm" style="width: 100%; margin-left: 0;">
                  Buy
                </a>
              </div>

              <div style="margin-top: 10px;" ng-if="!extension.Enabled && extension.Available">
                <a ui-sref="portainer.extensions" class="btn btn-primary btn-sm" style="width: 100%; margin-left: 0;">
                  Add license key
                </a>
              </div>

              <div style="margin-top: 15px;" ng-if="!extension.Enabled && !extension.Available">
                <btn class="btn btn-primary btn-sm" style="width: 100%; margin-left: 0;" disabled>Coming soon</btn>
              </div>

              <div style="margin-top: 15px;" ng-if="extension.Enabled && extension.UpdateAvailable && !state.offlineUpdate">
                <button
                  type="button"
                  class="btn btn-primary btn-sm"
                  ng-click="updateExtensionOnline(extension)"
                  ng-disabled="state.onlineUpdateInProgress"
                  button-spinner="state.onlineUpdateInProgress"
                  style="width: 100%; margin-left: 0;"
                >
                  <span ng-hide="state.onlineUpdateInProgress">Update via Internet</span>
                  <span ng-show="state.onlineUpdateInProgress">Updating extension...</span>
                </button>
              </div>

              <div style="margin-top: 5px;" ng-if="extension.Enabled">
                <button
                  type="button"
                  class="btn btn-danger btn-sm"
                  ng-click="deleteExtension(extension)"
                  ng-disabled="state.deleteInProgress"
                  button-spinner="state.deleteInProgress"
                  style="width: 100%; margin-left: 0;"
                >
                  <span ng-hide="state.deleteInProgress">Delete</span>
                  <span ng-show="state.deleteInProgress">Deleting extension...</span>
                </button>
              </div>

              <div style="margin-top: 15px;" ng-if="extension.Enabled && extension.UpdateAvailable">
                <p>
                  <a class="small interactive" ng-if="!state.offlineUpdate" ng-click="state.offlineUpdate = true;">
                    <i class="fa fa-toggle-off space-right" aria-hidden="true"></i> Switch to offline update
                  </a>
                  <a class="small interactive" ng-if="state.offlineUpdate" ng-click="state.offlineUpdate = false;">
                    <i class="fa fa-wifi space-right" aria-hidden="true"></i> Switch to online update
                  </a>
                </p>
              </div>
            </div>
          </div>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="extension && state.offlineUpdate">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal">
          <div class="col-sm-12 form-section-title">
            <span>
              Offline update
            </span>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <p class="small text-muted" ng-if="state.offlineUpdate">
                You will need to upload the extension archive manually. You can download the latest version of our extensions
                <a target="_blank" href="https://download.portainer.io/extensions.zip">here</a>.
              </p>
            </div>
          </div>
          <div class="form-group" ng-if="state.offlineUpdate">
            <div class="col-sm-12">
              <button type="button" class="btn btn-primary btn-sm" ngf-select ng-model="formValues.ExtensionFile" style="margin-left: 0px;">Select file</button>
              <span style="margin-left: 5px;">
                {{ formValues.ExtensionFile.name }}
                <i class="fa fa-times red-icon" ng-if="!formValues.ExtensionFile" aria-hidden="true"></i>
              </span>
            </div>
          </div>
          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-click="updateExtensionOffline(extension)"
                ng-disabled="state.offlineUpdateInProgress || !formValues.ExtensionFile"
                button-spinner="state.offlineUpdateInProgress"
                style="margin-left: 0px;"
              >
                <span ng-hide="state.offlineUpdateInProgress">Update extension</span>
                <span ng-show="state.offlineUpdateInProgress">Updating extension...</span>
              </button>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="extension">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <div class="col-sm-12 form-section-title">
          <span>
            Description
          </span>
        </div>
        <div class="form-group" ng-if="extension.Description">
          <div class="text-muted" style="font-size: 90%;" ng-bind-html="extension.Description"></div>
        </div>
        <div class="form-group" ng-if="!extension.Description">
          <div class="small text-muted">
            <p>
              <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
              Unable to provide a description in an offline environment.
            </p>
          </div>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="extension.Description && extension.Images">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <div class="col-sm-12 form-section-title">
          <span>
            Screenshots
          </span>
        </div>
        <div style="text-align: center;">
          <div ng-repeat="image in extension.Images" style="margin-top: 25px; cursor: zoom-in;">
            <img ng-src="{{ image }}" ng-click="enlargeImage(image)" style="max-width: 1024px;" />
          </div>
        </div>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
