{% macro icon(name) -%}
<svg class="icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">{% if name == 'overview' %}<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>{% elif name == 'profile' %}<circle cx="12" cy="8" r="4"/><path d="M4 21v-2a8 8 0 0 1 16 0v2"/>{% elif name == 'friends' %}<circle cx="9" cy="8" r="3"/><path d="M3 21v-3a6 6 0 0 1 12 0v3M16 5a3 3 0 0 1 0 6m2 4a5 5 0 0 1 3 5"/>{% elif name == 'settings' %}<path d="M4 7h16M4 17h16"/><circle cx="8" cy="7" r="3"/><circle cx="16" cy="17" r="3"/>{% elif name == 'clock' %}<circle cx="12" cy="12" r="9"/><path d="M12 7v5l3 2"/>{% elif name == 'route' %}<circle cx="5" cy="18" r="2"/><circle cx="19" cy="6" r="2"/><path d="M5 16V7a3 3 0 0 1 6 0v10a3 3 0 0 0 6 0V6"/>{% elif name == 'run' %}<circle cx="15" cy="4" r="2"/><path d="m5 9 5-2 4 4 5 1M12 9l-3 6 5 3v4M9 15l-3 5H2"/>{% elif name == 'plus' %}<path d="M12 5v14M5 12h14"/>{% elif name == 'upload' %}<path d="M12 16V3m-5 5 5-5 5 5M4 15v6h16v-6"/>{% else %}<path d="M4 12h16m-6-6 6 6-6 6"/>{% endif %}</svg>
{%- endmacro %}
{% macro running_map(compact=false) -%}
<div class="running-map {{ 'compact-map' if compact }}">
<svg viewBox="0 0 760 320" preserveAspectRatio="xMidYMid slice" role="img" aria-label="Illustrated running route through a city park">
<rect width="760" height="320" fill="#171d20"/>
<g fill="#202d29" stroke="#2b3b33" stroke-width="1"><path d="m260 45 170-20 62 88-36 93-173-11-52-63Z"/><path d="m545 202 140-22 57 120H548Z"/></g>
<path d="M-20 270C110 190 112 342 278 268S480 259 560 123 711 81 800 8" fill="none" stroke="#253943" stroke-width="35"/>
<g fill="none" stroke="#30383b" stroke-width="9"><path d="M-20 52 790 52M-20 155 200 155 239 215 790 215M45-20V340M166-20V340M539-20V340M680-20V340M-20 305 790 305M290-20 290 30M430-20 430 24M332 210V340"/></g>
<g fill="none" stroke="#41484a" stroke-width="1"><path d="M-20 52 790 52M-20 155 200 155 239 215 790 215M45-20V340M166-20V340M539-20V340M680-20V340M-20 305 790 305"/></g>
<g fill="none" stroke="#2b3336" stroke-width="3"><path d="M95 0v320M0 103h215M0 255h165M590 0v320M730 0v320M495 105h265M540 265h220M215 0v100M377 228v92"/></g>
<g font-family="monospace" font-size="9" letter-spacing="2" fill="#788682"><text x="313" y="114">NORTH PARK</text><text x="567" y="44">PARK AVENUE</text><text x="72" y="205" transform="rotate(-90 72 205)">RIVER STREET</text><text x="565" y="290">RIVERSIDE</text></g>
<path class="map-route-glow" d="M166 215V52H430L475 112 449 175H290L250 128H166V215"/>
<path class="map-route" d="M166 215V52H430L475 112 449 175H290L250 128H166V215"/>
<circle cx="166" cy="215" r="6" fill="#171d20" stroke="#ff8659" stroke-width="3"/>
<g class="map-runner"><circle r="15" fill="#ff8659" opacity=".16"/><circle r="6" fill="#fff0e6" stroke="#ff8659" stroke-width="3"/></g>
<g transform="translate(713 28)" fill="none" stroke="#94a19e"><path d="M0 24V0m-5 8 5-8 5 8"/><text x="-3" y="-8" fill="#94a19e" stroke="none" font-size="9">N</text></g>
</svg>
<div class="map-caption"><span><i></i> RUN THE CITY <small>Illustrated route</small></span></div>
</div>
{%- endmacro %}