<div class=“js-tabs” data-existing-hx=“h2” data-tabs-prefix-class=“tabs”>

<ul class="js-tablist">
  {% for website in pagestested %}
  <li class="js-tablist__item">
    <a href="#id_{{ forloop.index }}" class="js-tablist__link">{{ website }}</a>
  </li>
  {% endfor %}
</ul>

{% for website in pagestested %}

{% assign labels = "" | split: ',' %}
{% assign ttfb = "" | split: ',' %}
{% assign tti = "" | split: ',' %}
{% assign score = "" | split: ',' %}

{% for data in file %}
{% if site.data.[website].gpagespeed[data] %}
    {% assign date = data | date: "%d/%m/%y" | prepend: "'" | append: "'" %}
    {% assign labels = labels | push: date  %}
    {% assign interactive = site.data.[website].lighthouse[data].audits.metrics.details.items[0].observedLoad | round: 0 %}
    {% assign tti = tti | push: interactive %}
    {% assign score = score | push: site.data.[website].gpagespeed[data].ruleGroups.SPEED.score %}
{% endif %}
{% endfor %}

<div id="id_{{ forloop.index }}" class="js-tabcontent">
  <h3>{{ website }}</h3>

  <div class="flex">
    <div>
      <strong>Temps de chargement</strong>
      <div id="chart-{{ website }}-1" class="ct-chart"></div>

      <script>
        var data{{ website }}1 = {
          labels: [{{ labels | join: ', ' }}],
          datasets: [{
            values: [{{ tti | join: ', ' }}]
          }],
          // yMarkers: [{
          //   label: "budget",
          //   value: 650,
          //   options: {
          //     labelPos: 'left'
          //   }
          // }]
        };

        let chart{{ website}}1 = new frappe.Chart("#chart-{{ website }}-1", {
          data: data{{ website }}1,
          ...frappeoptions
        })

      </script>
    </div>
    <div>
      <strong>Score</strong>
      <div id="chart-{{ website }}-2" class="ct-chart"></div>

      <script>
        var data{{ website }}2 = {
          labels: [{{ labels | join: ', ' }}],
          datasets: [{
            values: [{{ score | join: ', ' }}]
          }],
        };

        let chart{{ website }}2 = new frappe.Chart("#chart-{{ website }}-2", {
          data: data{{ website }}2,
          ...frappeoptions
        })

      </script>
    </div>
  </div>

  {% assign score = 0 %}
  {% assign timeToFirstByte = 0 %}

  <div class="table">

    {% for data in file %}

    {% if site.data %}
    {% assign gpagespeed = site.data.[website].gpagespeed[data] %}
    {% assign yellowlabtools = site.data.[website].yellowlabtools[data] %}
    {% assign lighthouse = site.data.[website].lighthouse[data] %}
    {% else %}
    {% assign gpagespeed = [website].gpagespeed[data] %}
    {% assign yellowlabtools = [website].yellowlabtools[data] %}
    {% assign lighthouse = [website].lighthouse[data] %}
    {% endif %}

    {% if gpagespeed %}

    <div class="grid">
      <div class="box date">
        <span>Date</span>
        <p>{{ data | date: "%d %b %y" }}</p>
      </div>
      <div class="box score">
        <span class="title">Score</span>
        <span class="number">{{ gpagespeed.ruleGroups.SPEED.score | round }}</span>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if score > gpagespeed.ruleGroups.SPEED.score %} score-up{% endif %}{% if score < gpagespeed.ruleGroups.SPEED.score %} score-down{% endif %}"></span>{% endif %}
        {% assign score = gpagespeed.ruleGroups.SPEED.score %}
      </div>
      <div class="box score">
        <span class="title">First Byte</span>
        <span class="number">{{ lighthouse.audits["time-to-first-byte"].numericValue | round }}</span>
        <i>ms</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if timeToFirstByte > lighthouse.audits["time-to-first-byte"].numericValue %} score-down{% endif %}{% if timeToFirstByte < lighthouse.audits["time-to-first-byte"].numericValue %} score-up{% endif %}"></span>{% endif %}
        {% assign timeToFirstByte = lighthouse.audits["time-to-first-byte"].numericValue %}
      </div>
      <div class="box score">
        <span class="title">Last change</span>
        <span class="number">{{ lighthouse.audits.metrics.details.items[0].observedLastVisualChange | round  }}</span>
        <i>ms</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if timeToFirstCss > lighthouse.audits.metrics.details.items[0].observedLastVisualChange %} score-down{% endif %}{% if timeToFirstCss < lighthouse.audits.metrics.details.items[0].observedLastVisualChange %} score-up{% endif %}"></span>{% endif %}
        {% assign timeToFirstCss = lighthouse.audits.metrics.details.items[0].observedLastVisualChange %}
      </div>
      <div class="box score">
        <span class="title">Interactive</span>
        <span class="number">{{ lighthouse.audits.metrics.details.items[0].interactive | round }}</span>
        <i>ms</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if timeToFirstByte > lighthouse.audits.metrics.details.items[0].interactive %} score-down{% endif %}{% if timeToFirstByte < lighthouse.audits.metrics.details.items[0].interactive %} score-up{% endif %}"></span>{% endif %}
        {% assign timeToFirstByte = lighthouse.audits.metrics.details.items[0].interactive %}
      </div>
      <div class="box score">
        <span class="title">Total Bytes</span>
        <span class="number">{{ lighthouse.audits["total-byte-weight"].numericValue | round }}</span> <i>kb</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if totalRequestBytes > lighthouse.audits["total-byte-weight"].numericValue %} score-down{% endif %}{% if totalRequestBytes < lighthouse.audits["total-byte-weight"].numericValue %} score-up{% endif %}"></span>{% endif %}
        {% assign totalRequestBytes = lighthouse.audits["total-byte-weight"].numericValue %}
      </div>
      <!-- <div class="box score">
        <span class="title">Images Bytes</span>
        <span class="number">{{ gpagespeed.pageStats.imageResponseBytes | round }}</span> <i>kb</i>
      </div> -->
      <div class="box score">
        <span class="title">HTML Size</span>
        <span class="number">{{ lighthouse.audits["resource-summary"].details.items[5].size | round  }}</span>
        <i>kb</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if htmlSize > lighthouse.audits["resource-summary"].details.items[5].size %} score-down{% endif %}{% if htmlSize < lighthouse.audits["resource-summary"].details.items[5].size %} score-up{% endif %}"></span>{% endif %}
        {% assign htmlSize = lighthouse.audits["resource-summary"].details.items[5].size %}
      </div>
      <div class="box score">
        <span class="title">JS Size</span>
        <span class="number">{{ lighthouse.audits["resource-summary"].details.items[2].size | round  }}</span> <i>kb</i>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if numberResources > lighthouse.audits["resource-summary"].details.items[2].size %} score-down{% endif %}{% if numberResources < lighthouse.audits["resource-summary"].details.items[2].size %} score-up{% endif %}"></span>{% endif %}
        {% assign numberResources = lighthouse.audits["resource-summary"].details.items[2].size %}
      </div>
      <div class="box score">
        <span class="title">Ressources</span>
        <span class="number">{{ gpagespeed.pageStats.numberResources | round  }}</span>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if numberResources > gpagespeed.pageStats.numberResources %} score-down{% endif %}{% if numberResources < gpagespeed.pageStats.numberResources %} score-up{% endif %}"></span>{% endif %}
        {% assign numberResources = gpagespeed.pageStats.numberResources %}
      </div>
      <div class="box score">
        <span class="title">Requests</span>
        <span class="number">{{ lighthouse.audits["resource-summary"].details.items[0].requestCount | round  }}</span>
        {% if forloop.index != 1 %}<span
          class="score-difference{% if httpsRequests > lighthouse.audits["resource-summary"].details.items[0].requestCount %} score-down{% endif %}{% if httpsRequests < lighthouse.audits["resource-summary"].details.items[0].requestCount %} score-up{% endif %}"></span>{% endif %}
        {% assign httpsRequests = lighthouse.audits["resource-summary"].details.items[0].requestCount %}
      </div>
    </div>
    {% endif %}
    {% endfor %}
  </div>
</div>
{% endfor %}

</div>