{% load static %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_invite_panel.html — bud btn + slide-out for the gatekeeper game- #}
{# invite flow. Skeleton (open/close/POST + autocomplete) owned by         #}
{# bud-btn.js; this partial wires the invite success callback: server     #}
{# returns {brief, recipient_display} — no line_text (no Post to append a #}
{# Line to). JS just shows the Brief banner.                               #}
{#                                                                         #}
{# Caller must pass `room` in context.                                    #}
{# ─────────────────────────────────────────────────────────────────────── #}

<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>

{# Autocomplete suggestions — sibling because the panel has overflow:hidden #}
{# for the slide-in scaleX animation. Pulls from request.user.buds.        #}
<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 "epic:invite_gamer" room.id %}',
    autocompleteUrl: '{% url "billboard:search_buds" %}',
    onSuccess: function (data) {
        if (window.Brief && data.brief) Brief.showBanner(data.brief);
    },
    duplicateTargetSelector: function (data) {
        // Pending RoomInvite duplicates have no recipient_user_id (no
        // visible slot to highlight); selector returning null is fine —
        // showDuplicateBanner's FYI just dismisses without easing.
        if (!data.recipient_user_id) return null;
        return '.gate-slot.filled[data-user-id="' + data.recipient_user_id + '"]';
    },
});
</script>