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

{{page-title
  (if this.system.shouldShowRegions (concat this.system.activeRegion " - "))
  (if this.system.agent.config.UI.Label.Text (concat this.system.agent.config.UI.Label.Text " - "))
  "Nomad"
  separator=" - "
}}
<SvgPatterns />

<section class="notifications">
  {{#each this.notifications.queue as |flash|}}
  <FlashMessage @flash={{flash}} as |component flash close|>
    <Hds::Toast
      @color={{or flash.color "neutral"}}
      @onDismiss={{
        queue
          (action close)
          (action (optional flash.customCloseAction))
        
      }}
    as |T|>
      {{#if flash.title}}
        <T.Title>{{flash.title}}</T.Title>
      {{/if}}
      {{#if flash.message}}
        <T.Description>{{flash.message}}</T.Description>
      {{/if}}
      {{#if flash.customAction}}
        <T.Button @text={{flash.customAction.label}} @color="secondary" {{on "click" (action flash.customAction.action)}} />
      {{/if}}
    </Hds::Toast>
  </FlashMessage>
  {{/each}}
</section>

<KeyboardShortcutsModal />

<PortalTarget @name="log-sidebar-portal" />

{{#if this.error}}
  <div class="error-container">
    <div data-test-error class="error-message">
      {{#if this.isNoLeader}}
        <h1 data-test-error-title class="title is-spaced">No Cluster Leader</h1>
        <p data-test-error-message class="subtitle">
          The cluster has no leader.
          <a href="https://developer.hashicorp.com/nomad/tutorials/manage-clusters/outage-recovery">
            Read about Outage Recovery.</a>
        </p>
      {{else if this.isOTTExchange}}
        <h1 data-test-error-title class="title is-spaced">Token Exchange Error</h1>
        <p data-test-error-message class="subtitle">
          Failed to exchange the one-time token.
        </p>
      {{else if this.is500}}
        <h1 data-test-error-title class="title is-spaced">Server Error</h1>
        <p data-test-error-message class="subtitle">A server error prevented
          data from being sent to the client.</p>
      {{else if this.is404}}
        <h1 data-test-error-title class="title is-spaced">Not Found</h1>
        <p data-test-error-message class="subtitle">What you're looking for
          couldn't be found. It either doesn't exist or you are not authorized
          to see it.</p>
      {{else if this.is403}}
        <h1 data-test-error-title class="title is-spaced">Not Authorized</h1>
        {{#if this.token.secret}}
          <p data-test-error-message class="subtitle">Your
            <LinkTo @route="settings.tokens" data-test-error-acl-link>ACL token</LinkTo>
            does not provide the required permissions. Contact your
            administrator if this is an error.</p>
        {{else}}
          <p data-test-error-message class="subtitle">Provide an
            <LinkTo @route="settings.tokens" data-test-error-acl-link>ACL token</LinkTo>
            with requisite permissions to view this.</p>
        {{/if}}
      {{else}}
        <h1 data-test-error-title class="title is-spaced">Error</h1>
        <p data-test-error-message class="subtitle">Something went wrong.</p>
      {{/if}}
      {{#if (eq this.config.environment "development")}}
        <pre class="error-stack-trace"><code>{{this.errorStr}}</code></pre>
      {{/if}}
    </div>
    <div class="error-links">
      <LinkTo @route="jobs" data-test-error-jobs-link class="button is-white">Go
        to Jobs</LinkTo>
      <LinkTo
        @route="clients"
        data-test-error-clients-link
        class="button is-white"
      >Go to Clients</LinkTo>
      <LinkTo
        @route="settings.tokens"
        data-test-error-signin-link
        class="button is-white"
      >Go to Sign In</LinkTo>
    </div>
  </div>
{{else}}
  {{outlet}}
{{/if}}