{% set content_url = url('system.admin_content')|render %}
{% set img_path = module_path ~ '/components/alfa_scan_display/images' %}

<div {{ attributes.addClass(['alfa-scan-display-wrapper']) }}>
  {% if viz_type is same as('spir') %}
    <div class="scan-panel-control">
      <button class="siteimprove-scan-button" type="button" data-observe-key="a11y-Drupal-CheckPage">
        <span class="icon-wrapper">
          <span class="icon"></span>
          {{ 'Check page'|t }}
        </span>
      </button>
    </div>
    <div class="spir-details">
      <p><strong>{{ 'Latest scan date'|t }}</strong>: <span class="alfa-scan-date">{{ 'N/A'|t }}</span></p>
    </div>
    <div id="single-page-reporting"></div>
  {% elseif viz_type is same as('cp') %}
    <div id="compliance-dashboard"></div>
  {% else %}
    <div class="siteimprove-dashboard-container wrap">
      <div id="siteimprove-scan-report" class="siteimprove-component-container">
        {% if  initial_scan_run == true %}
          <div class="siteimprove-component-placeholder">{{ 'Loading issues ...'|t }}</div>
          <div class="siteimprove-empty-issues-container" style="display: none;">
            <img src="{{ file_url(img_path ~ '/a11y-icon.svg') }}" alt="{{ 'All clear!'|t }}" />
            <h2>{{ 'All clear!'|t }}</h2>
            <p>
              {{ 'No accessibility issues were found on your content. You\'re looking good!'|t }}<br />
              {{ 'New issues will populate here as you create and scan new content.'|t }}
            </p>
          </div>
        {% else %}
          <div class="siteimprove-empty-issues-container">
            <h2>{{ 'Find and fix accessibility issues'|t }}</h2>
            <p>{{ 'This table will populate with accessibility issues as you scan your content.'|t }}</p>
            <p><img src="{{ file_url(img_path ~ '/issues-table-720.jpg') }}" alt="{{ 'Issues table'|t }}"/></p>
            <a href="{{ url('<front>') }}" class="button button-primary">{{ 'Check Homepage'|t }}</a>
            <p>
              {{ 'Or, open node type <a href=":url">content</a> preview to begin an accessibility check.'|t({':url': content_url}, {'context': 'siteimprove_accessibility'}) }}
            </p>
          </div>
        {% endif %}
      </div>
    </div>
  {% endif %}
</div>
