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

{{page-title (app-name)}}

<Rose::Layout::Global as |layout|>

  <layout.header>
    <Rose::Header class={{if (is-loading) ' loading'}} as |header|>
      <header.brand @logo='logo-app' @text={{(app-name)}} />

      {{#if this.session.isAuthenticated}}
        <header.nav>
          <HeaderNav />
        </header.nav>

        <header.utilities as |utilities|>
          <utilities.dropdown
            @text={{this.session.data.authenticated.username}}
            @icon='flight-icons/svg/user-circle-16'
            as |dropdown|
          >
            <dropdown.link @route='account.change-password'>
              {{t 'actions.change-password'}}
            </dropdown.link>
            <dropdown.separator />

            <dropdown.button {{on 'click' this.invalidateSession}}>
              {{t 'actions.deauthenticate'}}
            </dropdown.button>

            <dropdown.separator />

            <dropdown.section @title={{t 'actions.toggle-color-theme'}}>
              <Hds::Form::Radio::Group
                @name='theme'
                class='dropdown-radio-btn'
                as |G|
              >
                {{#each this.themes as |theme|}}
                  <G.RadioField
                    @value={{theme.value}}
                    checked={{eq this.session.data.theme theme.value}}
                    {{on 'change' (fn this.toggleTheme theme.value)}}
                    as |F|
                  >
                    <F.Label>{{t (concat 'themes.' theme.label)}}</F.Label>
                  </G.RadioField>
                {{/each}}
              </Hds::Form::Radio::Group>
            </dropdown.section>

          </utilities.dropdown>

          {{#if (feature-flag 'dev-edition-toggle')}}
            <utilities.dropdown
              data-test-dev-edition-toggle
              @text={{t
                'titles.feature-edition'
                edition=this.featureEdition.edition
              }}
              @icon='flight-icons/svg/layers-16'
              as |dropdown|
            >
              <dropdown.section @title={{t 'actions.toggle-feature-edition'}}>
                <Hds::Form::Radio::Group
                  @name='edition'
                  class='dropdown-radio-btn'
                  as |G|
                >
                  {{#each this.featureEdition.editions as |edition|}}
                    <G.RadioField
                      @value={{edition}}
                      checked={{eq this.featureEdition.edition edition}}
                      {{on 'change' (fn this.toggleEdition edition)}}
                      as |F|
                    >
                      <F.Label>{{edition}}</F.Label>
                    </G.RadioField>
                  {{/each}}
                </Hds::Form::Radio::Group>

              </dropdown.section>
              <dropdown.separator />
              <dropdown.section @title={{t 'actions.toggle-licensed-features'}}>
                <Rose::Form as |form|>
                  {{#each this.featureEdition.licensedFeatures as |feature|}}
                    <dropdown.item>
                      <form.checkbox
                        @label={{feature}}
                        @checked={{feature-flag feature}}
                        @onChange={{fn this.toggleFeature feature}}
                      />
                    </dropdown.item>
                  {{/each}}
                </Rose::Form>
              </dropdown.section>
            </utilities.dropdown>
          {{/if}}

        </header.utilities>

      {{/if}}

    </Rose::Header>
  </layout.header>

  <layout.body>
    {{outlet}}
  </layout.body>

</Rose::Layout::Global>

{{#if this.flashMessages.queue}}
  <div class='ember-notify-cn'>
    {{#each this.flashMessages.queue as |flash|}}
      <div class='ember-notify-show ember-notify'>
        <Hds::Toast
          @color={{map-type-to-color flash.notificationType}}
          @onDismiss={{fn flash.dismiss flash}}
          data-test-toast-notification
          as |T|
        >
          <T.Title>{{t (concat 'states.' flash.notificationType)}}</T.Title>
          <T.Description>{{flash.message}}</T.Description>
        </Hds::Toast>
      </div>
    {{/each}}
  </div>
{{/if}}

<PendingConfirmations as |confirmation accept deny|>
  <Hds::Modal @color='warning' as |M|>
    <M.Header @icon='alert-triangle' @onDismiss={{deny}}>
      {{if
        confirmation.options.title
        (t confirmation.options.title)
        (t 'actions.confirm')
      }}
    </M.Header>
    <M.Body>
      <Hds::Text::Body @tag='p'>
        {{confirmation.text}}
      </Hds::Text::Body>
    </M.Body>
    <M.Footer>
      <Hds::ButtonSet>
        <Hds::Button
          @text={{if
            confirmation.options.confirm
            (t confirmation.options.confirm)
            (t 'actions.ok')
          }}
          @color='primary'
          {{on 'click' accept}}
        />
        <Hds::Button
          @text={{t 'actions.cancel'}}
          @color='secondary'
          {{on 'click' deny}}
        />
      </Hds::ButtonSet>
    </M.Footer>
  </Hds::Modal>
</PendingConfirmations>