{% macro breadcrumbs(items, home_href='/', home_label='Home') -%}
<nav class="hil-breadcrumbs" aria-label="Breadcrumbs">
  <ol>
    <li><a href="{{ home_href }}">{{ home_label }}</a></li>
    {% for item in items %}
      {% if item.href and not loop.last %}
        <li><a href="{{ item.href }}">{{ item.label }}</a></li>
      {% else %}
        <li aria-current="page">{{ item.label }}</li>
      {% endif %}
    {% endfor %}
  </ol>
</nav>
{%- endmacro %}

{% macro page_header(title, subtitle='', eyebrow='', actions='') -%}
<header class="page-header hil-page-header">
  <div class="hil-page-title">
    {% if eyebrow %}<span class="hil-eyebrow">{{ eyebrow }}</span>{% endif %}
    <h1>{{ title }}</h1>
    {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
  </div>
  <div class="hil-page-header-actions">
    {% if actions %}{{ actions|safe }}{% endif %}
    {{ caller() if caller else '' }}
  </div>
</header>
{%- endmacro %}

{% macro section_header(title, subtitle='', actions='') -%}
<header class="section-header hil-section-header">
  <div>
    <h2>{{ title }}</h2>
    {% if subtitle %}<p>{{ subtitle }}</p>{% endif %}
  </div>
  {% if actions %}<div class="hil-section-actions">{{ actions|safe }}</div>{% endif %}
</header>
{%- endmacro %}

{% macro tabs(items, active='') -%}
<nav class="hil-tabs" aria-label="Tabs">
  {% for item in items %}
  <a href="{{ item.href }}" class="hil-tab{% if item.key == active %} is-active{% endif %}">{{ item.label }}</a>
  {% endfor %}
</nav>
{%- endmacro %}

{% macro quick_actions(items, title='Quick Actions') -%}
<section class="hil-quick-actions-panel">
  <header class="hil-section-header">
    <h3>{{ title }}</h3>
  </header>
  <div class="hil-quick-actions">
    {% for item in items %}
      <a href="{{ item.href }}" class="hil-chip{% if item.kind is defined %} hil-chip-{{ item.kind }}{% endif %}">{{ item.label }}</a>
    {% endfor %}
  </div>
</section>
{%- endmacro %}

{% macro accordion(items) -%}
<div class="hil-accordion">
  {% for item in items %}
  <details class="hil-accordion-item"{% if item.open %} open{% endif %}>
    <summary>{{ item.title }}</summary>
    <div class="hil-accordion-body">{{ item.body }}</div>
  </details>
  {% endfor %}
</div>
{%- endmacro %}

{% macro context_menu(items) -%}
<ul class="hil-context-menu" role="menu">
  {% for item in items %}
  <li role="none">
    <a role="menuitem" href="{{ item.href }}">{{ item.label }}</a>
  </li>
  {% endfor %}
</ul>
{%- endmacro %}