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

{{page-title (t 'actions.authenticate')}}

<Rose::Layout::Centered>
  <Rose::Layout::Page as |page|>

    <page.body>

      <Rose::Frame>
        <:header>
          <h2>{{t 'actions.authenticate'}}</h2>
        </:header>
        <:body>
          <p>{{t
              'auth.descriptions.authenticating-with-org'
              name=@model.scope.displayName
            }}</p>

          <Rose::Dropdown
            @text={{t 'actions.choose-different-org'}}
            @icon='flight-icons/svg/org-16'
            as |dropdown|
          >
            <dropdown.link @route='scopes.scope.authenticate' @model='global'>
              {{t 'titles.global'}}
            </dropdown.link>

            {{#each this.sortedScopes as |scope|}}
              <dropdown.link
                @route='scopes.scope.authenticate'
                @model={{scope.id}}
              >
                {{scope.displayName}}
              </dropdown.link>

            {{/each}}
          </Rose::Dropdown>

          <Rose::Separator />

          <Rose::Nav::Tabs as |nav|>
            {{#each @model.authMethods as |authMethod|}}
              <nav.link
                @route='scopes.scope.authenticate.method'
                @model={{authMethod.id}}
              >
                {{#if authMethod.name}}
                  {{authMethod.name}}
                {{else}}
                  {{t (concat 'resources.auth-method.types.' authMethod.type)}}
                {{/if}}
              </nav.link>
            {{/each}}

          </Rose::Nav::Tabs>

          {{#if @model.authMethods}}
            {{outlet}}
          {{/if}}
        </:body>
      </Rose::Frame>
    </page.body>

  </Rose::Layout::Page>
</Rose::Layout::Centered>