michaelchadwick/ember-remember-stuff

<div class="error-display" ...attributes>
  <div class="error-main">
    {{#if this.isOffline}}
      <h2>
        {{t "general.connectionLost"}}
      </h2>
      <p class="clear-errors">
        <button type="button" {{on "click" this.refresh}}>
          <FaIcon @icon="rotate" />
          {{t "general.reconnectNow"}}
        </button>
      </p>
    {{else if this.is404}}
      <NotFound />
    {{else}}
      <h2>
        {{t "general.errorDisplayMessage"}}
      </h2>
      <p class="clear-errors">
        <button type="button" {{on "click" @clearErrors}}>
          {{t "general.clearErrors"}}
        </button>
        <button
          type="button"
          class="error-detail-action"
          {{on "click" (set this "showDetails" (not this.showDetails))}}
        >
          {{t (if this.showDetails "general.collapseDetail" "general.expandDetail")}}
        </button>
      </p>

      {{#if this.showDetails}}
        <div class="timestamp">
          {{format-time
            this.now
            year="numeric"
            month="numeric"
            day="numeric"
            hour="numeric"
            second="numeric"
            minute="numeric"
            timeZoneName="short"
          }}
        </div>
        <div class="error-detail">
          <h3 class="error-total">
            {{t "general.totalErrors" count=@errors.length}}
          </h3>
          {{#each @errors as |error|}}
            <div class="error-details">
              <h5 class="error-main-message">
                {{error.mainMessage}}
              </h5>
              {{#if error.statusCode}}
                <span class="error-status-code">
                  {{t "general.statusCode"}}:
                  {{error.statusCode}}
                </span>
              {{/if}}
              {{#if error.message}}
                <span class="error-message">
                  {{t "general.message"}}:
                  {{error.message}}
                </span>
              {{/if}}
              <pre class="error-stack">
                {{error.stack}}
              </pre>
            </div>
          {{/each}}
        </div>
      {{/if}}
    {{/if}}
  </div>
</div>