{# Shared Control Plane UI macros: bubble help + next-step guide. #}

{% macro help_bubble(text, label='Help') -%}
<span class="cp-help">
  <button type="button" class="cp-help__btn" aria-label="{{ label }}">?</button>
  <span class="cp-help__bubble" role="tooltip">{{ text }}</span>
</span>
{%- endmacro %}

{% macro render_next_steps(steps, title='What to do next') -%}
{% if steps %}
<section class="cp-guide" aria-label="{{ title }}">
  <div class="cp-guide__header">
    <div>
      <div class="cp-guide__eyebrow">Guided steps</div>
      <h2 class="cp-guide__title">{{ title }}</h2>
    </div>
  </div>
  <ol class="cp-guide__list">
    {% for s in steps %}
    <li class="cp-guide__item cp-guide__item--{{ s.priority }}">
      <span class="cp-guide__badge">
        {% if s.priority == 'recommended' %}Next
        {% elif s.priority == 'optional' %}Optional
        {% else %}Status{% endif %}
      </span>
      <div>
        <p class="cp-guide__item-title">{{ s.title }}</p>
        <p class="cp-guide__item-body">{{ s.body }}</p>
      </div>
      {% if s.href and s.cta %}
        <a class="cp-guide__cta" href="{{ s.href }}">{{ s.cta }}</a>
      {% elif s.section and s.cta %}
        <a class="cp-guide__cta" href="#{{ s.section }}" data-cp-scroll="{{ s.section }}">{{ s.cta }}</a>
      {% endif %}
    </li>
    {% endfor %}
  </ol>
</section>
{% endif %}
{%- endmacro %}

{% macro lifecycle_checklist(items) -%}
{% if items %}
<ul class="cp-checklist" aria-label="Phase lifecycle progress">
  {% for item in items %}
  <li class="cp-checklist__item{% if item.done %} cp-checklist__item--done{% endif %}">
    <span class="cp-checklist__dot" aria-hidden="true"></span>
    {{ item.label }}
  </li>
  {% endfor %}
</ul>
{% endif %}
{%- endmacro %}