<div class="correlations-wrapper"
     data-correlation_version="{{ correlation_version }}"
     data-correlation_os="{{ correlation_os }}">

{% if correlation_os and correlation_version %}
<h2>Correlations for {{ product }} {{ correlation_version }} {{ correlation_os }}</h2>

<p>Below are tables of correlation data generated by <a href="http://dbaron.org/mozilla/topcrash-modules">dbaron's scripts</a>. If this crash signature is
a top crasher, then we should be able to load it from <a href="https://crash-analysis.mozilla.com/crash_analysis/">the original text files</a>. Only the first 2MB of each Platform's output is loaded. If this screen has data from multiple product/version/platforms, the crashiest was picked ({{ product }} {{ correlation_version }} {{ correlation_os }}).</p>

<ul class="accordion" role="tablist" aria-multiselectable="true">
  <li id="mod">
    <h3 id="modules-heading" class="heading" role="tab" aria-expanded="true" aria-selected="true">
        <a href="#interesting-modules-correlation">
            <span aria-hidden="true" data-icon="&#xe803"></span>Modules
        </a>
    </h3>
    <div id="interesting-modules-correlation" class="content-pane show" role="tabpanel" aria-labelledby="modules-heading" tabindex="-1">
        <p class="spinner">Loading <img src="{{ static('img/loading.png') }}" width="16" height="17" alt="loading spinner" /></p>
    </div>
  </li>
  <li>
    <h3 id="modver-heading" class="heading" role="tab" aria-expanded="false" aria-selected="false">
      <a href="#interesting-modules-with-versions-correlation">
        <span aria-hidden="true" data-icon="&#xe803"></span>Modules By Versions
      </a>
    </h3>
    <div id="interesting-modules-with-versions-correlation" class="content-pane" role="tabpanel" aria-labelledby="modver-heading" tabindex="-1">
      <button name="interesting-modules-with-versions" class="load-version-data">Load</button>
    </div>
  </li>
  <li id="add">
    <h3 id="addons-heading" class="heading" role="tab" aria-expanded="false" aria-selected="false">
      <a href="#interesting-addons-correlation">
        <span aria-hidden="true" data-icon="&#xe803"></span>Add-Ons
      </a>
    </h3>
    <div id="interesting-addons-correlation" class="content-pane" role="tabpanel" aria-labelledby="addons-heading" tabindex="-1">
      <p class="spinner">Loading <img src="{{ static('img/loading.png') }}" width="16" height="17" alt="loading spinner" /></p>
    </div>
  </li>
  <li>
    <h3 id="addonsbyver-heading" class="heading" role="tab" aria-expanded="false" aria-selected="false">
      <a href="#interesting-addons-with-versions-correlation">
        <span aria-hidden="true" data-icon="&#xe803"></span>Add-Ons By Version
      </a>
    </h3>
    <div id="interesting-addons-with-versions-correlation" class="content-pane" role="tabpanel" aria-labelledby="addonsbyver-heading" tabindex="-1">
      <button name="interesting-addons-with-versions" class="load-version-data">Load</button>
    </div>
  </li>
  <li>
    <h3 id="cpucores-heading" class="heading" role="tab" aria-expanded="false" aria-selected="false">
      <a href="#core-counts-correlation">
        <span aria-hidden="true" data-icon="&#xe803"></span>CPU Cores
      </a>
    </h3>
    <div id="core-counts-correlation" class="content-pane" role="tabpanel" aria-labelledby="cpucores-heading" tabindex="-1">
      <p class="spinner">Loading <img src="{{ static('img/loading.png') }}" width="16" height="17" alt="loading spinner" /></p>
    </div>
  </li>
</ul>
{% else %}
  {% if not correlation_os %}
    <p class="error">No OS for all reports under this signature.</p>
  {% endif %}
  {% if not correlation_version %}
    <p class="error">No version for all reports under this signature.</p>
  {% endif %}
{% endif %}
</div>
