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

<main>
  <BrandedCard
    @title={{t 'actions.authenticate'}}
    @description={{t
      'auth.descriptions.authenticating-with-org'
      name=@model.scope.displayName
    }}
  >

    <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::Nav::Tabs as |nav|>
      {{#if (feature-flag 'oidc')}}
        {{! OIDC enable:  list all auth methods }}
        {{#each @model.authMethods as |authMethod|}}
          <nav.link
            @route='scopes.scope.authenticate.method'
            @model={{authMethod.id}}
          >
            {{t (concat 'resources.auth-method.types.' authMethod.type)}}
          </nav.link>
        {{/each}}
      {{else}}
        {{! OIDC disabled:  filter out OIDC auth methods}}
        {{#each @model.authMethods as |authMethod|}}
          {{#unless authMethod.isOIDC}}
            <nav.link
              @route='scopes.scope.authenticate.method'
              @model={{authMethod.id}}
            >
              {{t (concat 'resources.auth-method.types.' authMethod.type)}}
            </nav.link>
          {{/unless}}
        {{/each}}
      {{/if}}
    </Rose::Nav::Tabs>

    {{#if @model.authMethods}}
      {{outlet}}

      <p class='change-origin'>
        {{t 'origin.connected-to'}}:
        <code>{{this.origin}}</code>
        <br />
        <LinkTo @route='origin'>
          {{t 'actions.change-origin'}}
        </LinkTo>
      </p>

    {{/if}}
    {{#unless @model.authMethods}}
      <Rose::Layout::Centered>
        <Rose::Message
          @title={{t 'resources.auth-method.messages.none.title'}}
          @icon='flight-icons/svg/alert-circle-16'
          as |message|
        >
          <message.description>
            {{t 'resources.auth-method.messages.none.description'}}
          </message.description>
        </Rose::Message>
      </Rose::Layout::Centered>
    {{/unless}}

  </BrandedCard>
</main>