{{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>
          {{outlet "header-nav"}}
        </header.nav>

        <header.utilities as |utilities|>
          <utilities.dropdown
            @text={{this.session.data.authenticated.username}}
            @icon="app-icons/user-profile"
            as |dropdown|
          >
            <dropdown.button
              {{on "click" (route-action "invalidateSession")}}
            >
              {{t 'actions.deauthenticate'}}
            </dropdown.button>
          </utilities.dropdown>
        </header.utilities>
      {{/if}}

    </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.isConnectSuccess}}
    <Rose::Dialog
      @heading={{t "states.success"}}
      @dismissButtonText={{t "actions.ok"}}
      @icon="check-circle-fill"
      @style="success"
      @modal={{true}}
      @dismiss={{accept}}
    as |dialog|>
      <dialog.body>
        {{t 'states.connection.success.description'
          port=confirmation.text.port
          address=confirmation.text.address
          protocol=confirmation.text.protocol
        }}
      </dialog.body>
      <dialog.footer>
        <Rose::Button @style="primary" {{on "click" accept}}>
          {{t "actions.ok"}}
        </Rose::Button>
      </dialog.footer>
    </Rose::Dialog>
  {{else if confirmation.options.isConnectError}}
    <Rose::Dialog
      @heading={{t "states.error"}}
      @dismissButtonText={{t "actions.ok"}}
      @icon="cancel-square-fill"
      @style="error"
      @modal={{true}}
      @dismiss={{accept}}
    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="alert-triangle"
      @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>