{# 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 are: stripes of the stall's hue and cream, a band of shade under the front edge, a scalloped hem with each fold's underside darker, and the ridge pole along the top #}
{% macro awning(id) -%}
<svg class="awning" width="100%" height="36" aria-hidden="true"><defs>
  <pattern id="awning-{{ id }}" width="36" height="33" patternUnits="userSpaceOnUse">
    <rect x="0" y="0" width="18" height="22" style="fill: var(--stripe)"/>
    <rect x="18" y="0" width="18" height="22" style="fill: var(--awning-alt)"/>
    <rect x="0" y="17" width="36" height="5" style="fill: rgba(0, 0, 0, .16)"/>
    <path d="M0 22 A9 8.2 0 0 0 18 22 Z" style="fill: var(--stripe)"/>
    <path d="M18 22 A9 8.2 0 0 0 36 22 Z" style="fill: var(--awning-alt)"/>
    <path d="M3.2 26.9 A6.3 3.2 0 0 0 14.8 26.9 A9 8.2 0 0 1 3.2 26.9 Z" style="fill: rgba(0, 0, 0, .24)"/>
    <path d="M21.2 26.9 A6.3 3.2 0 0 0 32.8 26.9 A9 8.2 0 0 1 21.2 26.9 Z" style="fill: rgba(0, 0, 0, .16)"/>
  </pattern></defs>
  <rect y="3" width="100%" height="33" fill="url(#awning-{{ id }})"/>
  <rect width="100%" height="5" rx="2.5" style="fill: var(--awning-pole)"/>
</svg>
{%- endmacro %}