<PageHeader as |p|>
  <p.top>
    <KeyValueHeader
      @baseKey={{hash id=this.model.id}}
      @path="vault.cluster.secrets.backend.list"
      @mode="show"
      @root={{hash
        label=this.model.engineId
        text=this.model.engineId
        path="vault.cluster.secrets.backend.list-root"
        model=this.model.engineId
      }}
      @showCurrent={{true}}
    />
  </p.top>
  <p.levelLeft>
    <h1 class="title is-3">
      Version History
    </h1>
  </p.levelLeft>
</PageHeader>
<ListView @items={{reverse this.model.versions}} @itemNoun="version" as |list|>
  <ListItem
    @hasMenu={{false}}
    @linkParams={{array "vault.cluster.secrets.backend.show" this.model.id}}
    @queryParams={{hash version=list.item.version}}
    as |Item|
  >
    <Item.content>
      <div class="columns is-flex-1">
        <div>
          <Icon @name="history" class="has-text-grey" />
          Version
          {{list.item.version}}
        </div>
        {{#if (eq list.item.version this.model.currentVersion)}}
          <div class="column is-1">
            <span class="has-text-success is-size-9">
              <Icon @name="check-circle-fill" />Current
            </span>
          </div>
        {{/if}}
        {{#if list.item.deleted}}
          <div class="column is-1">
            <span class="has-text-grey is-size-8">
              <Icon @name="x-square-fill" />Deleted
            </span>
          </div>
        {{/if}}
        {{#if list.item.destroyed}}
          <div class="column is-1">
            <span class="has-text-danger is-size-8">
              <Icon @name="x-square-fill" />Destroyed
            </span>
          </div>
        {{/if}}
        <div class="center-inside-row">
          <ToolTip @verticalPosition="above" @horizontalPosition="center" as |T|>
            <T.Trigger data-test-tooltip-trigger tabindex="-1">
              Created
              {{date-format list.item.createdTime "MMM dd, yyyy hh:mm a"}}
            </T.Trigger>
            <T.Content @defaultClass="tool-tip smaller-font">
              <div class="box" data-test-hover-copy-tooltip-text>
                {{list.item.createdTime}}
              </div>
            </T.Content>
          </ToolTip>
        </div>
      </div>
    </Item.content>
    <Item.menu>
      <BasicDropdown @class="popup-menu" @horizontalPosition="auto-right" @verticalPosition="below" as |D|>
        <D.Trigger
          data-test-popup-menu-trigger="true"
          class={{concat "toolbar-link" (if D.isOpen " is-active")}}
          @htmlTag="button"
        >
          <Icon @name="more-horizontal" aria-label="More options" class="has-text-black auto-width" />
        </D.Trigger>
        <D.Content @defaultClass="popup-menu-content">
          <nav class="box menu">
            <ul class="menu-list">
              <li class="action">
                <SecretLink
                  data-test-version={{true}}
                  @mode="show"
                  @secret={{this.model.id}}
                  class="has-text-black has-text-weight-semibold"
                  @queryParams={{hash version=list.item.version}}
                >
                  View version
                  {{list.item.version}}
                </SecretLink>
              </li>
              <li class="action">
                <SecretLink
                  @mode="edit"
                  @secret={{this.model.id}}
                  class="has-text-black has-text-weight-semibold"
                  @queryParams={{hash version=list.item.version}}
                >
                  Create new version from
                  {{list.item.version}}
                </SecretLink>
              </li>
            </ul>
          </nav>
        </D.Content>
      </BasicDropdown>
    </Item.menu>
  </ListItem>
</ListView>