<rd-header>
  <rd-header-title title-text="Extensions"></rd-header-title>
  <rd-header-content>Portainer extensions</rd-header-content>
</rd-header>

<information-panel title-text="Information">
  <span class="text-muted" style="font-size: 90%;">
    <p>
      Portainer CE is a great way of managing clusters, provisioning containers and services and managing container environment lifecycles. To extend the benefit of Portainer CE
      even more, and to address the needs of larger, complex or critical environments, the Portainer team provides a growing range of low-cost Extensions.
    </p>

    <p>
      To ensure that Portainer remains the best choice for managing production container platforms, the Portainer team have chosen a modular, extensible design approach, where
      additional capability can be added to the Portainer CE core as needed, and at very low cost.
    </p>

    <p>
      Available through a simple subscription process from the list below, Portainer Extensions provide a simple way to enhance Portainer CE’s core functionality through
      incremental capability in important areas.
    </p>

    <p>
      For additional information on Portainer Extensions, see our website
      <a href="https://www.portainer.io/products-services/portainer-extension-software/" target="_blank">here</a>.
    </p>
  </span>
</information-panel>

<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-body>
        <form class="form-horizontal" name="extensionEnableForm">
          <div class="col-sm-12 form-section-title">
            Enable extension
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <p class="small text-muted" ng-if="!state.offlineActivation">
                Portainer will download the latest version of the extension. Ensure that you have a valid license.
              </p>
              <p class="small text-muted" ng-if="state.offlineActivation">
                You will need to upload the extension archive manually. Ensure that you have a valid license.
              </p>
              <p class="small text-muted" ng-if="state.offlineActivation">
                You can download the latest version of our extensions <a target="_blank" href="https://downloads.portainer.io/extensions.zip">here</a>.
              </p>
              <p>
                <a class="small interactive" ng-if="!state.offlineActivation" ng-click="state.offlineActivation = true;">
                  <i class="fa fa-toggle-off space-right" aria-hidden="true"></i> Switch to offline activation
                </a>
                <a class="small interactive" ng-if="state.offlineActivation" ng-click="state.offlineActivation = false;">
                  <i class="fa fa-wifi space-right" aria-hidden="true"></i> Switch to online activation
                </a>
              </p>
            </div>
          </div>

          <div class="form-group">
            <label for="extension_license" class="col-sm-2 control-label text-left">License</label>
            <div class="col-sm-10">
              <input
                type="text"
                name="extension_license"
                class="form-control"
                ng-model="formValues.License"
                ng-change="isValidLicenseFormat(extensionEnableForm)"
                required
                placeholder="Enter a license key here"
              />
            </div>
          </div>

          <div class="form-group" ng-show="extensionEnableForm.extension_license.$invalid">
            <div class="col-sm-12 small text-warning">
              <div ng-messages="extensionEnableForm.extension_license.$error">
                <p ng-message="required"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> This field is required.</p>
                <p ng-message="invalidLicense"><i class="fa fa-exclamation-triangle" aria-hidden="true"></i> Invalid license format.</p>
              </div>
            </div>
          </div>

          <div class="form-group" ng-if="state.offlineActivation">
            <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="enableExtension()"
                ng-disabled="state.actionInProgress || !extensionEnableForm.$valid || (state.offlineActivation && !formValues.ExtensionFile)"
                button-spinner="state.actionInProgress"
                style="margin-left: 0px;"
              >
                <span ng-hide="state.actionInProgress">Enable extension</span>
                <span ng-show="state.actionInProgress">Enabling extension...</span>
              </button>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>

<div class="row" ng-if="extensions && extensions.length > 0">
  <div class="col-sm-12">
    <extension-list current-date="state.currentDate" extensions="extensions"></extension-list>
  </div>
</div>

<information-panel title-text="Error" ng-if="extensions && extensions.length === 0">
  <span class="small text-muted">
    <p>
      <i class="fa fa-exclamation-triangle orange-icon" aria-hidden="true"></i>
      Portainer must be connected to the Internet to fetch the list of available extensions.
    </p>
  </span>
</information-panel>
