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

{{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' (route-action 'invalidateSession')}}>
              {{t 'actions.deauthenticate'}}
            </dropdown.button>

            <dropdown.separator />

            <dropdown.section @title={{t 'actions.toggle-color-theme'}}>
              <Rose::Form as |form|>
                <form.radioGroup
                  @name='theme'
                  @selectedValue={{or
                    this.session.data.theme
                    'system-default-theme'
                  }}
                  @changed={{route-action 'toggleTheme'}}
                  as |radioGroup|
                >
                  <dropdown.item>
                    <radioGroup.radio
                      @label={{t 'themes.system'}}
                      @value='system-default-theme'
                    />
                  </dropdown.item>
                  <dropdown.item>
                    <radioGroup.radio
                      @label={{t 'themes.light'}}
                      @value='light'
                    />
                  </dropdown.item>
                  <dropdown.item>
                    <radioGroup.radio
                      @label={{t 'themes.dark'}}
                      @value='dark'
                    />
                  </dropdown.item>
                </form.radioGroup>
              </Rose::Form>
            </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'}}>
                <Rose::Form as |form|>
                  <form.radioGroup
                    @name='edition'
                    @selectedValue={{this.featureEdition.edition}}
                    @changed={{route-action 'toggleEdition'}}
                    as |radioGroup|
                  >
                    {{#each this.featureEdition.editions as |edition|}}
                      <dropdown.item>
                        <radioGroup.radio
                          @label={{edition}}
                          @value={{edition}}
                        />
                      </dropdown.item>
                    {{/each}}
                  </form.radioGroup>
                </Rose::Form>
              </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={{route-action '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 ember-notify-default'>
    {{#each this.flashMessages.queue as |flash|}}
      <div
        class='ember-notify-show callout
          {{flash.noticationType}}
          ember-view ember-notify clearfix'
      >
        <Rose::Notification
          @style={{flash.noticationType}}
          @heading={{t (concat 'states.' flash.noticationType)}}
          @dismiss={{fn flash.dismiss flash}}
          @dismissText={{t 'actions.dismiss'}}
        >
          {{flash.message}}
        </Rose::Notification>
      </div>
    {{/each}}
  </div>
{{/if}}

<PendingConfirmations as |confirmation accept deny|>
  <Rose::Dialog
    @heading={{if
      confirmation.options.title
      (t confirmation.options.title)
      (t 'actions.confirm')
    }}
    @dismissButtonText={{t 'actions.cancel'}}
    @icon='flight-icons/svg/alert-triangle-16'
    @style='warning'
    @modal={{true}}
    @dismiss={{deny}}
    as |dialog|
  >
    <dialog.body>
      <p>{{confirmation.text}}</p>
    </dialog.body>
    <dialog.footer>
      <Rose::Button @style='primary' {{on 'click' accept}}>
        {{if
          confirmation.options.confirm
          (t confirmation.options.confirm)
          (t 'actions.ok')
        }}
      </Rose::Button>
      <Rose::Button @style='secondary' {{on 'click' deny}}>
        {{t 'actions.cancel'}}
      </Rose::Button>
    </dialog.footer>
  </Rose::Dialog>
</PendingConfirmations>