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

<SyncHeader @title="Secrets Sync">
  <:actions>
    {{#unless @destinations}}
      <Hds::Button @text="Create first destination" @route="secrets.destinations.create" data-test-cta-button />
    {{/unless}}
  </:actions>
</SyncHeader>

{{#if @destinations}}
  <div class="tabs-container box is-bottomless is-marginless is-paddingless">
    <nav class="tabs" aria-label="destination tabs">
      <ul>
        <li>
          <LinkTo @route="secrets.overview" data-test-tab="Overview">Overview</LinkTo>
        </li>
        <li>
          <LinkTo @route="secrets.destinations" data-test-tab="Destinations">Destinations</LinkTo>
        </li>
      </ul>
    </nav>
  </div>
  <Toolbar aria-label="toolbar for sync overview page">
    <ToolbarActions aria-label="toolbar action links">
      <ToolbarLink
        aria-label="toolbar link navigates to create a new destination"
        @route="secrets.destinations.create"
        @type="add"
        data-test-create-destination
      >
        Create new destination
      </ToolbarLink>
    </ToolbarActions>
  </Toolbar>

  <OverviewCard @cardTitle="Secrets by destination" class="has-top-margin-l">
    {{#if this.fetchAssociationsForDestinations.isRunning}}
      <div data-test-sync-overview-loading>
        <Icon @name="loading" @size="24" />
        Loading destinations...
      </div>
    {{else if (not this.destinationMetrics)}}
      <EmptyState
        @title="Error fetching information"
        @message="Ensure that the policy has access to read sync associations."
      >
        <DocLink @path="/vault/api-docs/system/secrets-sync#read-associations">
          API reference
        </DocLink>
      </EmptyState>
    {{else}}
      <Hds::Table>
        <:head as |H|>
          <H.Tr>
            <H.Th>Sync destination</H.Th>
            <H.Th @align="right"># of secrets</H.Th>
            <H.Th @align="right">Last updated</H.Th>
            <H.Th @align="right">Actions</H.Th>
          </H.Tr>
        </:head>
        <:body as |B|>
          {{#each this.destinationMetrics as |data index|}}
            <B.Tr data-test-overview-table-row>
              <B.Td>
                <Icon @name={{data.icon}} data-test-overview-table-icon={{index}} />
                <span data-test-overview-table-name={{index}}>{{data.name}}</span>
                {{#if data.status}}
                  <Hds::Badge
                    @text={{data.status}}
                    @color={{if (eq data.status "All synced") "success"}}
                    data-test-overview-table-badge={{index}}
                  />
                {{/if}}
              </B.Td>
              <B.Td @align="right" data-test-overview-table-total={{index}}>
                {{data.associationCount}}
              </B.Td>
              <B.Td @align="right" data-test-overview-table-updated={{index}}>
                {{#if data.lastUpdated}}
                  {{date-format data.lastUpdated "MMMM do yyyy, h:mm:ss a"}}
                {{else}}
                  &mdash;
                {{/if}}
              </B.Td>
              <B.Td @align="right">
                <Hds::Dropdown @isInline={{true}} as |dd|>
                  <dd.ToggleIcon
                    @icon="more-horizontal"
                    @text="Actions"
                    @hasChevron={{false}}
                    @size="small"
                    data-test-overview-table-action-toggle={{index}}
                  />
                  <dd.Interactive
                    @route="secrets.destinations.destination.sync"
                    @model={{data}}
                    @text="Sync secrets"
                    data-test-overview-table-action="sync"
                  />
                  <dd.Interactive
                    @route="secrets.destinations.destination.secrets"
                    @models={{array data.type data.name}}
                    @text="Details"
                    data-test-overview-table-action="details"
                  />
                </Hds::Dropdown>
              </B.Td>
            </B.Tr>
          {{/each}}
        </:body>
      </Hds::Table>

      <Hds::Pagination::Numbered
        @totalItems={{@destinations.length}}
        @currentPage={{this.page}}
        @currentPageSize={{this.pageSize}}
        @showSizeSelector={{false}}
        @onPageChange={{perform this.fetchAssociationsForDestinations}}
      />
    {{/if}}
  </OverviewCard>

  <div class="is-grid grid-2-columns grid-gap-2 has-top-margin-l has-bottom-margin-l">
    <OverviewCard
      @cardTitle="Total destinations"
      @subText="The total number of connected destinations"
      @actionText="Create new"
      @actionTo="secrets.destinations.create"
      class="is-flex-half"
    >
      <h2 class="title is-2 has-font-weight-normal has-top-margin-m" data-test-overview-card-content="Total destinations">
        {{or @destinations.length "None"}}
      </h2>
    </OverviewCard>
    <OverviewCard
      @cardTitle="Total sync associations"
      @subText="Total sync associations that count towards client count"
      @actionText="View billing"
      @actionTo="clientCountDashboard"
      @actionExternal={{true}}
      class="is-flex-half"
    >
      <h2
        class="title is-2 has-font-weight-normal has-top-margin-m"
        data-test-overview-card-content="Total sync associations"
      >
        {{or @totalAssociations "None"}}
      </h2>
    </OverviewCard>
  </div>
{{else}}
  <Secrets::LandingCta />
{{/if}}