{# Layout components — page header, titled card sections, key/value grids.

   Macros: page_header, section_card, info_item, info_grid, collapsible
#}

{% macro page_header(title, back_url="", description="") %}
{# Title row with optional back arrow and a slot for actions (use with {% call %}).

   Usage:
       {% call page_header("Pipeline details", back_url="/ci") %}
           <button class="btn btn-brand">Run now</button>
       {% endcall %}
#}
<div class="flex items-start justify-between gap-4">
    <div class="min-w-0">
        <div class="flex items-center gap-2">
            {% if back_url %}
            <a href="{{ back_url }}" class="icon-btn" aria-label="Back">
                <i data-lucide="arrow-left"></i>
            </a>
            {% endif %}
            <h1 class="text-xl font-semibold tracking-tight">{{ title }}</h1>
        </div>
        {% if description %}
        <p class="text-sm text-fg-3 mt-1 {% if back_url %}ml-10{% endif %}">{{ description }}</p>
        {% endif %}
    </div>
    <div class="flex items-center gap-2 flex-shrink-0">
        {{ caller() }}
    </div>
</div>
{% endmacro %}


{% macro section_card(title, subtitle="", icon="") %}
{# Card with a header bar; the body has NO padding so tables and editors go
   edge to edge. Use with {% call %}. #}
<div class="card overflow-hidden">
    <div class="section-head">
        <h2>
            {% if icon %}<i data-lucide="{{ icon }}" class="w-4 h-4 text-fg-3"></i>{% endif %}
            {{ title }}
        </h2>
        {% if subtitle %}<span class="text-xs text-fg-3">{{ subtitle }}</span>{% endif %}
    </div>
    {{ caller() }}
</div>
{% endmacro %}


{% macro info_item(label, value, mono=false) %}
{# One label/value cell for info_grid. #}
<div class="card p-3 min-w-0">
    <div class="text-xs text-fg-3 mb-1">{{ label }}</div>
    <div class="truncate {% if mono %}mono text-xs{% else %}text-sm{% endif %}">{{ value }}</div>
</div>
{% endmacro %}


{% macro info_grid(cols=4) %}
{# Grid of info_item cells. cols: 2, 3 or 4. Use with {% call %}. #}
<div class="grid gap-3 {% if cols == 2 %}grid-cols-2{% elif cols == 3 %}grid-cols-3{% else %}grid-cols-2 md:grid-cols-4{% endif %}">
    {{ caller() }}
</div>
{% endmacro %}


{% macro collapsible(title, expanded=true, id="") %}
{# Section that folds on click. Use with {% call %}. #}
<div x-data="{ show: {{ 'true' if expanded else 'false' }} }" {% if id %}id="{{ id }}"{% endif %}>
    <button type="button" class="section-head w-full text-left cursor-pointer" @click="show = !show" :aria-expanded="show">
        <h2>{{ title }}</h2>
        <i data-lucide="chevron-down" class="w-4 h-4 text-fg-4 transition-transform" :class="show ? 'rotate-180' : ''"></i>
    </button>
    <div x-show="show" x-cloak>
        {{ caller() }}
    </div>
</div>
{% endmacro %}