{include file="_partials/head.tpl"}
<link rel="stylesheet" href="/public/assets/account/account.css">

<div class="acc-container">
  <nav class="acc-breadcrumbs" aria-label="Навигация"><a href="/">Главная</a> <span>/</span> <a href="/account">Кабинет</a> <span>/</span> <span>Избранное</span></nav>

  <div class="acc-layout">
    {include file="account/_nav.tpl"}

    <main class="acc-main">
      {include file="account/_flash.tpl"}

      <header class="acc-head">
        <h1 class="acc-head__title">Избранное</h1>
        <p class="acc-head__sub">Сохранённые товары на этом устройстве.</p>
      </header>

      <div class="acc-fav__grid" data-acc-fav-grid></div>
      <div class="acc-empty" data-acc-fav-empty hidden>
        <p>В избранном пока пусто.</p>
        <a class="acc-btn acc-btn--primary" href="/shop">Перейти в каталог</a>
      </div>
    </main>
  </div>
</div>

<script>
(function () {
  var grid = document.querySelector('[data-acc-fav-grid]');
  var empty = document.querySelector('[data-acc-fav-empty]');
  if (!grid) return;

  function readIds() {
    var arr = [];
    try { arr = JSON.parse(localStorage.getItem('celena_shop_favorites') || '[]'); } catch (e) { arr = []; }
    if (!Array.isArray(arr)) arr = [];
    return arr.map(String).filter(Boolean);
  }
  function esc(s) { return String(s == null ? '' : s).replace(/[&<>"]/g, function (c) {
    return c === '&' ? '&amp;' : c === '<' ? '&lt;' : c === '>' ? '&gt;' : '&quot;';
  }); }

  var ids = readIds();
  if (!ids.length) { if (empty) empty.hidden = false; return; }

  fetch('/account/favorites/items?ids=' + ids.join(','), { credentials: 'same-origin' })
    .then(function (r) { return r.json(); })
    .then(function (items) {
      if (!items || !items.length) { if (empty) empty.hidden = false; return; }
      items.forEach(function (p) {
        var card = document.createElement('div');
        card.className = 'acc-fav__card';
        card.innerHTML =
          '<a class="acc-fav__img" href="' + esc(p.url) + '">' +
            (p.cover ? '<img src="' + esc(p.cover) + '" alt="" loading="lazy">' : '<span class="acc-fav__noimg"></span>') +
          '</a>' +
          '<a class="acc-fav__title" href="' + esc(p.url) + '">' + esc(p.title) + '</a>' +
          '<div class="acc-fav__price">' + esc(p.price_fmt) + '</div>' +
          '<button type="button" class="acc-fav__del" data-id="' + esc(p.id) + '" aria-label="Убрать из избранного">&times;</button>';
        grid.appendChild(card);
      });
    })
    .catch(function () { if (empty) empty.hidden = false; });

  grid.addEventListener('click', function (e) {
    var btn = e.target.closest('.acc-fav__del');
    if (!btn) return;
    var id = String(btn.getAttribute('data-id'));
    var arr = readIds().filter(function (x) { return String(x) !== id; });
    localStorage.setItem('celena_shop_favorites', JSON.stringify(arr));
    var card = btn.closest('.acc-fav__card');
    if (card) card.parentNode.removeChild(card);
    if (!grid.children.length && empty) empty.hidden = false;
  });
})();
</script>

{include file="_partials/foot.tpl"}
