<PageHeader as |p|>
  <p.top>
    {{key-value-header
      baseKey=baseKey
      path="vault.cluster.access.leases.list"
      root=backendCrumb
      showCurrent=true
      linkToPaths=capabilities.leases.canList
    }}
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      {{#link-to "vault.cluster.access.leases" }}
        Leases
      {{/link-to}}
    </h1>
  </p.levelLeft>
</PageHeader>
<div class="field box is-fullwidth is-sideless is-paddingless is-marginless">
  {{#info-table-row label="Issue time" value=model.issueTime}}
    {{moment-format model.issueTime 'MMM DD, YYYY hh:mm:ss A'}}
    <br/>
    <code>
      {{model.issueTime}}
    </code>
  {{/info-table-row}}
  {{info-table-row label="Renewable" value=model.renewable}}
  {{#info-table-row label="Last renewal" value=model.lastRenewal}}
    {{moment-format model.lastRenewal 'MMM DD, YYYY hh:mm:ss A'}}
    <br/>
    <code>
      {{model.lastRenewal}}
    </code>
  {{/info-table-row}}
  {{#if model.expireTime}}
    {{#info-table-row label="Expiration time" value=model.expireTime}}
      {{moment-format model.expireTime 'MMM DD, YYYY hh:mm:ss A'}}
      <br/>
      <code>
        {{model.expireTime}}
      </code>
    {{/info-table-row}}
    {{info-table-row label="Expires in" value=(moment-from-now model.expireTime interval=1000 hideSuffix=true)}}
  {{/if}}
  {{info-table-row label="TTL" value=model.ttl}}
</div>
{{#if (and (not model.isAuthLease) model.renewable capabilities.renew.canUpdate)}}
  <div class="box is-shadowless" data-test-lease-renew-picker=true>
    <h2 class="title is-6">Renew Lease</h2>
    <form {{action "renewLease" model interval on="submit"}}>
      {{ttl-picker
        labelText="Interval"
        labelClass="is-label"
        onChange=(action (mut interval))
        outputSeconds=true
      }}
      <div class="field">
        <div class="control">
          <button
            type="submit"
            class="button is-primary"
          >
            Renew lease
          </button>
        </div>
      </div>
    </form>
  </div>
{{/if}}
<div class="field is-grouped is-grouped-split is-fullwidth box is-bottomless">
  <div class="field">{{!-- needs to be here to push over the button --}}</div>
  {{#if capabilities.revoke.canUpdate}}
    {{#confirm-action
      onConfirmAction=(action "revokeLease" model)
      confirmMessage= (concat "Are you sure you want to revoke this lease?")
      confirmButtonText="Confirm revocation"
      cancelButtonText="Cancel"
      data-test-lease-revoke=true
    }}
      Revoke lease
    {{/confirm-action}}
  {{/if}}
</div>
