{# ── Reusable component macros ─────────────────────────────
   Usage:
     {% from "macros.html" import panel %}
     {% call panel("SYSTEM HEALTH") %}
       <p>Content here</p>
     {% endcall %}

   Optional kwargs:
     id        – element id for HTMX targeting
     classes   – extra CSS classes on the outer card
     hx_get    – HTMX polling endpoint
     hx_trigger – HTMX trigger (default: none)
     hx_target – HTMX swap target (default: "this")
     hx_swap   – HTMX swap strategy (default: "innerHTML")
#}

{% macro panel(title, id="", classes="", hx_get="", hx_trigger="", hx_target="this", hx_swap="innerHTML") %}
<div class="card mc-panel {{ classes }}"
  {%- if id %} id="{{ id }}"{% endif %}
  {%- if hx_get %} hx-get="{{ hx_get }}"{% endif %}
  {%- if hx_trigger %} hx-trigger="{{ hx_trigger }}"{% endif %}
  {%- if hx_get %} hx-target="{{ hx_target }}" hx-swap="{{ hx_swap }}"{% endif %}>
  <div class="card-header mc-panel-header">// {{ title }}</div>
  <div class="card-body p-3">
    {{ caller() }}
  </div>
</div>
{% endmacro %}