{% load static %}
{# Sprint 6 iter 6c — bud-btn invite panel on the my-sea gatekeeper.   #}
{# Mirrors `_bud_invite_panel.html` (room) but POSTs to a stub view —  #}
{# real async multi-user invite is deferred to a future sprint, so OK  #}
{# returns a 'Multiplayer my-sea coming soon' Brief banner.            #}

<button id="id_bud_btn" type="button" aria-label="Invite a friend">
    <i class="fa-solid fa-handshake"></i>
</button>

<div id="id_bud_panel">
    <input id="id_recipient"
           name="recipient"
           type="text"
           placeholder="friend@example.com or username"
           autocomplete="off">
    <button id="id_bud_ok" type="button" class="btn btn-confirm">OK</button>
</div>

<div id="id_bud_suggestions" class="bud-suggestions" hidden></div>

<script src="{% static 'apps/billboard/bud-autocomplete.js' %}"></script>
<script src="{% static 'apps/billboard/bud-btn.js' %}"></script>
<script>
bindBudBtn({
    submitUrl: '{% url "my_sea_invite" %}',
    autocompleteUrl: '{% url "billboard:search_buds" %}',
    onSuccess: function (data) {
        if (window.Brief && data.brief) Brief.showBanner(data.brief);
    },
});
</script>