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

<SyncHeader
  @title="Select a Destination"
  @breadcrumbs={{array (hash label="Secrets Sync" route="secrets.overview") (hash label="Select Destination")}}
/>

{{#each (array "cloud" "dev-tools") as |category|}}
  <Hds::Text::Display @tag="h2" @size="300" class="has-top-padding-l has-bottom-padding-l">
    {{if (eq category "cloud") "Cloud service providers" "Developer tools"}}
  </Hds::Text::Display>

  <div class="flex row-wrap row-gap-8 column-gap-16 has-bottom-padding-m">
    {{#each (filter-by "category" category (sync-destinations)) as |d|}}
      <SelectableCard
        class="has-padding-l flex card-width-20"
        @onClick={{transition-to "vault.cluster.sync.secrets.destinations.create.destination" d.type}}
        data-test-select-destination={{d.type}}
      >
        <Icon @name={{d.icon}} @size="24" />
        <Hds::Text::Display @tag="h3" @size="300">
          {{d.name}}
        </Hds::Text::Display>
      </SelectableCard>
    {{/each}}
  </div>
{{/each}}

<hr class="has-background-gray-100" />
<Hds::Button @text="Cancel" @color="secondary" @route="secrets.overview" data-test-destination-create-cancel />