{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
~}}

<PageHeader as |p|>
  <p.levelLeft>
    <h1 class="title is-3">License</h1>
  </p.levelLeft>
</PageHeader>

<section class="box is-sideless is-marginless is-shadowless is-fullwidth">
  <span class="title is-5">Details</span>
  <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
    <InfoTableRow @label="License ID" @value={{@licenseId}} data-test-detail-row />
    <InfoTableRow @label="Valid from" @value={{@startTime}} data-test-detail-row>
      {{date-format @startTime "MMM dd, yyyy hh:mm:ss a"}}
      to
      {{date-format @expirationTime "MMM dd, yyyy hh:mm:ss a"}}
    </InfoTableRow>
    <InfoTableRow @label="License state" @value={{"Autoloaded"}} data-test-detail-row />
  </div>
</section>

<section class="box is-sideless is-marginless is-shadowless is-fullwidth">
  <span class="title is-5">Features</span>
  <div class="field box is-fullwidth is-shadowless is-paddingless is-marginless">
    {{#each this.featuresInfo as |info|}}
      <InfoTableRow @label={{info.name}} @value={{if info.active "Active" "Not Active"}} data-test-feature-row>
        {{#if info.active}}
          <Icon @name="check-circle" class="icon-true" />
          <span data-test-feature-status>
            Active
            {{#if info.count}}&mdash; {{info.count}} standby nodes allotted{{/if}}
          </span>
        {{else}}
          <Icon @name="x-circle" class="icon-false" />
          <span data-test-feature-status>Not Active</span>
        {{/if}}
      </InfoTableRow>
    {{/each}}
  </div>
</section>