{# _bud_add_panel.html — handshake btn + slide-out add-bud field on    #}
{# my_buds.html. No autocomplete — the pool is request.user.buds, which #}
{# is precisely the set you can't usefully re-add. On success, appends  #}
{# a .bud-entry to #id_buds_list.                                       #}
{% include "apps/billboard/_partials/_bud_apparatus.html" with aria_label="Add a bud" include_suggestions=False %}
<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();

        // Mirror _my_buds_item.html EXACTLY so the async row behaves like a
        // server-rendered one: both classes (styling + tooltip-lock key on
        // them), the data-tt-* attrs the portal reads on row-lock, the
        // bud-page anchor, and the trailing ` the <Title>`. Earlier this
        // built a bare `@handle` <li> → empty tooltip + dead row.
        // `at_handle` comes from the server (the client can't replicate the
        // truncate_email fallback for username-less buds); fall back to a
        // naive `@`-prefix only if the payload predates that field.
        var handle = bud.at_handle || (function () {
            var d = bud.username || '';
            return d.indexOf('@') >= 0 ? d : '@' + d;
        }());
        var title = bud.title || '';

        var li = document.createElement('li');
        li.className = 'applet-list-entry bud-entry';
        li.dataset.budId = bud.id;
        li.dataset.ttTitle = handle;
        li.dataset.ttDescription = title;
        li.dataset.ttEmail = bud.email || '';
        li.dataset.ttShoptalk = '';   // fresh bud — no BudshipNote yet

        var name = document.createElement('span');
        name.className = 'bud-name';
        var a = document.createElement('a');
        a.href = '/billboard/buds/' + bud.id + '/';
        a.textContent = handle;
        name.appendChild(a);
        li.appendChild(name);

        var rowTitle = document.createElement('span');
        rowTitle.className = 'bud-row-title';
        rowTitle.textContent = ' the ' + title;
        li.appendChild(rowTitle);

        // Keep the trailing spacer LAST — _applet-grid-list.html renders it
        // as `.applet-list-buffer` (not `.bud-entry-buffer`); querying the
        // wrong class fell through to appendChild, dropping the new row
        // BELOW the buffer.
        var buffer = list.querySelector('.applet-list-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>