{# pieces the computers' pages share #}

{# the tile of the system a computer runs, the plain screen while its node has not said #}
{% macro os(host) -%}
<span class="os">{% if host and host.system == "Linux" %}{% include "computers/icons/os-linux.svg" %}{% elif host and host.system == "Darwin" %}{% include "computers/icons/os-apple.svg" %}{% elif host and host.system == "Windows" %}{% include "computers/icons/os-windows.svg" %}{% else %}{% include "computers/icons/monitor.svg" %}{% endif %}</span>
{%- endmacro %}

{# how full something is, as btop draws it: cells in the lanterns' colours by where each sits #}
{% macro cells(percent, n=16, wide=false) -%}
{%- set filled = (percent * n / 100) | round | int -%}
<span class="cells{% if wide %} wide{% endif %}" aria-hidden="true">{% for i in range(n) %}{% set at = (i + 1) / n %}<i{% if i < filled %} class="{{ 'lo' if at <= 0.6 else 'mid' if at <= 0.85 else 'hi' }}"{% endif %}></i>{% endfor %}</span>
{%- endmacro %}

{# a mount as people name it: a Windows drive without its backslash #}
{% macro mount(disk) -%}{{ disk.mount[:-1] if disk.mount | length == 3 and disk.mount.endswith(":\\") else disk.mount }}{%- endmacro %}

{# a stall's awning, drawn as the street's: stripes of the stall's hue and the street's light one flaring out from the ridge pole, a band of shade along the front edge, and a scalloped hem with the underside of each fold in shade; drawn 360 wide and stretched to the card #}
{% macro awning() -%}
{%- set n, w, inset, top, front = 13, 360, 10, 9, 41 -%}
{%- set back, step = (w - 2 * inset) / n, w / n -%}
{%- set r = step / 2 -%}
{%- set dip = front + r * 0.55 -%}
<svg class="awning" width="100%" height="54" viewBox="0 0 {{ w }} 54" preserveAspectRatio="none" aria-hidden="true">
{%- for kind, first in (("hue", 0), ("alt", 1)) %}
  <path class="{{ kind }}" d="{% for i in range(first, n, 2) %}M{{ (inset + back * i) | round(1) }} {{ top }}H{{ (inset + back * (i + 1)) | round(1) }}L{{ (step * (i + 1)) | round(1) }} {{ front }}H{{ (step * i) | round(1) }}Z{% endfor %}"/>
{%- endfor %}
  <rect class="band" y="{{ front - 5 }}" width="{{ w }}" height="5"/>
{%- for kind, first in (("hue", 0), ("alt", 1)) %}
  <path class="{{ kind }}" d="{% for i in range(first, n, 2) %}M{{ (step * i) | round(1) }} {{ front }}A{{ r | round(1) }} {{ (r * 0.9) | round(1) }} 0 0 0 {{ (step * (i + 1)) | round(1) }} {{ front }}Z{% endfor %}"/>
  <path class="{{ kind }}-fold" d="{% for i in range(first, n, 2) %}M{{ (step * (i + 0.18)) | round(1) }} {{ dip | round(1) }}A{{ (r * 0.7) | round(1) }} {{ (r * 0.35) | round(1) }} 0 0 0 {{ (step * (i + 0.82)) | round(1) }} {{ dip | round(1) }}A{{ r | round(1) }} {{ (r * 0.9) | round(1) }} 0 0 1 {{ (step * (i + 0.18)) | round(1) }} {{ dip | round(1) }}Z{% endfor %}"/>
{%- endfor %}
  <rect class="pole" x="{{ inset - 4 }}" y="{{ top - 5 }}" width="{{ w - 2 * inset + 8 }}" height="7" rx="3.5"/>
</svg>
{%- endmacro %}