<style>
    /* Stern-Button: neutral grau, gemerkt amber. Klasse .is-fav steuert den
       Zustand; das Skript unten schaltet sie per Klick um (optimistisch). */
    .fav-star { color: rgb(107 114 128); }                 /* gray-500 */
    .fav-star:hover { background-color: rgb(243 244 246); } /* gray-100 */
    .dark .fav-star { color: rgb(209 213 219); }
    .dark .fav-star:hover { background-color: rgb(55 65 81); } /* gray-700 */
    .fav-star.is-fav {
        color: rgb(217 119 6);            /* amber-600 */
        background-color: rgb(255 251 235); /* amber-50 */
        border-color: rgb(252 211 77);      /* amber-300 */
    }
    .dark .fav-star.is-fav {
        color: rgb(252 211 77);                /* amber-300 */
        background-color: rgba(245, 158, 11, 0.10);
        border-color: rgba(251, 191, 36, 0.40);
    }
</style>
<script>
(function () {
    if (window.__favStarBound) return;
    window.__favStarBound = true;

    document.addEventListener('click', function (e) {
        var btn = e.target.closest('[data-favorit]');
        if (!btn) return;
        e.preventDefault();
        var id = btn.getAttribute('data-favorit');
        var aktiv = btn.getAttribute('data-aktiv') === '1';
        var endpoint = btn.getAttribute('data-endpoint') || ('/jobangebote/' + encodeURIComponent(id) + '/favorit');

        // Optimistisch umschalten, sofort sichtbar.
        setzeBtn(btn, !aktiv);

        fetch(endpoint, {
            method: 'POST',
            headers: { 'X-Requested-With': 'fetch' }
        })
            .then(function (r) { return r.json().then(function (j) { return { ok: r.ok, json: j }; }); })
            .then(function (r) {
                if (r.ok && r.json && r.json.success) {
                    setzeBtn(btn, !!r.json.favorit);
                    // Zeile ausblenden, sobald sie nicht mehr in die aktuelle
                    // Ansicht gehört: auf der Offen-Seite beim Merken (favorit=1),
                    // auf der Gemerkt-Seite / Startseite beim Entfernen (favorit=0).
                    entferneFavoritZeile(btn, !!r.json.favorit);
                } else {
                    setzeBtn(btn, aktiv);   // Server hat abgelehnt -> zurückrollen
                    if (r.json && r.json.error) console.warn('Favorit:', r.json.error);
                }
            })
            .catch(function () { setzeBtn(btn, aktiv); });
    });

    function setzeBtn(btn, aktiv) {
        btn.setAttribute('data-aktiv', aktiv ? '1' : '0');
        btn.setAttribute('aria-pressed', aktiv ? 'true' : 'false');
        btn.setAttribute('title', aktiv ? 'Favorit entfernen' : 'Als Favorit merken');
        btn.classList.toggle('is-fav', !!aktiv);
        var ico = btn.querySelector('.fav-ico');
        if (ico) ico.setAttribute('fill', aktiv ? 'currentColor' : 'none');
        var lbl = btn.querySelector('.fav-label');
        if (lbl) lbl.textContent = aktiv ? 'Gemerkt' : 'Merken';
    }

    function entferneFavoritZeile(btn, istFavorit) {
        var item = btn.closest('[data-fav-item]');
        if (!item) return;            // keine ausblendbare Zeile -> nur optisch umschalten
        var card = btn.closest('[data-fav-card]') || document.getElementById('favoritenCard');
        // Offen-Seite: Zeile verschwindet beim Merken (favorit=1).
        // Gemerkt-Seite / Startseite: Zeile verschwindet beim Entfernen (favorit=0).
        var view = card && card.getAttribute('data-fav-view');
        var entfernenBeiFavorit = (view === 'offen');
        if (istFavorit !== entfernenBeiFavorit) return;
        item.remove();
        // Auf der Offen-Seite bleibt die Sektion samt Überschrift stehen —
        // dort wird nur die einzelne Zeile entfernt. Auf der Gemerkt-Seite
        // und Startseite räumen wir die leere Sektion ganz ein.
        if (view === 'offen') return;
        if (card && !card.querySelectorAll('[data-fav-item]').length) {
            card.style.transition = 'opacity 0.2s ease';
            card.style.opacity = '0';
            setTimeout(function () { card.remove(); }, 180);
        }
    }
})();
</script>