{% import 'macros.html' as m with context %}
{% if fronting %}
<div class="sub">
  <div class="label block">Fronting</div>
  {% set items = [] %}
  {% for row in fronting %}{% if row.count %}{% set _ = items.append(Slice(row.label, row.count, ctx.hue(row.hue))) %}{% endif %}{% endfor %}
  {{ stack_bar(items)|safe }}
  <div class="chips" style="margin-top:1.6mm">
    {% for row in fronting %}{% if row.count %}<span class="chip"><span style="display:inline-block;width:6px;height:6px;border-radius:2px;background:{{ ctx.hue(row.hue) }}"></span>&nbsp;{{ row.label }} {{ row.count|num }}</span>{% endif %}{% endfor %}
  </div>
  {% if waf %}<p class="micro faint" style="margin-top:1.4mm">{{ waf|num }} assets report a web application firewall.</p>{% endif %}
</div>
{% endif %}

{% if networks %}
<div class="sub">
  <div class="label block">Hosting networks</div>
  {{ bars(networks|pairs, width=470, label_width=200, palette=ctx.palette)|safe }}
</div>
{% endif %}

{% if countries %}
<div class="sub">
  <div class="label block">Countries</div>
  {{ bars(countries|pairs, width=470, label_width=120, palette=ctx.palette)|safe }}
</div>
{% endif %}

{% if tech %}
<div class="sub">
  <div class="label block">Technologies</div>
  {{ bars(tech|pairs, width=470, label_width=200, palette=ctx.palette)|safe }}
  <p class="micro faint" style="margin-top:1.4mm">Count of web assets per technology.</p>
</div>
{% endif %}