{% load static %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_apparatus.html — shared markup for the four bud-btn use cases:   #}
{#   • _my_sea_bud_panel.html  (my-sea gatekeeper invite stub)          #}
{#   • _bud_panel.html         (post.html share-post)                   #}
{#   • _bud_invite_panel.html  (room.html gatekeeper game-invite)       #}
{#   • _bud_add_panel.html     (my_buds.html add-bud)                   #}
{#                                                                        #}
{# Each caller follows the include w. its own                            #}
{# <script>bindBudBtn({...})</script> block carrying the per-use-case    #}
{# submitUrl + onSuccess + (optional) duplicateTargetSelector. The shell #}
{# loads bud-btn.js + autocomplete (when `include_suggestions` is true)  #}
{# so the caller can call bindBudBtn() inline.                           #}
{#                                                                        #}
{# Context vars:                                                          #}
{#   aria_label          — string for #id_bud_btn aria-label              #}
{#   sharer_name         — optional; renders data-sharer-name="..." on    #}
{#                         #id_bud_panel (post-share only)                #}
{#   include_suggestions — bool; renders #id_bud_suggestions + autocompete #}
{#                         script (false only for my_buds, where the      #}
{#                         autocomplete pool == request.user.buds, which  #}
{#                         is precisely what you can't usefully re-add)   #}
{# ─────────────────────────────────────────────────────────────────────── #}

<button id="id_bud_btn" type="button" aria-label="{{ aria_label|default:'Bud' }}">
    <i class="fa-solid fa-handshake"></i>
</button>

<div id="id_bud_panel"{% if sharer_name %} data-sharer-name="{{ sharer_name }}"{% endif %}>
    <input id="id_recipient"
           name="recipient"
           type="text"
           placeholder="bud@example.com or username"
           autocomplete="off">
    <button id="id_bud_ok" type="button" class="btn btn-confirm">OK</button>
</div>

{% if include_suggestions %}
<div id="id_bud_suggestions" class="bud-suggestions" hidden></div>
<script src="{% static 'apps/billboard/bud-autocomplete.js' %}"></script>
{% endif %}

<script src="{% static 'apps/billboard/bud-btn.js' %}"></script>