{{!
  Copyright (c) HashiCorp, Inc.
  SPDX-License-Identifier: BUSL-1.1
}}
{{#unless this.flags.secretsSyncIsActivated}}
  {{#if this.version.hasSecretsSync}}
    {{#unless this.hideOptIn}}
      {{! Allows users to dismiss activation banner if they have permissions to activate. }}
      <Hds::Alert
        @type="inline"
        @color="warning"
        @onDismiss={{if @canActivateSecretsSync (fn (mut this.hideOptIn) true) undefined}}
        data-test-secrets-sync-opt-in-banner
        as |A|
      >
        <A.Title>Enable Secrets Sync feature</A.Title>
        <A.Description data-test-secrets-sync-opt-in-banner-description>To use this feature, specific activation is required.
          {{if
            @canActivateSecretsSync
            "Please review the feature documentation and
          enable it. If you're upgrading from beta, your previous data will be accessible after activation."
            "Please contact your administrator to activate."
          }}</A.Description>
        {{#if @canActivateSecretsSync}}
          <A.Button
            @text="Enable"
            @color="secondary"
            {{on "click" (fn (mut this.showActivateSecretsSyncModal) true)}}
            data-test-secrets-sync-opt-in-banner-enable
          />
        {{/if}}
      </Hds::Alert>
    {{/unless}}
  {{/if}}
{{/unless}}

{{#if this.activationErrors}}
  {{#unless this.hideError}}
    <MessageError @errors={{this.activationErrors}} @onDismiss={{fn (mut this.hideError) true}} data-test-opt-in-error />
  {{/unless}}
{{/if}}

{{#if @destinations}}
  <SyncHeader @title="Secrets Sync" />

  <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">
    <:content>
      {{#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."
        >
          <Hds::Link::Standalone
            @icon="docs-link"
            @iconPosition="trailing"
            @text="Secrets Sync association API docs"
            @href={{doc-link "/vault/api-docs/system/secrets-sync#read-associations"}}
          />
        </EmptyState>
      {{else}}
        <Hds::Table>
          <:head as |H|>
            <H.Tr>
              <H.Th>Sync destination</H.Th>
              <H.Th @align="right">
                # of external secrets
                <Hds::TooltipButton
                  @text="Number of secrets created at the destination"
                  aria-label="More information"
                  class="is-v-centered"
                >
                  <Hds::Icon @name="info" @isInline={{true}} />
                </Hds::TooltipButton>
              </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}} @listPosition="bottom-right" 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"
                      @models={{array data.type data.name}}
                      data-test-overview-table-action="sync"
                    >Sync secrets</dd.Interactive>
                    <dd.Interactive
                      @route="secrets.destinations.destination.secrets"
                      @models={{array data.type data.name}}
                      data-test-overview-table-action="details"
                    >View synced secrets</dd.Interactive>
                  </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}}
    </:content>
  </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."
      class="is-flex-half"
    >
      <:action>
        <Hds::Link::Standalone
          @text="Create new"
          @route="secrets.destinations.create"
          @icon="plus"
          @iconPosition="trailing"
          data-test-action-text="Create new"
        />
      </:action>
      <:content>
        <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>
      </:content>
    </OverviewCard>
    <OverviewCard
      @cardTitle="Total secrets"
      @subText="The total number of secrets that have been synced from Vault over time. One secret will be counted as one sync client."
      class="is-flex-half"
    >
      <:action>
        <Hds::Link::Standalone
          @text="View billing"
          @route="clientCountOverview"
          @isRouteExternal={{true}}
          @icon="chevron-right"
          @iconPosition="trailing"
          data-test-action-text
        />
      </:action>
      <:content>
        <h2 class="title is-2 has-font-weight-normal has-top-margin-m" data-test-overview-card-content="Total secrets">
          {{or @totalVaultSecrets "None"}}
        </h2>
      </:content>
    </OverviewCard>
  </div>
{{else}}
  <Secrets::LandingCta @isActivated={{this.flags.secretsSyncIsActivated}} />
{{/if}}

{{#if this.showActivateSecretsSyncModal}}
  <Secrets::SyncActivationModal
    @onClose={{fn (mut this.showActivateSecretsSyncModal) false}}
    @onError={{this.onModalError}}
    @onConfirm={{this.clearActivationErrors}}
  />
{{/if}}