{# Macro page_header
   Uso:
     {% from "dg/components/page_header.html" import page_header %}
     {% call page_header(title="Apps", subtitle="12 activas") %}
       <a href="/projects/new" class="btn btn-primary">+ Crear</a>
     {% endcall %}
#}

{% macro page_header(title, subtitle="", breadcrumbs=[]) %}
<div class="flex items-start justify-between gap-4 mb-8">
  <div class="min-w-0">
    {%- if breadcrumbs %}
    <nav aria-label="Breadcrumb" class="flex items-center gap-1 text-xs text-fg-muted mb-1.5">
      {%- for crumb in breadcrumbs %}
        {%- if not loop.last %}
          <a href="{{ crumb.href }}" class="hover:text-fg truncate max-w-xs">{{ crumb.label }}</a>
          <span aria-hidden="true">›</span>
        {%- else %}
          <span class="text-fg truncate max-w-xs" aria-current="page">{{ crumb.label }}</span>
        {%- endif %}
      {%- endfor %}
    </nav>
    {%- endif %}
    <h1 class="text-2xl font-bold text-fg leading-tight truncate">{{ title }}</h1>
    {%- if subtitle %}
    <p class="text-sm text-fg-muted mt-0.5">{{ subtitle }}</p>
    {%- endif %}
  </div>
  {%- if caller is defined %}
  <div class="flex items-center gap-2 shrink-0 pt-0.5">
    {{ caller() }}
  </div>
  {%- endif %}
</div>
{%- endmacro %}