<div class="row">
  <div class="col-sm-12">
    <rd-widget>
      <rd-widget-header icon="key" feather-icon="true" title-text="SSL certificate"></rd-widget-header>
      <rd-widget-body>
        <form class="form-horizontal" name="$ctrl.sslForm">
          <span class="small">
            <p class="text-muted vertical-center">
              <pr-icon icon="'alert-circle'" feather="true" class-name="'icon-warning =vertical-center'"></pr-icon>
              Forcing HTTPs only will cause Portainer to stop listening on the HTTP port. Any edge agent environment that is using HTTP will no longer be available.
            </p>
          </span>
          <div class="form-group">
            <por-switch-field
              checked="$ctrl.formValues.forceHTTPS"
              label="'Force HTTPS only'"
              on-change="($ctrl.onChangeForceHTTPS)"
              field-class="'col-sm-12'"
              label-class="'col-sm-2'"
            ></por-switch-field>
          </div>

          <div class="form-group">
            <span class="col-sm-12 control-label"> Provide a new SSL Certificate to replace the existing one that is used for HTTPS connections. </span>
          </div>

          <div class="form-group">
            <span class="col-sm-12"> Upload a X.509 certificate, commonly a crt, a cer, or a pem file. </span>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.certFile" ngf-pattern="$ctrl.certFilePattern" name="certFile"> Select file </button>
              <span style="margin-left: 5px">
                {{ $ctrl.formValues.certFile.name }}
                <pr-icon icon="'x-circle'" feather="true" class-name="'icon-danger'" ng-if="!$ctrl.formValues.certFile"></pr-icon>
              </span>
            </div>
          </div>
          <div class="form-group col-md-12" ng-show="$ctrl.sslForm.certFile.$invalid">
            <div class="small text-warning">
              <div ng-messages="$ctrl.sslForm.certFile.$error">
                <p ng-message="pattern"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> File type is invalid.</p>
              </div>
            </div>
          </div>

          <div class="form-group">
            <span class="col-sm-12"> Upload a private key, commonly a key, or a pem file. </span>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button class="btn btn-sm btn-primary" ngf-select ng-model="$ctrl.formValues.keyFile" ngf-pattern="$ctrl.keyFilePattern" name="keyFile"> Select file </button>
              <span style="margin-left: 5px">
                {{ $ctrl.formValues.keyFile.name }}
                <pr-icon icon="'x-circle'" feather="true" class-name="'icon-danger'" ng-if="!$ctrl.formValues.keyFile"></pr-icon>
              </span>
            </div>
          </div>
          <div class="form-group col-md-12" ng-show="$ctrl.sslForm.keyFile.$invalid">
            <div class="small text-warning">
              <div ng-messages="$ctrl.sslForm.keyFile.$error">
                <p ng-message="pattern"> <i class="fa fa-exclamation-triangle" aria-hidden="true"></i> File type is invalid.</p>
              </div>
            </div>
          </div>

          <div class="form-group">
            <div class="col-sm-12">
              <button
                type="button"
                class="btn btn-primary btn-sm"
                ng-disabled="$ctrl.state.actionInProgress || !$ctrl.isFormChanged()"
                ng-click="$ctrl.save()"
                button-spinner="$ctrl.state.actionInProgress"
                analytics-on
                analytics-if="$ctrl.wasHTTPsChanged()"
                analytics-category="portainer"
                analytics-event="portainer-settings-edit"
                analytics-properties="{ metadata: { forceHTTPS: $ctrl.formValues.forceHTTPS } }"
              >
                <span ng-hide="$ctrl.state.actionInProgress || $ctrl.state.reloadingPage">Apply changes</span>
                <span ng-show="$ctrl.state.actionInProgress">Saving in progress...</span>
                <span ng-show="$ctrl.state.reloadingPage">Reloading Page...</span>
              </button>
              <span class="text-danger" ng-if="state.formValidationError" style="margin-left: 5px">{{ state.formValidationError }}</span>
            </div>
          </div>
        </form>
      </rd-widget-body>
    </rd-widget>
  </div>
</div>
