{% load static %}
{# ─────────────────────────────────────────────────────────────────────── #}
{# _bud_add_panel.html — bottom-left handshake btn + slide-out add-bud  #}
{# field. Skeleton (open/close/POST) owned by bud-btn.js; this partial    #}
{# wires the add-bud success callback: {bud} → append .bud-entry to      #}
{# #id_buds_list.                                                          #}
{# Included by my_buds.html only.                                          #}
{#                                                                         #}
{# No autocomplete — the bud-autocomplete pool is request.user.buds,      #}
{# which is precisely the set you can't usefully re-add. Post-share +     #}
{# gatekeeper-invite panels DO bind autocomplete.                          #}
{# ─────────────────────────────────────────────────────────────────────── #}

<button id="id_bud_btn" type="button" aria-label="Add a bud">
    <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>

<script src="{% static 'apps/billboard/bud-btn.js' %}"></script>
<script>
(function () {
    'use strict';

    function _appendBudEntry(bud) {
        var list = document.getElementById('id_buds_list');
        if (!list || !bud) return;
        // Skip if already in DOM (server-side dedup ensures M2M idempotence;
        // this guards a fast double-click that races the post-add refresh).
        if (list.querySelector('[data-bud-id="' + bud.id + '"]')) return;
        // Drop the empty-state row if present — _applet-list-shell renders
        // it w. `.applet-list-entry--empty` (NOT `.bud-entry--empty`); the
        // shell sets the family-agnostic class.
        var empty = list.querySelector('.applet-list-entry--empty');
        if (empty) empty.remove();

        var li = document.createElement('li');
        li.className = 'bud-entry';
        li.dataset.budId = bud.id;
        var name = document.createElement('span');
        name.className = 'bud-name';
        // Mirror the `at_handle` template filter: prefix `@` on plain
        // usernames; leave the value untouched if it already contains
        // `@` (the server falls back to email when username is unset,
        // and emails don't take the prefix).
        var display = bud.username || '';
        name.textContent = display.indexOf('@') >= 0 ? display : '@' + display;
        li.appendChild(name);
        var buffer = list.querySelector('.bud-entry-buffer');
        if (buffer) list.insertBefore(li, buffer);
        else list.appendChild(li);
    }

    bindBudBtn({
        submitUrl: '{% url "billboard:add_bud" %}',
        onSuccess: function (data) {
            if (data.bud) _appendBudEntry(data.bud);
        },
        duplicateTargetSelector: function (data) {
            return '.bud-entry[data-bud-id="' + data.recipient_user_id + '"] .bud-name';
        },
    });
}());
</script>