<div class="config-license-field-element">
  <!-- Note: This hidden input will only have a value if there is a valid license, ensuring that the user cannot save
      config if the license is invalid (since this box will be empty and therefore "required") -->
  <input type="text" name="licenseRequiredBox" ng-model="requiredBox" style="visibility: hidden; height: 1px; position: absolute;" required>

  <div class="cor-loader-inline" ng-show="state == 'loading-license'"></div>

  <div class="license-valid license-status" ng-show="state == 'license-valid'">
    <h4><i class="fa fa-check-circle"></i>License Valid</h4>
    <table class="co-table">
      <tr><td>Product:</td><td>{{ licenseDecoded.publicProductName || licenseDecoded.productName }}</td></tr>
      <tr><td>Plan:</td><td>{{ licenseDecoded.publicPlanName || licenseDecoded.planName }}</td></tr>
    </table>
  </div>

  <div class="license-invalid license-status" ng-show="state == 'license-error'">
    <h4><i class="fa fa-times-circle"></i> Validation Failed</h4>
    <h5>{{ licenseError }}</h5>
  </div>

  <button class="btn btn-default" ng-show="!showingEditor" ng-click="showEditor($event)"><i class="fa fa-pencil"></i> Update License</button>

  <div class="license-editor" ng-show="showingEditor">
    <p>
      Your license  can be found under the "Raw Format" tab of your Quay Enterprise
      subscription in the <a href="https://account.tectonic.com" target="_blank">Tectonic Account</a>.
    </p>

    <textarea id="enterLicenseBox" ng-model="licenseContents" class="form-control"
              placeholder="Paste your raw license here, which should already be in base64 format: GtqMjMwNDgyM3Vq..."
              ng-readonly="state == 'validating-license'"></textarea>

    <button class="btn btn-primary" ng-show="state != 'validating-license'"
            ng-click="validateAndUpdate($event)" ng-disabled="!licenseContents">Update License</button>

    <div class="license-validating" ng-show="state == 'validating-license'">
      <span class="cor-loader-inline"></span> Validating License
    </div>
  </div>
</div>