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

{{#if (and this.version.hasSecretsSync (not @isActivated))}}
  {{#unless this.hideOptIn}}
    <Hds::Alert
      @type="inline"
      @color="warning"
      @onDismiss={{fn (mut this.hideOptIn) true}}
      data-test-secrets-sync-opt-in-banner
      as |A|
    >
      <A.Title>Enable Secrets Sync feature</A.Title>
      <A.Description>To use this feature, specific activation is required. Please review the feature documentation and enable
        it. If you're upgrading from beta, your previous data will be accessible after activation.</A.Description>
      <A.Button
        @text="Enable"
        @color="secondary"
        {{on "click" (fn (mut this.showActivateSecretsSyncModal) true)}}
        data-test-secrets-sync-opt-in-banner-enable
      />
    </Hds::Alert>
  {{/unless}}
{{/if}}

{{! error message if post to activated endpoint fails }}
{{#if this.error}}
  {{#unless this.hideError}}
    <MessageError @errorMessage={{this.error}} @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">
    {{#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"
              >
                <FlightIcon @name="info" />
              </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}}
                    @text="Sync secrets"
                    data-test-overview-table-action="sync"
                  />
                  <dd.Interactive
                    @route="secrets.destinations.destination.secrets"
                    @models={{array data.type data.name}}
                    @text="View synced secrets"
                    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 secrets"
      @subText="The total number of secrets that have been synced from Vault over time. One secret will be counted as one sync client."
      @actionText="View billing"
      @actionTo="clientCountOverview"
      @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 secrets">
        {{or @totalVaultSecrets "None"}}
      </h2>
    </OverviewCard>
  </div>
{{else}}
  <Secrets::LandingCta @isActivated={{@isActivated}} @hasSecretsSync={{this.version.hasSecretsSync}} />
{{/if}}

{{#if this.showActivateSecretsSyncModal}}
  <Hds::Modal @onClose={{fn (mut this.showActivateSecretsSyncModal) false}} data-test-secrets-sync-opt-in-modal as |M|>
    <M.Header @icon="alert-triangle">
      Enable Secrets Sync feature
    </M.Header>
    <M.Body>
      <p class="has-bottom-margin-m">
        By enabling the Secrets Sync feature you may incur additional costs. Please review our
        <Hds::Link::Inline
          @isHrefExternal={{true}}
          @href={{doc-link "/hcp/docs/vault/what-is-hcp-vault/client#secrets-sync"}}
        >documentation</Hds::Link::Inline>
        to learn more.
      </p>
      <Hds::Form::Checkbox::Field
        {{on "change" (fn (mut this.hasConfirmedDocs) (not this.hasConfirmedDocs))}}
        data-test-opt-in-check
        as |F|
      >
        <F.Label>I've read the above linked document</F.Label>
      </Hds::Form::Checkbox::Field>
    </M.Body>
    <M.Footer>
      <Hds::ButtonSet>
        <Hds::Button
          data-test-opt-in-confirm
          @text="Confirm"
          disabled={{(not this.hasConfirmedDocs)}}
          {{on "click" (perform this.onFeatureConfirm)}}
        />
        <Hds::Button data-test-opt-in-cancel @text="Cancel" @color="secondary" {{on "click" this.resetOptInModal}} />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
{{/if}}