{# Toast coach mark: a dismissible prompt shown near the top of the page after
   a short delay. Mirrors the portal's ToastCoachMark component (see
   pennylane.ai-react's component-library/src/components_v2/CoachMark). #}
{% if theme_coach_mark_enabled|lower == 'true' and theme_coach_mark_toast %}
<div
  id="coach-mark-toast"
  class="CoachMark CoachMark--toast"
  role="status"
  aria-live="polite"
  aria-hidden="true"
  hidden
  data-delay-ms="{{ theme_coach_mark_toast.get('delayMs', 3000) }}"
>
  <i
    class="CoachMark__icon bx {{ 'bx-bulb' if theme_coach_mark_toast.icon == 'lightbulb' else 'bxs-megaphone' }}"
    aria-hidden="true"
  ></i>
  <div class="CoachMark__content">
    <p class="CoachMark__title">{{ theme_coach_mark_toast.title }}</p>
    <p class="CoachMark__body">
      {%- for part in theme_coach_mark_toast.body -%}
        {%- if part is mapping and part.get("type") == "action" -%}
          <button
            type="button"
            class="CoachMark__link"
            data-ga-label="{{ part.gaLabel }}"
            onclick="handleCoachMarkLinkClick(this)"
          >{{ part.text }}</button>
        {%- elif part is mapping and part.get("type") == "link" -%}
          <a
            class="CoachMark__link"
            href="{{ part.href }}"
            data-ga-label="{{ part.gaLabel }}"
            onclick="handleCoachMarkLinkClick(this)"
            {% if part.get("isExternal") %}rel="noopener noreferrer" target="_blank"{% endif %}
          >{{ part.text }}</a>
        {%- elif part is string -%}
          {{ part }}
        {%- endif -%}
      {%- endfor -%}
    </p>
  </div>
  <button
    type="button"
    class="CoachMark__close"
    aria-label="Dismiss coach mark"
    onclick="dismissCoachMarkToast()"
  >
    <i class="bx bx-x" aria-hidden="true"></i>
  </button>
</div>
{% endif %}