<DModalBody
  @title="admin.badges.preview.modal_title"
  @class="badge-query-preview"
>
  {{#if this.errors}}
    <p class="error-header">{{i18n "admin.badges.preview.sql_error_header"}}</p>

    <pre class="badge-errors">{{this.errors}}</pre>

    {{!--
      TODO we want some help pages for this, link to those instead
      <p>
        {{i18n "admin.badges.preview.error_help"}}
      </p>
      <ul>
        <li><a href="https://meta.discourse.org/t/triggered-custom-badge-queries/19336">https://meta.discourse.org/t/triggered-custom-badge-queries/19336</a></li>
      </ul>
    --}}

  {{else}}
    <p class="grant-count">
      {{#if this.count}}
        {{html-safe (i18n "admin.badges.preview.grant_count" count=this.count)}}
      {{else}}
        {{html-safe (i18n "admin.badges.preview.no_grant_count")}}
      {{/if}}
    </p>

    {{#if this.countWarning}}
      <div class="count-warning">
        <p class="heading">
          {{d-icon "exclamation-triangle"}}
          {{i18n "admin.badges.preview.bad_count_warning.header"}}
        </p>
        <p class="body">
          {{i18n "admin.badges.preview.bad_count_warning.text"}}
        </p>
      </div>
    {{/if}}

    {{#if this.sample}}
      <p class="sample">
        {{i18n "admin.badges.preview.sample"}}
      </p>
      <ul>
        {{#each this.processedSample as |html|}}
          <li>{{html-safe html}}</li>
        {{/each}}
      </ul>
    {{/if}}

    {{#if this.hasQueryPlan}}
      <div class="badge-query-plan">
        {{html-safe this.queryPlanHtml}}
      </div>
    {{/if}}
  {{/if}}
</DModalBody>