<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 == LicenseStates.validating"></div>

  <div class="license-valid license-status" ng-show="state == LicenseStates.valid">
    <h4><i class="fa fa-check-circle"></i>License Valid</h4>
    <table class="co-table">
      <thead>
        <td>Requirement</td>
        <td>Required Count</td>
        <td>Subscription</td>
        <td>Subscription Count</td>
        <td>Expiration Date</td>
      </thead>
      <tr ng-repeat="status in licenseStatus">
       <td>{{ requirementTitles[status.requirement.name] }}</td>
       <td>{{ status.requirement.count }}</td>
       <td>{{ status.entitlement.product_name }}</td>
       <td>{{ status.entitlement.count }}</td>
       <td><span am-time-ago="status.entitlement.expiration.expiration_date" data-title="{{ status.entitlement.expiration.expiration_date }}" bs-tooltip></span></td>
      </tr>
    </table>
  </div>

  <div class="license-invalid license-status" ng-show="state == LicenseStates.invalid">
    <h4><i class="fa fa-times-circle"></i> Validation Failed</h4>
    <h5 ng-if="licenseError">{{ licenseError }}</h5>
    <h5 ng-if="!licenseError && licenseStatus">
      <p>The following errors were found:</p>
      <ul>
        <li ng-repeat="status in licenseStatus" ng-if="status.status != 'EntitlementStatus.met'">
          <div ng-switch on="status.status">
            <!-- insufficient_count -->
            <div ng-switch-when="EntitlementStatus.insufficient_count">
              <strong>{{ requirementTitles[status.requirement.name] }}</strong>: <code class="required">{{ status.requirement.count }}</code> <span ng-if="status.requirement.count != 1">are</span><span ng-if="status.requirement.count == 1">is</span> required: License provides <code>{{ status.entitlement.count }}</code>
            </div>

            <!-- no_matching -->
            <div ng-switch-when="EntitlementStatus.no_matching">
              <strong>{{ requirementTitles[status.requirement.name] }}</strong>: License is missing requirement
            </div>

            <!-- expired -->
            <div ng-switch-when="EntitlementStatus.expired">
              <strong>{{ requirementTitles[status.requirement.name] }}</strong>: Requirement expired on <code>{{ status.entitlement.expiration.expiration_date }}</code>
            </div>
          </div>
        </li>
      </ul>
    </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 == LicenseStates.validating"></textarea>

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

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