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

<Rose::Layout::Global
  class='{{if this.showWindowActions ' layout-scroll'}}'
  as |layout|
>

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

      <header.nav>
        <div id='header-nav'></div>
      </header.nav>

      <header.utilities as |utilities|>
        {{#if this.showWindowActions}}
          <Rose::Button
            @iconOnly='flight-icons/svg/x-16'
            @style='warning'
            class='button-window-close'
            title={{t 'actions.close'}}
            {{on 'click' (route-action 'close')}}
          />
          <Rose::Button
            @iconOnly='flight-icons/svg/square-16'
            @style='secondary'
            class='button-window-fullscreen'
            title={{t 'actions.fullscreen'}}
            {{on 'click' (route-action 'toggleFullScreen')}}
          />
          <Rose::Button
            @iconOnly='flight-icons/svg/minus-16'
            @style='secondary'
            class='button-window-minimize'
            title={{t 'actions.minimize'}}
            {{on 'click' (route-action 'minimize')}}
          />
        {{/if}}

        {{#if this.session.isAuthenticated}}
          <utilities.dropdown
            @text={{this.session.data.authenticated.username}}
            @icon='flight-icons/svg/user-circle-16'
            as |dropdown|
          >
            <dropdown.button {{on 'click' (route-action 'invalidateSession')}}>
              {{t 'actions.deauthenticate'}}
            </dropdown.button>

            <dropdown.separator />

            <dropdown.section @title={{t 'titles.toggle-color-theme'}}>
              <Rose::Form as |form|>
                <form.radioGroup
                  @name='theme'
                  @selectedValue={{this.session.data.theme}}
                  @changed={{route-action 'toggleTheme'}}
                  as |radioGroup|
                >
                  <dropdown.item>
                    <radioGroup.radio @label={{t 'themes.system'}} />
                  </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}}

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

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

</Rose::Layout::Global>

<EmberNotify @closeAfter={{this.notifyTimeout}} as |message close|>
  <Rose::Notification
    @style={{message.type}}
    @heading={{t (concat 'states.' message.type)}}
    @dismiss={{close}}
    @dismissText={{t 'actions.dismiss'}}
  >
    {{message.text}}
  </Rose::Notification>
</EmberNotify>

<PendingConfirmations as |confirmation accept deny|>
  {{#if confirmation.options.isConnectError}}
    <Rose::Dialog
      @heading={{t 'states.error'}}
      @dismissButtonText={{t 'actions.ok'}}
      @icon='flight-icons/svg/x-square-16'
      @style='error'
      @modal={{true}}
      @dismiss={{deny}}
      as |dialog|
    >
      <dialog.body>
        <p>
          {{confirmation.text}}
        </p>
        <p>
          {{t 'questions.retry-confirm'}}
        </p>
      </dialog.body>
      <dialog.footer>
        <Rose::Button @style='primary' {{on 'click' accept}}>
          {{t 'actions.retry'}}
        </Rose::Button>
        <Rose::Button @style='secondary' {{on 'click' deny}}>
          {{t 'actions.cancel'}}
        </Rose::Button>
      </dialog.footer>
    </Rose::Dialog>
  {{else}}
    <Rose::Dialog
      @heading={{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}}>
          {{t 'actions.ok'}}
        </Rose::Button>
        <Rose::Button @style='secondary' {{on 'click' deny}}>
          {{t 'actions.cancel'}}
        </Rose::Button>
      </dialog.footer>
    </Rose::Dialog>
  {{/if}}
</PendingConfirmations>