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

<div class="is-flex-grow-1 is-flex-v-centered">
  <div class="empty-state-content">
    <div class="is-flex-v-centered has-bottom-margin-xxl">
      <div class="brand-icon-large">
        <Icon @name="vault" @size="24" @stretched={{true}} />
      </div>
    </div>
    <div class="is-flex-center">
      <div class="error-icon">
        <Icon @name="help" @size="24" class="has-text-grey" @stretched={{true}} />
      </div>
      <div class="has-left-margin-s">
        <h1 class="is-size-4 has-text-semibold has-text-grey has-line-height-1">
          {{#if (eq this.model.httpStatus 403)}}
            Not authorized
          {{else if (eq this.model.httpStatus 404)}}
            Page not found
          {{else}}
            Error
          {{/if}}
        </h1>
        <p class="has-text-grey is-size-8">Error {{this.model.httpStatus}}</p>
      </div>
    </div>

    <p class="has-text-grey has-top-margin-m has-bottom-padding-l has-border-bottom-light" data-test-error-description>
      {{this.model.message}}
      {{join ". " this.model.errors}}
    </p>

    <div class="is-flex-between has-top-margin-s">
      <ExternalLink @href="/" @sameTab={{true}} class="is-flex-center has-text-semibold">
        <Chevron @direction="left" />
        Go home
      </ExternalLink>
      <DocLink @path="/vault/api-docs#http-status-codes">
        Learn more
      </DocLink>
    </div>
  </div>
</div>