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

{{#let @list as |SNL|}}
  {{#if (gt @dcs.length 1)}}
    <SNL.Title class='consul-side-nav__selector-title'>{{t "components.hashicorp-consul.side-nav.datacenters.title"}}</SNL.Title>
    <NavSelector
      @list={{SNL}}
      @items={{sort-by 'Primary:desc' 'Local:desc' 'Name:asc' @dcs}}
      @item={{@dc}}
      @key='Name'
      @icon='server-cluster'
      @placeholder={{t "components.hashicorp-consul.side-nav.datacenters.placeholder"}}
      @description={{t "components.hashicorp-consul.side-nav.datacenters.description"}}
      class='consul-datacenter-selector'
      data-test-datacenter-menu
      as |Selector|
    >
      <Selector.Dropdown.Checkmark
        @selected={{eq @dc.Name Selector.item.Name}}
        @href={{href-to
          '.'
          params=(hash
            dc=Selector.item.Name partition=undefined nspace=(if (gt @nspace.length 0) @nspace undefined)
          )
        }}
        @isHrefExternal={{false}}
        class='consul-datacenter-selector__item'
        data-test-dc-item
      >
        <span class='consul-datacenter-selector__dc-name'>
          {{Selector.item.Name}}

          {{#if (or Selector.item.Local Selector.item.Primary)}}
            <span class='consul-datacenter-selector__badges'>
              {{#if Selector.item.Primary}}
                <Hds::Badge @text='Primary' />
              {{/if}}
              {{#if Selector.item.Local}}
                <Hds::Badge @text='Local' />
              {{/if}}
            </span>
          {{/if}}
        </span>
      </Selector.Dropdown.Checkmark>
    </NavSelector>
  {{else}}
    <SNL.Item class='consul-side-nav__datacenter' data-test-datacenter-single>
      <FlightIcon
        @name='server-cluster'
        @color='var(--token-form-control-disabled-foreground-color)'
      />
      <Hds::Text::Display @size='200' @color='disabled'>{{@dc.Name}}</Hds::Text::Display>
    </SNL.Item>
  {{/if}}
{{/let}}