{% if observatory %}

<div class=“progress progress-number flex”>

<div>
  <h4>Securite</h4>
</div>
<div>
  {%- assign score = 0 -%}
  {%- for rules in observatory -%}
  {%- for rule in rules -%}
  {%- assign name == rule.name -%}
  {%- if name.size > 0 -%}
  {%- assign scoremodifier = rule.score_modifier -%}
  {%- assign score = score | plus: scoremodifier  -%}
  {%- endif -%}
  {%- endfor -%}
  {%- endfor -%}
  <div class="progress-bar-element">
    <div>
      <div class="progress-bar-tooltip" style="left: {% if score < -100 %}100{% else %}{{ score | times: -1 }}{% endif %}%;z-index:2">{{ pages.name }}</div>
    </div>
    <div>
      <!-- <div class="progress-bar-score" style="transform: translate(50%,35%);color: rgba(34,150,30,1);">Good</div> -->
      <div class="progress-bar-score" style="left: {% if score < -100 %}100{% else %}{{ score | times: -1  }}{% endif %}%;z-index:2">{% if score < -100 %}0{% else %}{{ 100 | plus: score }}{% endif %}</div>
      <!-- <div class="progress-bar-score" style="color: rgba(176,2,2,1);">Bad</div> -->
    </div>
  </div>
</div>

</div> {% endif %}