{% from "macros/signature_startup_icons.html" import startup_crash_icon,
                                                     potential_startup_crash_icon,
                                                     potential_startup_window_crash_icon,
                                                     plugin_crash_icon,
                                                     browser_crash_icon %}

{% if signature_stats %}
  <div class="panel tab-inner-panel crash-type-indicators-panel {% if signature_stats.is_startup_related_crash %} startup-crash-warning {% endif %}">
    {% if signature_stats.is_startup_crash %}
      <div class="crash-type-indicator-container">
        {{ startup_crash_icon() }}
        Startup Crash, all crashes happened during startup
      </div>
    {% elif signature_stats.is_potential_startup_crash %}
      <div class="crash-type-indicator-container">
        {{ potential_startup_crash_icon() }}
        Potential Startup Crash, {{ signature_stats.num_startup_crashes }}
        out of {{ signature_stats.num_crashes }} crashes happened during startup
      </div>
    {% endif %}

    {% if signature_stats.is_startup_window_crash %}
      <div class="crash-type-indicator-container">
        {{ potential_startup_window_crash_icon() }}
        Potential Startup Crash, more than half of the crashes happened during the first minute after launch
      </div>
    {% endif %}

    {% if signature_stats.is_plugin_crash %}
      <div class="crash-type-indicator-container">
        {{ plugin_crash_icon() }}
        Plugin Crash
      </div>
    {% else %}
      <div class="crash-type-indicator-container">
          {{ browser_crash_icon() }}
          Browser Crash
      </div>
    {% endif %}
  </div>
{% endif %}

<div class="panel tab-inner-panel" id="panel-platform">
  <header class="title" title="Toggle visibility">
    <h2>Operating System</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-8/12">Operating System</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for platform in query.facets.platform_pretty_version %}
          <tr>
            <td>{{ platform.term }}</td>
            <td>{{ platform.count }}</td>
            <td>{{ (100.0 * platform.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-product">
  <header class="title" title="Toggle visibility">
    <h2>Product <sup>*</sup></h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-4/12">Product</th>
          <th class="header w-2/12">Version</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
          <th class="header">Installations (approx)</th>
        </tr>
      </thead>
      <tbody>
        {% for product_facet in query.facets.product %}
          {% for version_facet in product_facet.facets.version %}
            <tr>
              <td>{{ product_facet.term }}</td>
              <td>{{ version_facet.term }}</td>
              <td>{{ version_facet.count }}</td>
              <td>{{ (100.0 * version_facet.count / product_version_total) | round(1) }}%</td>
              <td>{{ minimum(version_facet.facets.cardinality_install_time.value, version_facet.count) }}</td>
            </tr>
          {% endfor %}
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-process-type">
  <header class="title" title="Toggle visibility">
    <h2>Process Type</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-8/12">Process Type</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for process_type in query.facets.process_type %}
          <tr>
            <td>{{ process_type.term }}</td>
            <td>{{ process_type.count }}</td>
            <td>{{ (100.0 * process_type.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-device">
  <header class="title" title="Toggle visibility">
    <h2>Mobile Devices</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-2/12">Manufacturer</th>
          <th class="header w-2/12">Model</th>
          <th class="header w-2/12">
            <a href="https://en.wikipedia.org/wiki/Android_%28operating_system%29#Platform_usage">
              API Level
            </a>
          </th>
          <th class="header w-2/12">CPU ABI</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for device in query.facets.android_cpu_abi %}
          <tr>
            <td>{{ device.manufacturer }}</td>
            <td>{{ device.model }}</td>
            <td>{{ device.version }}</td>
            <td>{{ device.cpu_abi }}</td>
            <td>{{ device.count }}</td>
            <td>{{ (100.0 * device.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-uptime">
  <header class="title" title="Toggle visibility">
    <h2>Uptime Range</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-8/12">Uptime Range</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for uptime in query.facets.histogram_uptime %}
          <tr>
            <td>{{ uptime.term }}</td>
            <td>{{ uptime.count }}</td>
            <td>{{ (100.0 * uptime.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-cpu-name">
  <header class="title" title="Toggle visibility">
    <h2>Architecture</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th class="header w-8/12">Architecture</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for cpu_arch in query.facets.cpu_arch %}
          <tr>
            <td>{{ cpu_arch.term }}</td>
            <td>{{ cpu_arch.count }}</td>
            <td>{{ (100.0 * cpu_arch.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>

<div class="panel tab-inner-panel" id="panel-adapter">
  <header class="title" title="Toggle visibility">
    <h2>Graphics Adapter</h2>
    <div class="options show">show</div>
  </header>
  <div class="content">
    <table class="tablesorter data-table">
      <thead>
        <tr>
          <th data-field-name="adapter_vendor" class="header w-4/12">Vendor</th>
          <th data-field-name="adapter_device" class="header w-4/12">Adapter</th>
          <th class="header w-2/12">Count</th>
          <th class="header w-2/12">Percentage</th>
        </tr>
      </thead>
      <tbody>
        {% for adapter in query.facets.adapter_vendor_id %}
          <tr>
            <td>{{ adapter.vendor }}</td>
            <td>{{ adapter.adapter }}</td>
            <td>{{ adapter.count }}</td>
            <td>{{ (100.0 * adapter.count / query.total) | round(1) }}%</td>
          </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
</div>