templates/catalog.html.twig line 1

Open in your IDE?
  1. {% extends 'base.html.twig' %}
  3. {% block title %}Каталог — PlayPapa{% endblock %}
  4. {% block body_class %}preloader-active catalog-page{% endblock %}
  6. {% block head_scripts %}
  7.     <script>
  8.       window.__preloaderStart = performance.now();
  9.       try {
  10.         if ("scrollRestoration" in history) history.scrollRestoration = "manual";
  11.         if (!window.location.hash || window.location.hash === "#") {
  12.           window.addEventListener("load", () => requestAnimationFrame(() => window.scrollTo(0, 0)), { once: true });
  13.         }
  14.       } catch {}
  15.     </script>
  16.     <script>
  17.       window.playpapaCatalog = {{ catalog_payload_json|default('{"products":[],"total":0}')|raw }};
  18.       window.playpapaCatalogState = {
  19.         category: "{{ catalog_active_category|default('all')|e('js') }}",
  20.         query: "{{ catalog_query|default('')|e('js') }}",
  21.         sort: "{{ catalog_active_sort|default('popular')|e('js') }}"
  22.       };
  23.     </script>
  24.     <script>
  25.       tailwind = {
  26.         config: {
  27.           theme: {
  28.             extend: {
  29.               colors: {
  30.                 papa: "#268bf3",
  31.                 ink: "#202838",
  32.                 soft: "#f2f4f8",
  33.               },
  34.             },
  35.           },
  36.         },
  37.       };
  38.     </script>
  39.     <script src="https://cdn.tailwindcss.com" defer></script>
  40. {% endblock %}
  42. {% block stylesheets %}
  43.       <link rel="stylesheet" href="/catalog.css" />
  44. {% endblock %}
  46. {% block body_start %}
  47. <div class="page-preloader" id="pagePreloader" role="status" aria-label="Загрузка">
  48.       <div class="preloader-inner">
  49.         <div class="preloader-dots" aria-hidden="true">
  50.           <span></span>
  51.           <span></span>
  52.           <span></span>
  53.         </div>
  54.         <div class="preloader-text">Загрузка...</div>
  55.       </div>
  56.     </div>
  57. {% endblock %}
  59. {% block content %}
  60. <section class="shell catalog-official" aria-labelledby="catalogOfficialTitle">
  61.         <div class="catalog-official-head">
  62.           <span class="catalog-shield" aria-hidden="true">
  63.             <svg viewBox="0 0 24 24" fill="none">
  64.               <path d="M12 3.2 19 6v5.4c0 4.4-2.8 7.9-7 9.4-4.2-1.5-7-5-7-9.4V6l7-2.8Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round" />
  65.               <path d="m9.3 12.1 1.8 1.8 3.9-4.1" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
  66.             </svg>
  67.           </span>
  68.           <h1 id="catalogOfficialTitle">Официально от PlayPapa</h1>
  69.           <div class="catalog-official-actions" aria-label="Навигация по подборке">
  70.             <button class="catalog-official-arrow" type="button" data-official-scroll="prev" aria-label="Предыдущие товары">
  71.               <img class="catalog-arrow-icon catalog-arrow-left" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" />
  72.             </button>
  73.             <button class="catalog-official-arrow" type="button" data-official-scroll="next" aria-label="Следующие товары">
  74.               <img class="catalog-arrow-icon catalog-arrow-right" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" />
  75.             </button>
  76.           </div>
  77.         </div>
  78.         <div class="product-grid catalog-feature-grid" data-products="catalog-featured" data-count="10"></div>
  79.       </section>
  81.       <section class="shell catalog-page-layout" aria-label="Каталог товаров">
  82.         <aside class="catalog-filter-panel" id="catalogFilterPanel" aria-label="Фильтры каталога">
  83.           <div class="catalog-filter-head">
  84.             <img src="./assets/filter-candle.svg" alt="" />
  85.             <b>Фильтр</b>
  86.             <button class="catalog-mobile-filter-close" type="button" aria-label="Закрыть фильтр">
  87.               <svg viewBox="0 0 16 16" fill="none" aria-hidden="true">
  88.                 <path d="m4 4 8 8M12 4l-8 8" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" />
  89.               </svg>
  90.             </button>
  91.           </div>
  93.           <section class="filter-group" hidden aria-hidden="true">
  94.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Способ получения <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  95.             <div class="filter-group-body">
  96.               <label class="filter-check"><input type="checkbox" /> <span>Без входа в аккаунт</span></label>
  97.               <label class="filter-check"><input type="checkbox" /> <span>Со входом в аккаунт</span></label>
  98.               <label class="filter-check"><input type="checkbox" /> <span>Аккаунт с лицензией</span></label>
  99.             </div>
  100.           </section>
  102.           <section class="filter-group">
  103.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Тип <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  104.             <div class="filter-group-body">
  105.               {% for typeFilter in catalog_type_filters|default([]) %}
  106.                 <label class="filter-check"><input type="checkbox" value="{{ typeFilter.id }}" data-filter-type="type" /> <span>{{ typeFilter.label }}</span></label>
  107.               {% endfor %}
  108.             </div>
  109.           </section>
  111.           <section class="filter-group">
  112.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Жанр <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  113.             <div class="filter-group-body">
  114.               {% for genreFilter in catalog_genre_filters|default([]) %}
  115.                 <label class="filter-check"><input type="checkbox" value="{{ genreFilter.id }}" data-filter-type="genre" /> <span>{{ genreFilter.label }}</span></label>
  116.               {% endfor %}
  117.             </div>
  118.           </section>
  120.           <section class="filter-group filter-price-group" data-price-filter data-min-price="1" data-max-price="10000" data-price-step="100">
  121.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Цена <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  122.             <div class="filter-group-body">
  123.               <div class="filter-price-row">
  124.                 <label><span>от</span><input type="text" inputmode="numeric" value="1" data-price-min-input /><b>₽</b></label>
  125.                 <label><span>до</span><input type="text" inputmode="numeric" value="10000" data-price-max-input /><b>₽</b></label>
  126.               </div>
  127.               <div class="filter-range">
  128.                 <span></span>
  129.                 <i></i>
  130.                 <b></b>
  131.               </div>
  132.               <div class="filter-range-labels"><span>1</span><span>10000</span></div>
  133.             </div>
  134.           </section>
  136.           <section class="filter-group" hidden aria-hidden="true">
  137.             <h2><button class="filter-group-toggle" type="button" aria-expanded="true">Сервисы <img class="catalog-arrow-icon" src="./assets/catalog-arrow.svg" alt="" aria-hidden="true" /></button></h2>
  138.             <div class="filter-group-body">
  139.               <label class="filter-check"><input type="checkbox" /> <span>Steam</span></label>
  140.               <label class="filter-check"><input type="checkbox" /> <span>xBox</span></label>
  141.             </div>
  142.           </section>
  144.           <div class="filter-actions">
  145.             <button class="filter-apply" type="button">Применить <span hidden>0</span></button>
  146.             <button class="filter-reset" type="button">Сбросить</button>
  147.           </div>
  148.         </aside>
  150.         <section class="catalog-results" aria-label="Список товаров">
  151.           <div class="catalog-controls">
  152.             <nav class="catalog-category-tabs" aria-label="Категории товаров">
  153.               {% for categoryFilter in catalog_category_filters|default([]) %}
  154.                 <a
  155.                   class="chip {{ categoryFilter.active ? 'is-active' : '' }}"
  156.                   href="{{ categoryFilter.url }}"
  157.                   data-catalog-category="{{ categoryFilter.id }}"
  158.                   aria-current="{{ categoryFilter.active ? 'true' : 'false' }}"
  159.                 >
  160.                   <img src="./assets/{{ categoryFilter.icon }}" alt="" />{{ categoryFilter.label }}
  161.                 </a>
  162.               {% endfor %}
  163.             </nav>
  165.             <div class="catalog-toolbar">
  166.               <label class="catalog-search">
  167.                 <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  168.                   <path d="m21 21-4.35-4.35m2.35-5.65a8 8 0 1 1-16 0 8 8 0 0 1 16 0Z" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" />
  169.                 </svg>
  170.                 <input type="search" placeholder="Поиск по названию" value="{{ catalog_query|default('') }}" data-catalog-search />
  171.               </label>
  172.               <button class="catalog-pill catalog-pill-green" type="button"><img src="./assets/catalog-sale.svg" alt="" />Скидка</button>
  173.               <button class="catalog-pill catalog-pill-orange" type="button"><img src="./assets/catalog-flash.svg" alt="" />Хит продаж</button>
  174.               <button class="catalog-pill catalog-pill-blue" type="button"><img src="./assets/catalog-reviews.svg" alt="" />Лучшие отзывы</button>
  175.             </div>
  176.           </div>
  178.           <div class="catalog-mobile-filterbar" aria-label="Фильтры и сортировка">
  179.             <div class="catalog-mobile-filter-row">
  180.               <button class="catalog-mobile-filter-btn" type="button" aria-expanded="false" aria-controls="catalogFilterPanel">
  181.                 <img src="./assets/filter-candle.svg" alt="" />
  182.                 <span>Фильтр</span>
  183.                 <b {{ catalog_active_category|default('all') == 'all' ? 'hidden' : '' }}>{{ catalog_active_category|default('all') == 'all' ? '0' : '1' }}</b>
  184.               </button>
  185.               <button class="catalog-mobile-sort" type="button" aria-expanded="false" aria-controls="catalogMobileSortPanel">
  186.                 <img class="catalog-sort-direction-icon" src="./assets/sort-arrow-3.svg" alt="" aria-hidden="true" />
  187.                 <span class="catalog-mobile-sort-label">Популярные</span>
  188.               </button>
  189.             </div>
  190.             <div class="catalog-mobile-tags" aria-label="Активные фильтры">
  191.               {% if catalog_active_category|default('all') == 'all' %}
  192.                 <button type="button" disabled>Все товары</button>
  193.               {% else %}
  194.                 {% set activeCategoryLabel = 'Категория' %}
  195.                 {% for categoryFilter in catalog_category_filters|default([]) %}
  196.                   {% if categoryFilter.id == catalog_active_category|default('all') %}
  197.                     {% set activeCategoryLabel = categoryFilter.label %}
  198.                   {% endif %}
  199.                 {% endfor %}
  200.                 <a href="{{ path('catalog', catalog_query|default('') ? {'q': catalog_query} : {}) }}">{{ activeCategoryLabel }} <span aria-hidden="true">×</span></a>
  201.                 <a href="{{ path('catalog') }}">Сбросить</a>
  202.               {% endif %}
  203.             </div>
  204.             <div class="catalog-mobile-sort-panel" id="catalogMobileSortPanel" aria-hidden="true" inert>
  205.               <button class="is-selected" type="button" data-sort-value="popular" data-sort-label="Популярные">Популярные <span aria-hidden="true">✓</span></button>
  206.               <button type="button" data-sort-value="price_asc" data-sort-label="Сначала дешёвые">Сначала дешёвые <span aria-hidden="true">✓</span></button>
  207.               <button type="button" data-sort-value="price_desc" data-sort-label="Сначала дорогие">Сначала дорогие <span aria-hidden="true">✓</span></button>
  208.               <button type="button" data-sort-value="new" data-sort-label="Сначала новинки">Сначала новинки <span aria-hidden="true">✓</span></button>
  209.               <button type="button" data-sort-value="rating" data-sort-label="По рейтингу">По рейтингу <span aria-hidden="true">✓</span></button>
  210.             </div>
  211.           </div>
  213.           <div class="catalog-meta-row">
  214.             <p class="catalog-total">Всего {{ catalog_total|default(catalog_products|default([])|length) }} товаров</p>
  215.             <div class="catalog-sort-row">
  216.               <button class="catalog-sort-icon" type="button" aria-label="Сортировать по цене">
  217.                 <img class="catalog-sort-direction-icon" src="./assets/sort-arrow-3.svg" alt="" aria-hidden="true" />
  218.               </button>
  219.               <button class="catalog-sort-icon" type="button" aria-label="Фильтр сортировки">
  220.                 <svg viewBox="0 0 20 20" fill="none" aria-hidden="true">
  221.                   <path d="M4 5h12M6 10h10M9 15h7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" />
  222.                 </svg>
  223.               </button>
  224.               <button class="catalog-sort" type="button">Популярные</button>
  225.             </div>
  226.           </div>
  228.           <div class="product-grid catalog-product-grid catalog-product-grid-primary" data-products="catalog-results-grid-primary" data-count="12"></div>
  230.           <section class="topup-row catalog-topup-row" aria-label="Пополнение Steam">
  231.             <div class="topup-info">
  232.               <img src="./assets/steam-topup.png" alt="" />
  233.               <div>
  234.                 <div class="topup-title">
  235.                   Пополнение Steam
  236.                   <span>5%</span>
  237.                 </div>
  238.                 <button class="promo-small" type="button" aria-expanded="false" aria-controls="topupPromoSection">
  239.                   <span class="promo-small-label">Ввести промокод</span>
  240.                   <svg viewBox="0 0 16 16" fill="none"><path d="m4 6 4 4 4-4" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" /></svg>
  241.                 </button>
  242.               </div>
  243.             </div>
  245.             <label class="form-field login-field">
  246.               <img src="./assets/profile-gray.svg" alt="" />
  247.               <input type="text" name="steam-login" placeholder="Логин Steam" />
  248.               <span class="field-info" aria-hidden="true"><img src="./assets/info-i.svg" alt="" /></span>
  249.             </label>
  251.             <div class="form-field amount-field">
  252.               <div class="amount-field-shell">
  253.                 <span class="currency-mark" aria-hidden="true">
  254.                   <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none">
  255.                     <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  256.                   </svg>
  257.                 </span>
  258.                 <label class="amount-control">
  259.                   <small>Сумма</small>
  260.                   <span class="amount-value">
  261.                     <input type="text" name="amount" inputmode="numeric" value="500" maxlength="6" aria-label="Сумма" aria-expanded="false" aria-controls="topupQuickPopover" />
  262.                     <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none" aria-hidden="true">
  263.                       <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  264.                     </svg>
  265.                   </span>
  266.                 </label>
  267.                 <span class="currency-tabs" role="group" aria-label="Валюта">
  268.                   <button type="button" aria-label="Доллар">
  269.                     <svg class="currency-svg currency-svg-dollar" viewBox="0 0 10 16" fill="none" aria-hidden="true">
  270.                       <path d="M4.56073 13.3121C3.66473 13.3121 2.80607 13.1948 1.98473 12.9601C1.1634 12.7148 0.502068 12.4001 0.000734389 12.0161L0.880734 10.0641C1.36073 10.4055 1.92607 10.6881 2.57673 10.9121C3.23807 11.1255 3.90473 11.2321 4.57673 11.2321C5.08873 11.2321 5.4994 11.1841 5.80873 11.0881C6.12873 10.9815 6.3634 10.8375 6.51273 10.6561C6.66207 10.4748 6.73673 10.2668 6.73673 10.0321C6.73673 9.73345 6.6194 9.49878 6.38473 9.32812C6.15007 9.14678 5.84073 9.00278 5.45673 8.89612C5.07273 8.77878 4.64607 8.67212 4.17673 8.57612C3.71807 8.46945 3.25407 8.34145 2.78473 8.19212C2.32607 8.04278 1.90473 7.85078 1.52073 7.61612C1.13673 7.38145 0.822068 7.07212 0.576734 6.68812C0.342068 6.30412 0.224734 5.81345 0.224734 5.21612C0.224734 4.57612 0.395401 3.99478 0.736734 3.47212C1.08873 2.93878 1.6114 2.51745 2.30473 2.20812C3.00873 1.88812 3.88873 1.72812 4.94473 1.72812C5.64873 1.72812 6.34207 1.81345 7.02473 1.98412C7.7074 2.14412 8.31007 2.38945 8.83274 2.72012L8.03273 4.68812C7.51007 4.38945 6.9874 4.17078 6.46473 4.03212C5.94207 3.88278 5.43007 3.80812 4.92873 3.80812C4.4274 3.80812 4.01673 3.86678 3.69673 3.98412C3.37673 4.10145 3.1474 4.25612 3.00873 4.44812C2.87007 4.62945 2.80073 4.84278 2.80073 5.08812C2.80073 5.37612 2.91807 5.61078 3.15273 5.79212C3.3874 5.96278 3.69673 6.10145 4.08073 6.20812C4.46473 6.31478 4.88607 6.42145 5.34473 6.52812C5.81407 6.63478 6.27807 6.75745 6.73673 6.89612C7.20607 7.03478 7.63273 7.22145 8.01674 7.45612C8.40073 7.69078 8.71007 8.00012 8.94473 8.38412C9.19007 8.76812 9.31273 9.25345 9.31273 9.84012C9.31273 10.4695 9.13673 11.0455 8.78473 11.5681C8.43273 12.0908 7.90473 12.5121 7.20073 12.8321C6.5074 13.1521 5.6274 13.3121 4.56073 13.3121ZM3.95273 15.0401V0.000116348H5.55273V15.0401H3.95273Z" fill="currentColor" />
  271.                     </svg>
  272.                   </button>
  273.                   <button type="button" aria-label="Тенге">
  274.                     <svg class="currency-svg currency-svg-tenge" viewBox="0 0 10 12" fill="none" aria-hidden="true">
  275.                       <path d="M3.56819 11.2002V3.61619H0.000187516V2.27219H9.74419V3.61619H6.16019V11.2002H3.56819ZM0.000187516 1.34419V0.00019455H9.74419V1.34419H0.000187516Z" fill="currentColor" />
  276.                     </svg>
  277.                   </button>
  278.                   <button class="is-active" type="button" aria-label="Рубль">
  279.                     <svg class="currency-svg currency-svg-ruble" viewBox="0 0 12 12" fill="none" aria-hidden="true">
  280.                       <path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" />
  281.                     </svg>
  282.                   </button>
  283.                 </span>
  284.               </div>
  285.               <div class="topup-quick-popover" id="topupQuickPopover" aria-hidden="true" inert>
  286.                 <span class="topup-quick-popover-label">Быстрый выбор суммы</span>
  287.                 <div class="topup-quick-popover-buttons" aria-label="Быстрый выбор суммы">
  288.                   <button class="is-active" type="button" data-quick-amount="500">500 ₽</button>
  289.                   <button type="button" data-quick-amount="1000">1 000 ₽</button>
  290.                   <button type="button" data-quick-amount="2500">2 500 ₽</button>
  291.                   <button type="button" data-quick-amount="5000">5 000 ₽</button>
  292.                 </div>
  293.               </div>
  294.             </div>
  296.             <button class="pay-btn" type="button" aria-expanded="false" aria-controls="topupPaymentSection">Оплатить 500<svg class="currency-svg currency-svg-ruble pay-currency-icon" viewBox="0 0 12 12" fill="none" aria-hidden="true"><path d="M1.55153 11.2002V0.00019455H6.39953C7.89287 0.00019455 9.07687 0.314861 9.95153 0.944195C10.8262 1.57353 11.2635 2.51753 11.2635 3.7762C11.2635 5.0242 10.8262 5.96286 9.95153 6.5922C9.07687 7.22153 7.89287 7.5362 6.39953 7.5362H2.99153L4.15953 6.38419V11.2002H1.55153ZM-0.000468731 9.7602V8.4322H7.61553V9.7602H-0.000468731ZM4.15953 6.6562L2.99153 5.5042H6.38353C7.0982 5.5042 7.65287 5.3602 8.04753 5.0722C8.4422 4.77353 8.63953 4.34686 8.63953 3.79219C8.63953 3.2482 8.4422 2.8322 8.04753 2.5442C7.65287 2.2562 7.0982 2.1122 6.38353 2.1122H2.99153L4.15953 0.880195V6.6562Z" fill="currentColor" /></svg></button>
  298.             <div class="topup-expand" id="topupDetails" aria-hidden="true" inert>
  299.               <div class="topup-expand-clip">
  300.                 <div class="topup-expand-content">
  301.                   <section class="topup-expand-section topup-promo-section" id="topupPromoSection" aria-hidden="true" inert>
  302.                     <div class="topup-expand-section-inner">
  303.                       <label class="topup-detail-label" for="topupPromoInput">Промокод</label>
  304.                       <div class="topup-promo-row">
  305.                         <label class="topup-promo-input">
  306.                           <svg viewBox="0 0 24 24" fill="none" aria-hidden="true">
  307.                             <path d="M4 10h16v10H4V10Zm0-4h16v4H4V6Zm8 0v14M12 6c-1.7-3.1-5.2-2.8-5.2-.5C6.8 7.2 9 7.5 12 6Zm0 0c1.7-3.1 5.2-2.8 5.2-.5C17.2 7.2 15 7.5 12 6Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round" />
  308.                           </svg>
  309.                           <input id="topupPromoInput" type="text" placeholder="Введите промокод" autocomplete="off" />
  310.                         </label>
  311.                         <button class="topup-promo-apply" type="button">Применить</button>
  312.                       </div>
  313.                     </div>
  314.                   </section>
  316.                   <div class="topup-promo-benefit" aria-live="polite" aria-hidden="true">
  317.                     <img src="./assets/discount-percent.png" alt="" />
  318.                     <strong>Скидка <span>5%</span> - вы экономите <b data-promo-saving>25 ₽</b></strong>
  319.                     <small><span>Вы платите примерно на 12% меньше,</span><span>чем на других площадках</span></small>
  320.                   </div>
  322.                   <section class="topup-expand-section topup-payment-section" id="topupPaymentSection" aria-hidden="true" inert>
  323.                     <div class="topup-expand-section-inner">
  324.                       <h3 class="topup-detail-label topup-payment-title">Способ оплаты</h3>
  325.                       <div class="topup-payment-methods" role="radiogroup" aria-label="Способ оплаты">
  326.                         <button class="topup-payment-method is-selected" type="button" role="radio" aria-checked="true" data-fee="0">
  327.                           <span class="topup-payment-icon"><img src="./assets/payment-sbp.svg" alt="" /></span>
  328.                           <span class="topup-payment-copy"><b>СБП</b><small>Без комиссии</small></span>
  329.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  330.                         </button>
  331.                         <button class="topup-payment-method" type="button" role="radio" aria-checked="false" data-fee="2">
  332.                           <span class="topup-payment-icon"><img src="./assets/payment-mir-option.svg" alt="" /></span>
  333.                           <span class="topup-payment-copy"><b>Карта МИР</b><small>+2% комиссия</small></span>
  334.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  335.                         </button>
  336.                         <button class="topup-payment-method" type="button" role="radio" aria-checked="false" data-fee="0">
  337.                           <span class="topup-payment-icon"><img src="./assets/payment-btc.svg" alt="" /></span>
  338.                           <span class="topup-payment-copy"><b>Криптовалюта</b><small>Без комиссии</small></span>
  339.                           <span class="topup-payment-check" aria-hidden="true"><svg viewBox="0 0 20 20" fill="none"><path d="m5 10 3 3 7-7" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" /></svg></span>
  340.                         </button>
  341.                       </div>
  343.                       <div class="topup-total-row">
  344.                         <div class="topup-total-copy">
  345.                           <small>К зачислению на Steam</small>
  346.                           <span><strong data-topup-credit>500 ₽</strong><b data-topup-fee-badge>Без комиссии</b></span>
  347.                         </div>
  348.                         <button class="topup-final-pay" type="button">Оплатить 500₽</button>
  349.                       </div>
  350.                     </div>
  351.                   </section>
  352.                 </div>
  353.               </div>
  354.             </div>
  355.           </section>
  357.           <div class="product-grid catalog-product-grid catalog-product-grid-secondary" data-products="catalog-results-grid-secondary" data-count="8"></div>
  359.           <div class="catalog-loader" role="status">
  360.             <div class="catalog-loader-dots" aria-hidden="true"><span></span><span></span><span></span></div>
  361.             <strong>Подгружаем ещё товары...</strong>
  362.           </div>
  363.         </section>
  364.       </section>
  365. {% endblock %}
  367. {% block body_extras %}
  368. {% include 'components/mobile_search.html.twig' %}
  370. <div data-mobile-panel></div>
  371. {% endblock %}
  373. {% block scripts %}
  374. <script src="/assets/mobile-panel.js"></script>
  376.     <script>
  377.       const root = document.documentElement;
  378.       const themeSwitch = document.querySelector(".theme-switch");
  379.       const themeButtons = document.querySelectorAll(".theme-btn[data-theme]");
  381.       const preloader = document.getElementById("pagePreloader");
  382.       if (preloader) {
  383.         const preloaderStart = window.__preloaderStart || performance.now();
  384.         const minPreloaderTime = 600;
  385.         const maxPreloaderTime = 3000;
  386.         let preloaderHidden = false;
  388.         const hidePreloader = () => {
  389.           if (preloaderHidden) return;
  390.           preloaderHidden = true;
  391.           preloader.classList.add("is-hiding");
  392.           document.body.classList.remove("preloader-active");
  393.           window.setTimeout(() => preloader.remove(), 260);
  394.         };
  396.         const requestPreloaderHide = () => {
  397.           const elapsed = performance.now() - preloaderStart;
  398.           window.setTimeout(hidePreloader, Math.max(minPreloaderTime - elapsed, 0));
  399.         };
  401.         window.setTimeout(hidePreloader, Math.max(maxPreloaderTime - (performance.now() - preloaderStart), 0));
  403.         if (document.readyState === "complete") {
  404.           requestPreloaderHide();
  405.         } else {
  406.           window.addEventListener("load", requestPreloaderHide, { once: true });
  407.         }
  408.       }
  410.       const setTheme = (theme, animate = false) => {
  411.         if (animate) {
  412.           document.body.classList.remove("theme-animating");
  413.           void document.body.offsetWidth;
  414.           document.body.classList.add("theme-animating");
  415.         }
  417.         root.dataset.theme = theme;
  418.         try {
  419.           localStorage.setItem("playpapa-theme", theme);
  420.         } catch {}
  422.         themeButtons.forEach((button) => {
  423.           const active = button.dataset.theme === theme;
  424.           button.classList.toggle("is-active", active);
  425.           button.setAttribute("aria-pressed", active ? "true" : "false");
  426.         });
  428.         if (animate) window.setTimeout(() => document.body.classList.remove("theme-animating"), 560);
  429.       };
  431.       setTheme(root.dataset.theme === "dark" ? "dark" : "light");
  432.       themeButtons.forEach((button) => {
  433.         button.addEventListener("click", () => setTheme(button.dataset.theme, true));
  434.       });
  435.       themeSwitch?.addEventListener("click", (event) => {
  436.         if (event.target.closest(".theme-btn")) return;
  437.         setTheme(root.dataset.theme === "dark" ? "light" : "dark", true);
  438.       });
  440.       const mobileSearchLayer = document.getElementById("mobileSearch");
  441.       const mobileSearchTrigger = document.querySelector("[data-mobile-search-trigger]");
  442.       const mobileSearchBack = document.getElementById("mobileSearchBack");
  444.       const setMobileSearchOpen = (open) => {
  445.         if (!mobileSearchLayer) return;
  446.         mobileSearchLayer.classList.toggle("is-open", open);
  447.         mobileSearchLayer.setAttribute("aria-hidden", open ? "false" : "true");
  448.         mobileSearchLayer.toggleAttribute("inert", !open);
  449.         mobileSearchTrigger?.setAttribute("aria-expanded", open ? "true" : "false");
  450.         document.body.classList.toggle("mobile-search-open", open);
  451.         if (open) mobileSearchLayer.scrollTop = 0;
  452.       };
  454.       mobileSearchTrigger?.addEventListener("click", (event) => {
  455.         event.preventDefault();
  456.         setProfileOpen(false);
  457.         setCatalogOpen(false);
  458.         setMobileSearchOpen(true);
  459.       });
  461.       mobileSearchBack?.addEventListener("click", () => {
  462.         setMobileSearchOpen(false);
  463.         mobileSearchTrigger?.focus();
  464.       });
  466.       mobileSearchLayer?.querySelector(".mobile-search-form")?.addEventListener("submit", (event) => event.preventDefault());
  467.       mobileSearchLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  468.         link.addEventListener("click", (event) => event.preventDefault());
  469.       });
  471.       document.addEventListener("keydown", (event) => {
  472.         if (event.key !== "Escape" || !mobileSearchLayer?.classList.contains("is-open")) return;
  473.         setMobileSearchOpen(false);
  474.         mobileSearchTrigger?.focus();
  475.       });
  477.       const profileMenu = document.querySelector(".profile-menu");
  478.       const profileButton = profileMenu?.querySelector(".profile-btn");
  479.       const profilePopover = document.getElementById("profilePopover");
  481.       const setProfileOpen = (open, returnFocus = false) => {
  482.         if (!profileMenu || !profilePopover || !profileButton) return;
  483.         profileMenu.classList.toggle("is-open", open);
  484.         profileButton.setAttribute("aria-expanded", open ? "true" : "false");
  485.         profilePopover.setAttribute("aria-hidden", open ? "false" : "true");
  486.         profilePopover.toggleAttribute("inert", !open);
  487.         document.body.classList.toggle("profile-open", open);
  488.         if (returnFocus) profileButton.focus();
  489.       };
  491.       profileButton?.addEventListener("click", (event) => {
  492.         event.stopPropagation();
  493.         const shouldOpen = !profileMenu?.classList.contains("is-open");
  494.         setProfileOpen(shouldOpen);
  495.       });
  497.       profilePopover?.querySelectorAll(".profile-menu-item:not(:disabled)").forEach((item) => {
  498.         item.addEventListener("click", () => setProfileOpen(false));
  499.       });
  501.       document.addEventListener("pointerdown", (event) => {
  502.         if (!profileMenu?.classList.contains("is-open") || profileMenu.contains(event.target)) return;
  503.         setProfileOpen(false);
  504.       });
  506.       document.addEventListener("keydown", (event) => {
  507.         if (event.key !== "Escape" || !profileMenu?.classList.contains("is-open")) return;
  508.         setProfileOpen(false, true);
  509.       });
  511.       const catalogLayer = document.getElementById("catalogMegaMenu");
  512.       const catalogButton = document.querySelector(".catalog-btn:not([href])");
  513.       const catalogTriggers = [catalogButton, ...document.querySelectorAll("[data-catalog-trigger]")].filter(Boolean);
  514.       const catalogSideLinks = document.querySelectorAll(".catalog-side-link");
  515.       const catalogFeaturedItems = [
  516.         ["service-steam.png", "Пополнение Steam"],
  517.         ["service-brawl.png", "Game Pass"],
  518.         ["service-steam.png", "Пополнение PSN"],
  519.         ["service-brawl.png", "PS Plus"],
  520.         ["service-pubg.png", "Grand Theft Auto V"],
  521.         ["service-roblox.png", "Minecraft"],
  522.         ["service-playstation.png", "Diablo 4"],
  523.         ["service-mobile.png", "ARC Raiders"],
  524.         ["service-chatgpt.png", "Dead by Daylight"],
  525.       ];
  526.       const catalogNewItems = [
  527.         ["article-paradise.png", "Gothic 1 Remake"],
  528.         ["article-sale.png", "Forza Horizon 6"],
  529.         ["product-pubg.png", "Assassin's Creed: Black..."],
  530.         ["article-mobile.png", "007 First Light"],
  531.         ["article-sale.png", "Call of Duty: Modern..."],
  532.         ["product-pubg.png", "Marvel's Wolverine"],
  533.         ["article-paradise.png", "UFC 6"],
  534.         ["article-sale.png", "Subnautica 2"],
  535.         ["product-pubg.png", "SILENT HILL: Townfall"],
  536.       ];
  538.       const catalogItemMarkup = ([image, label]) => `
  539.         <a class="catalog-showcase-item" href="#" aria-label="${label}">
  540.           <img src="./assets/${image}" alt="">
  541.           <span>${label}</span>
  542.         </a>
  543.       `;
  545.       const catalogFeatured = document.getElementById("catalogFeatured");
  546.       const catalogNew = document.getElementById("catalogNew");
  547.       if (catalogFeatured) catalogFeatured.innerHTML = catalogFeaturedItems.map(catalogItemMarkup).join("");
  548.       if (catalogNew) catalogNew.innerHTML = catalogNewItems.map(catalogItemMarkup).join("");
  550.       const setCatalogOpen = (open) => {
  551.         if (!catalogLayer) return;
  552.         catalogLayer.classList.toggle("is-open", open);
  553.         catalogLayer.setAttribute("aria-hidden", open ? "false" : "true");
  554.         catalogLayer.toggleAttribute("inert", !open);
  555.         document.body.classList.toggle("catalog-open", open);
  556.         catalogTriggers.forEach((trigger) => trigger.setAttribute("aria-expanded", open ? "true" : "false"));
  557.       };
  559.       catalogTriggers.forEach((trigger) => {
  560.         trigger.addEventListener("click", (event) => {
  561.           event.preventDefault();
  562.           setProfileOpen(false);
  563.           setMobileSearchOpen(false);
  564.           setCatalogOpen(!catalogLayer?.classList.contains("is-open"));
  565.         });
  566.       });
  568.       catalogSideLinks.forEach((link) => {
  569.         link.addEventListener("click", () => {
  570.           catalogSideLinks.forEach((item) => item.classList.toggle("is-active", item === link));
  571.         });
  572.       });
  574.       catalogLayer?.querySelectorAll('a[href="#"]').forEach((link) => {
  575.         link.addEventListener("click", (event) => event.preventDefault());
  576.       });
  578.       document.addEventListener("pointerdown", (event) => {
  579.         if (!catalogLayer?.classList.contains("is-open")) return;
  580.         if (catalogLayer.contains(event.target) || catalogTriggers.some((trigger) => trigger.contains(event.target))) return;
  581.         setCatalogOpen(false);
  582.       });
  584.       document.addEventListener("keydown", (event) => {
  585.         if (event.key !== "Escape" || !catalogLayer?.classList.contains("is-open")) return;
  586.         setCatalogOpen(false);
  587.         catalogButton?.focus();
  588.       });
  591.       const authModal = document.getElementById("authModal");
  592.       const authDialog = authModal?.querySelector(".auth-modal-dialog");
  593.       const authScreens = new Set(["login", "register", "recover", "success", "error"]);
  594.       let authReturnFocus = null;
  596.       const syncAuthScreenState = (screen = "login") => {
  597.         if (!authModal || !authScreens.has(screen)) return;
  598.         authModal.dataset.authScreen = screen;
  599.         authModal.querySelectorAll(".auth-tab").forEach((tab) => {
  600.           const active = tab.dataset.authScreenTarget === screen;
  601.           tab.setAttribute("aria-selected", active ? "true" : "false");
  602.           tab.tabIndex = active ? 0 : -1;
  603.         });
  604.         authModal.querySelectorAll(".auth-view").forEach((view) => {
  605.           const active = view.classList.contains(`auth-view-${screen}`);
  606.           view.setAttribute("aria-hidden", active ? "false" : "true");
  607.         });
  608.       };
  610.       const setAuthScreen = (screen = "login") => {
  611.         if (!authModal || !authScreens.has(screen)) return;
  612.         syncAuthScreenState(screen);
  613.       };
  615.       const setAuthOpen = (open, screen = "login", trigger = null) => {
  616.         if (!authModal) return;
  617.         if (open) {
  618.           authReturnFocus = trigger || document.activeElement;
  619.           setProfileOpen(false);
  620.           setCatalogOpen(false);
  621.           setMobileSearchOpen(false);
  622.           setAuthScreen(screen);
  623.         }
  624.         authModal.classList.toggle("is-open", open);
  625.         authModal.setAttribute("aria-hidden", open ? "false" : "true");
  626.         authModal.toggleAttribute("inert", !open);
  627.         document.body.classList.toggle("auth-modal-open", open);
  628.         if (open) {
  629.           window.setTimeout(() => authModal.querySelector("[data-auth-close]")?.focus(), 80);
  630.         } else if (authReturnFocus && typeof authReturnFocus.focus === "function") {
  631.           authReturnFocus.focus();
  632.           authReturnFocus = null;
  633.         }
  634.       };
  636.       document.querySelectorAll("[data-auth-open]").forEach((trigger) => {
  637.         trigger.addEventListener("click", (event) => {
  638.           event.preventDefault();
  639.           setAuthOpen(true, trigger.dataset.authOpen || "login", trigger);
  640.         });
  641.       });
  643.       authModal?.querySelectorAll("[data-auth-screen-target]").forEach((control) => {
  644.         control.addEventListener("click", () => setAuthScreen(control.dataset.authScreenTarget || "login"));
  645.       });
  647.       authModal?.querySelectorAll("[data-auth-close]").forEach((control) => {
  648.         control.addEventListener("click", () => setAuthOpen(false));
  649.       });
  651.       authModal?.addEventListener("pointerdown", (event) => {
  652.         if (event.target !== authModal || authDialog?.contains(event.target)) return;
  653.         setAuthOpen(false);
  654.       });
  656.       authModal?.querySelectorAll(".auth-form").forEach((form) => {
  657.         form.addEventListener("submit", (event) => {
  658.           event.preventDefault();
  659.           if (form.dataset.authForm === "recover") {
  660.             const email = form.querySelector('input[type="email"]')?.value.trim().toLowerCase() || "";
  661.             setAuthScreen(email.includes("error") || email.includes("fail") ? "error" : "success");
  662.           }
  663.         });
  664.       });
  666.       document.addEventListener("keydown", (event) => {
  667.         if (event.key !== "Escape" || !authModal?.classList.contains("is-open")) return;
  668.         setAuthOpen(false);
  669.       });
  671.       const initialAuthScreen = (() => {
  672.         const param = new URLSearchParams(window.location.search).get("auth");
  673.         const hash = window.location.hash.startsWith("#auth-") ? window.location.hash.replace("#auth-", "") : "";
  674.         return authScreens.has(param) ? param : authScreens.has(hash) ? hash : "";
  675.       })();
  676.       setAuthScreen("login");
  677.       if (initialAuthScreen) setAuthOpen(true, initialAuthScreen);
  679.       if (window.matchMedia("(pointer: coarse)").matches) {
  680.         let lastTouchEnd = 0;
  681.         const stopZoom = (event) => {
  682.           event.preventDefault();
  683.         };
  684.         const stopMultiTouch = (event) => {
  685.           if (event.touches && event.touches.length > 1) event.preventDefault();
  686.         };
  687.         document.addEventListener("gesturestart", stopZoom, { passive: false });
  688.         document.addEventListener("gesturechange", stopZoom, { passive: false });
  689.         document.addEventListener("gestureend", stopZoom, { passive: false });
  690.         document.addEventListener("touchstart", stopMultiTouch, { passive: false });
  691.         document.addEventListener("touchmove", stopMultiTouch, { passive: false });
  692.         document.addEventListener(
  693.           "touchend",
  694.           (event) => {
  695.             const now = Date.now();
  696.             if (now - lastTouchEnd < 320) event.preventDefault();
  697.             lastTouchEnd = now;
  698.           },
  699.           { passive: false }
  700.         );
  701.       }
  703.       const amountInput = document.querySelector('input[name="amount"]');
  704.       const amountField = document.querySelector(".amount-field");
  705.       const topupRow = document.querySelector(".topup-row");
  706.       const servicesCard = document.querySelector(".services-card") || topupRow;
  707.       const topupQuickPopover = document.getElementById("topupQuickPopover");
  708.       const payButton = document.querySelector(".pay-btn");
  709.       const payCurrencyIcon = payButton?.querySelector(".pay-currency-icon");
  710.       const promoToggleButton = document.querySelector(".promo-small");
  711.       const promoToggleLabel = promoToggleButton?.querySelector(".promo-small-label");
  712.       const topupDetails = document.getElementById("topupDetails");
  713.       const topupPromoSection = document.getElementById("topupPromoSection");
  714.       const topupPaymentSection = document.getElementById("topupPaymentSection");
  715.       const topupPromoInput = document.getElementById("topupPromoInput");
  716.       const topupPromoApply = document.querySelector(".topup-promo-apply");
  717.       const topupPromoBenefit = document.querySelector(".topup-promo-benefit");
  718.       const topupPromoSaving = document.querySelector("[data-promo-saving]");
  719.       const topupQuickAmounts = document.querySelectorAll("[data-quick-amount]");
  720.       const topupPaymentMethods = document.querySelectorAll(".topup-payment-method");
  721.       const topupCredit = document.querySelector("[data-topup-credit]");
  722.       const topupFeeBadge = document.querySelector("[data-topup-fee-badge]");
  723.       const topupFinalPay = document.querySelector(".topup-final-pay");
  724.       const topupRequiresAuth = {{ user ? 'false' : 'true' }};
  725.       const maxTopupAmount = 100000;
  726.       let promoSectionOpen = false;
  727.       let paymentSectionOpen = false;
  728.       let promoApplied = false;
  729.       let selectedPaymentFee = 0;
  730.       let quickPopoverOpen = false;
  732.       const formatRubles = (value) => new Intl.NumberFormat("ru-RU").format(Math.max(0, Math.round(value)));
  733.       const openTopupAuth = (trigger = topupFinalPay) => {
  734.         const returnPath = `${window.location.pathname}${window.location.search}${window.location.hash}`;
  735.         if (typeof setAuthOpen === "function") {
  736.           window.PlayPapaAuth?.setReturnPath?.(returnPath);
  737.           setAuthOpen(true, "login", trigger);
  738.           return;
  739.         }
  740.         if (window.PlayPapaAuth?.openModal?.("login", trigger, returnPath)) return;
  741.         const url = new URL("/", window.location.origin);
  742.         url.searchParams.set("auth", "login");
  743.         url.searchParams.set("redirect", returnPath);
  744.         url.searchParams.set("reason", "checkout");
  745.         window.location.assign(`${url.pathname}${url.search}`);
  746.       };
  748.       const syncQuickPopover = () => {
  749.         topupQuickPopover?.classList.toggle("is-open", quickPopoverOpen);
  750.         topupQuickPopover?.setAttribute("aria-hidden", quickPopoverOpen ? "false" : "true");
  751.         topupQuickPopover?.toggleAttribute("inert", !quickPopoverOpen);
  752.         amountInput?.setAttribute("aria-expanded", quickPopoverOpen ? "true" : "false");
  753.         servicesCard?.classList.toggle("has-quick-popover", quickPopoverOpen);
  754.       };
  756.       const syncTopupExpansion = () => {
  757.         const detailsOpen = promoSectionOpen || paymentSectionOpen;
  758.         topupDetails?.classList.toggle("is-open", detailsOpen);
  759.         topupDetails?.setAttribute("aria-hidden", detailsOpen ? "false" : "true");
  760.         topupDetails?.toggleAttribute("inert", !detailsOpen);
  762.         topupPromoSection?.classList.toggle("is-visible", promoSectionOpen);
  763.         topupPromoSection?.setAttribute("aria-hidden", promoSectionOpen ? "false" : "true");
  764.         topupPromoSection?.toggleAttribute("inert", !promoSectionOpen);
  765.         promoToggleButton?.setAttribute("aria-expanded", promoSectionOpen ? "true" : "false");
  766.         if (promoToggleLabel) promoToggleLabel.textContent = promoSectionOpen ? "Скрыть промокод" : "Ввести промокод";
  768.         topupPaymentSection?.classList.toggle("is-visible", paymentSectionOpen);
  769.         topupPaymentSection?.setAttribute("aria-hidden", paymentSectionOpen ? "false" : "true");
  770.         topupPaymentSection?.toggleAttribute("inert", !paymentSectionOpen);
  771.         payButton?.setAttribute("aria-expanded", paymentSectionOpen ? "true" : "false");
  772.         servicesCard?.classList.toggle("is-payment-open", paymentSectionOpen);
  773.       };
  775.       const syncAmount = () => {
  776.         if (!amountInput) return;
  777.         let value = amountInput.value.replace(/\D/g, "");
  778.         if (value) value = String(Math.min(Number(value), maxTopupAmount));
  779.         amountInput.value = value;
  780.         amountInput.style.setProperty("--amount-digits", String(Math.max(value.length, 3)));
  781.         const numericAmount = Number(value || 0);
  783.         if (payButton && payCurrencyIcon) {
  784.           payButton.textContent = `Оплатить ${value || 0}`;
  785.           payButton.append(payCurrencyIcon);
  786.         }
  788.         topupQuickAmounts.forEach((button) => {
  789.           button.classList.toggle("is-active", Number(button.dataset.quickAmount) === numericAmount);
  790.         });
  792.         if (topupCredit) topupCredit.textContent = `${formatRubles(numericAmount)} ₽`;
  793.         const amountToPay = numericAmount * (1 + selectedPaymentFee / 100);
  794.         if (topupFinalPay) topupFinalPay.textContent = `Оплатить ${formatRubles(amountToPay)}₽`;
  795.         if (topupFeeBadge) {
  796.           topupFeeBadge.textContent = selectedPaymentFee ? `+${selectedPaymentFee}% комиссия` : "Без комиссии";
  797.           topupFeeBadge.classList.toggle("has-fee", selectedPaymentFee > 0);
  798.         }
  800.         if (topupPromoSaving) topupPromoSaving.textContent = `${formatRubles(numericAmount * 0.05)} ₽`;
  801.       };
  803.       amountInput?.addEventListener("input", syncAmount);
  804.       amountInput?.addEventListener("focus", () => {
  805.         quickPopoverOpen = true;
  806.         syncQuickPopover();
  807.       });
  808.       amountInput?.addEventListener("click", () => {
  809.         quickPopoverOpen = true;
  810.         syncQuickPopover();
  811.       });
  812.       amountInput?.addEventListener("keydown", (event) => {
  813.         if (event.key !== "Escape") return;
  814.         quickPopoverOpen = false;
  815.         syncQuickPopover();
  816.         amountInput.blur();
  817.       });
  818.       amountInput?.addEventListener("blur", () => {
  819.         if (!amountInput.value) amountInput.value = "500";
  820.         syncAmount();
  821.       });
  823.       promoToggleButton?.addEventListener("click", () => {
  824.         promoSectionOpen = !promoSectionOpen;
  825.         syncTopupExpansion();
  826.       });
  828.       payButton?.addEventListener("click", () => {
  829.         quickPopoverOpen = false;
  830.         syncQuickPopover();
  831.         paymentSectionOpen = true;
  832.         syncTopupExpansion();
  833.       });
  835.       topupQuickAmounts.forEach((button) => {
  836.         button.addEventListener("click", () => {
  837.           if (!amountInput) return;
  838.           amountInput.value = button.dataset.quickAmount || "500";
  839.           syncAmount();
  840.           if (button.closest(".topup-quick-popover") && (!paymentSectionOpen || window.matchMedia("(min-width: 768px)").matches)) {
  841.             quickPopoverOpen = false;
  842.             syncQuickPopover();
  843.           }
  844.         });
  845.       });
  847.       document.addEventListener("pointerdown", (event) => {
  848.         if (!quickPopoverOpen || amountField?.contains(event.target)) return;
  849.         if (paymentSectionOpen && window.matchMedia("(max-width: 767px)").matches) return;
  850.         quickPopoverOpen = false;
  851.         syncQuickPopover();
  852.       });
  854.       topupPaymentMethods.forEach((method) => {
  855.         method.addEventListener("click", () => {
  856.           selectedPaymentFee = Number(method.dataset.fee || 0);
  857.           topupPaymentMethods.forEach((item) => {
  858.             const selected = item === method;
  859.             item.classList.toggle("is-selected", selected);
  860.             item.setAttribute("aria-checked", selected ? "true" : "false");
  861.           });
  862.           syncAmount();
  863.         });
  864.       });
  866.       topupPromoApply?.addEventListener("click", () => {
  867.         if (!topupPromoInput?.value.trim()) {
  868.           topupPromoInput?.focus();
  869.           return;
  870.         }
  871.         promoApplied = true;
  872.         topupPromoBenefit?.classList.add("is-visible");
  873.         topupPromoBenefit?.setAttribute("aria-hidden", "false");
  874.         topupPromoApply.textContent = "Применено";
  875.         syncAmount();
  876.       });
  878.       topupPromoInput?.addEventListener("input", () => {
  879.         if (!promoApplied) return;
  880.         promoApplied = false;
  881.         topupPromoBenefit?.classList.remove("is-visible");
  882.         topupPromoBenefit?.setAttribute("aria-hidden", "true");
  883.         if (topupPromoApply) topupPromoApply.textContent = "Применить";
  884.       });
  886.       topupFinalPay?.addEventListener("click", () => {
  887.         if (topupRequiresAuth) {
  888.           openTopupAuth(topupFinalPay);
  889.         }
  890.       });
  892.       syncTopupExpansion();
  893.       syncQuickPopover();
  894.       syncAmount();
  896.       document.querySelectorAll(".filter-group-toggle").forEach((button) => {
  897.         const group = button.closest(".filter-group");
  898.         if (!group) return;
  899.         button.addEventListener("click", () => {
  900.           group.classList.toggle("is-collapsed");
  901.           button.setAttribute("aria-expanded", group.classList.contains("is-collapsed") ? "false" : "true");
  902.         });
  903.       });
  905.       const mobileFilterButton = document.querySelector(".catalog-mobile-filter-btn");
  906.       const mobileFilterClose = document.querySelector(".catalog-mobile-filter-close");
  907.       const filterPanel = document.querySelector(".catalog-filter-panel");
  908.       const mobileFilterbar = document.querySelector(".catalog-mobile-filterbar");
  909.       const mobileSortButton = document.querySelector(".catalog-mobile-sort");
  910.       const mobileSortLabel = document.querySelector(".catalog-mobile-sort-label");
  911.       const mobileSortPanel = document.querySelector(".catalog-mobile-sort-panel");
  912.       const mobileFilterQuery = window.matchMedia("(max-width: 767px)");
  913.       const setMobileSortOpen = (open) => {
  914.         if (!mobileSortButton || !mobileSortPanel || !mobileFilterbar) return;
  915.         mobileFilterbar.classList.toggle("is-sort-open", open);
  916.         mobileSortPanel.classList.toggle("is-open", open);
  917.         mobileSortPanel.setAttribute("aria-hidden", open ? "false" : "true");
  918.         mobileSortPanel.toggleAttribute("inert", !open);
  919.         mobileSortButton.setAttribute("aria-expanded", open ? "true" : "false");
  920.       };
  922.       const setMobileFilterOpen = (open) => {
  923.         if (!filterPanel || !mobileFilterButton) return;
  924.         document.body.classList.toggle("catalog-mobile-filter-open", open);
  925.         mobileFilterButton.setAttribute("aria-expanded", open ? "true" : "false");
  926.         if (open) setMobileSortOpen(false);
  927.       };
  929.       mobileFilterButton?.addEventListener("click", (event) => {
  930.         event.stopPropagation();
  931.         setMobileFilterOpen(!document.body.classList.contains("catalog-mobile-filter-open"));
  932.       });
  934.       mobileFilterClose?.addEventListener("click", () => setMobileFilterOpen(false));
  936.       filterPanel?.addEventListener("click", (event) => {
  937.         if (mobileFilterQuery.matches) event.stopPropagation();
  938.       });
  940.       mobileSortButton?.addEventListener("click", (event) => {
  941.         event.stopPropagation();
  942.         if (!mobileFilterQuery.matches) return;
  943.         setMobileFilterOpen(false);
  944.         setMobileSortOpen(!mobileSortPanel?.classList.contains("is-open"));
  945.       });
  947.       mobileSortPanel?.addEventListener("click", (event) => {
  948.         event.stopPropagation();
  949.       });
  951.       mobileSortPanel?.querySelectorAll("[data-sort-label]").forEach((button) => {
  952.         button.addEventListener("click", () => {
  953.           mobileSortPanel.querySelectorAll("[data-sort-label]").forEach((item) => item.classList.toggle("is-selected", item === button));
  954.           if (mobileSortLabel) mobileSortLabel.textContent = button.dataset.sortLabel || button.textContent.trim();
  955.           setMobileSortOpen(false);
  956.         });
  957.       });
  959.       document.addEventListener("click", () => {
  960.         if (document.body.classList.contains("catalog-mobile-filter-open")) setMobileFilterOpen(false);
  961.         if (mobileSortPanel?.classList.contains("is-open")) setMobileSortOpen(false);
  962.       });
  964.       document.addEventListener("keydown", (event) => {
  965.         if (event.key === "Escape") {
  966.           setMobileFilterOpen(false);
  967.           setMobileSortOpen(false);
  968.         }
  969.       });
  971.       filterPanel?.querySelectorAll(".filter-apply, .filter-reset").forEach((button) => {
  972.         button.addEventListener("click", () => {
  973.           if (mobileFilterQuery.matches) setMobileFilterOpen(false);
  974.         });
  975.       });
  977.       const syncFilterCheckState = () => {
  978.         document.querySelectorAll(".filter-check").forEach((label) => {
  979.           const input = label.querySelector('input[type="checkbox"]');
  980.           label.classList.toggle("is-checked", Boolean(input?.checked));
  981.         });
  982.       };
  984.       document.querySelectorAll('.filter-check input[type="checkbox"]').forEach((input) => {
  985.         input.addEventListener("change", syncFilterCheckState);
  986.       });
  987.       syncFilterCheckState();
  989.       mobileFilterQuery.addEventListener?.("change", (event) => {
  990.         if (!event.matches) {
  991.           setMobileFilterOpen(false);
  992.           setMobileSortOpen(false);
  993.         }
  994.       });
  996.       let catalogPriceTouched = false;
  997.       let getCatalogPriceFilter = () => ({ enabled: false, min: null, max: null });
  998.       let resetCatalogPriceFilter = () => {};
  999.       let updateCatalogFilterBadges = () => {};
  1000.       const priceFilter = document.querySelector("[data-price-filter]");
  1001.       if (priceFilter) {
  1002.         const minInput = priceFilter.querySelector("[data-price-min-input]");
  1003.         const maxInput = priceFilter.querySelector("[data-price-max-input]");
  1004.         const range = priceFilter.querySelector(".filter-range");
  1005.         const minLimit = Number(priceFilter.dataset.minPrice || 0);
  1006.         const maxLimit = Number(priceFilter.dataset.maxPrice || 1000000);
  1007.         const step = Number(priceFilter.dataset.priceStep || 1);
  1008.         let minPrice = Number(minInput?.value.replace(/\D/g, "") || minLimit);
  1009.         let maxPrice = Number(maxInput?.value.replace(/\D/g, "") || maxLimit);
  1010.         let activeHandle = null;
  1012.         const clampPrice = (value) => Math.min(maxLimit, Math.max(minLimit, Math.round(value / step) * step));
  1013.         const priceToPercent = (value) => ((value - minLimit) / (maxLimit - minLimit)) * 100;
  1014.         const clientXToPrice = (clientX) => {
  1015.           if (!range) return minLimit;
  1016.           const rect = range.getBoundingClientRect();
  1017.           const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
  1018.           return clampPrice(minLimit + ratio * (maxLimit - minLimit));
  1019.         };
  1021.         const syncPriceFilter = (source, writeInputs = true) => {
  1022.           minPrice = clampPrice(minPrice);
  1023.           maxPrice = clampPrice(maxPrice);
  1024.           if (minPrice > maxPrice) {
  1025.             if (source === "min") minPrice = maxPrice;
  1026.             else maxPrice = minPrice;
  1027.           }
  1029.           if (writeInputs && minInput) minInput.value = String(minPrice);
  1030.           if (writeInputs && maxInput) maxInput.value = String(maxPrice);
  1031.           if (range) {
  1032.             range.style.setProperty("--price-start", `${priceToPercent(minPrice)}%`);
  1033.             range.style.setProperty("--price-end", `${priceToPercent(maxPrice)}%`);
  1034.           }
  1035.         };
  1037.         getCatalogPriceFilter = () => ({
  1038.           enabled: catalogPriceTouched || minPrice !== minLimit || maxPrice !== maxLimit,
  1039.           min: minPrice,
  1040.           max: maxPrice,
  1041.         });
  1043.         resetCatalogPriceFilter = () => {
  1044.           catalogPriceTouched = false;
  1045.           minPrice = minLimit;
  1046.           maxPrice = maxLimit;
  1047.           syncPriceFilter();
  1048.         };
  1050.         const setPriceFromPointer = (event, handle) => {
  1051.           catalogPriceTouched = true;
  1052.           const nextPrice = clientXToPrice(event.clientX);
  1053.           if (handle === "min") minPrice = Math.min(nextPrice, maxPrice);
  1054.           else maxPrice = Math.max(nextPrice, minPrice);
  1055.           syncPriceFilter(handle);
  1056.           updateCatalogFilterBadges();
  1057.         };
  1059.         minInput?.addEventListener("input", () => {
  1060.           catalogPriceTouched = true;
  1061.           const value = minInput.value.replace(/\D/g, "");
  1062.           minInput.value = value;
  1063.           if (!value) return;
  1064.           minPrice = Number(value);
  1065.           syncPriceFilter("min", false);
  1066.           updateCatalogFilterBadges();
  1067.         });
  1069.         maxInput?.addEventListener("input", () => {
  1070.           catalogPriceTouched = true;
  1071.           const value = maxInput.value.replace(/\D/g, "");
  1072.           maxInput.value = value;
  1073.           if (!value) return;
  1074.           maxPrice = Number(value);
  1075.           syncPriceFilter("max", false);
  1076.           updateCatalogFilterBadges();
  1077.         });
  1079.         minInput?.addEventListener("blur", () => syncPriceFilter("min"));
  1080.         maxInput?.addEventListener("blur", () => syncPriceFilter("max"));
  1082.         range?.addEventListener("pointerdown", (event) => {
  1083.           event.preventDefault();
  1084.           const nextPrice = clientXToPrice(event.clientX);
  1085.           activeHandle = Math.abs(nextPrice - minPrice) <= Math.abs(nextPrice - maxPrice) ? "min" : "max";
  1086.           range.setPointerCapture?.(event.pointerId);
  1087.           setPriceFromPointer(event, activeHandle);
  1088.         });
  1090.         range?.addEventListener("pointermove", (event) => {
  1091.           if (!activeHandle) return;
  1092.           setPriceFromPointer(event, activeHandle);
  1093.         });
  1095.         const releasePriceHandle = (event) => {
  1096.           if (!activeHandle) return;
  1097.           range?.releasePointerCapture?.(event.pointerId);
  1098.           activeHandle = null;
  1099.         };
  1101.         range?.addEventListener("pointerup", releasePriceHandle);
  1102.         range?.addEventListener("pointercancel", releasePriceHandle);
  1104.         syncPriceFilter();
  1105.       }
  1107.       const services = [
  1108.         ["service-steam.png", "Steam"],
  1109.         ["service-telegram.png", "Telegram"],
  1110.         ["service-roblox.png", "Roblox"],
  1111.         ["service-brawl.png", "Brawl Stars"],
  1112.         ["service-pubg.png", "PUBG Mob..."],
  1113.         ["service-appstore.png", "App Store"],
  1114.         ["service-chatgpt.png", "ChatGPT"],
  1115.         ["service-playstation.png", "PlayStation"],
  1116.         ["service-tiktok.png", "TikTok"],
  1117.         ["service-mobile.png", "Mobile Leg..."],
  1118.       ];
  1120.       const servicesRow = document.getElementById("servicesRow");
  1121.       if (servicesRow) {
  1122.         services.forEach(([icon, label, active]) => {
  1123.           servicesRow.insertAdjacentHTML(
  1124.             "beforeend",
  1125.             `<button class="service-item ${active ? "is-active" : ""}"><img src="./assets/${icon}" alt=""><span>${label}</span></button>`
  1126.           );
  1127.         });
  1128.         servicesRow.insertAdjacentHTML(
  1129.           "beforeend",
  1130.           `<button class="service-item more-service"><span class="more-icon"><img class="more-icon-img" src="./assets/more-service.svg" alt=""></span><span>еще 841</span></button>`
  1131.         );
  1132.       }
  1134.       const discountPattern = ["red", "red", "red", "red", "red", "red", "red", "red"];
  1135.       const escapeHtml = (value) =>
  1136.         String(value ?? "")
  1137.           .replaceAll("&", "&amp;")
  1138.           .replaceAll("<", "&lt;")
  1139.           .replaceAll(">", "&gt;")
  1140.           .replaceAll('"', "&quot;")
  1141.           .replaceAll("'", "&#039;");
  1142.       const catalogProducts = Array.isArray(window.playpapaCatalog?.products) ? window.playpapaCatalog.products : [];
  1143.       const catalogState = window.playpapaCatalogState || {};
  1144.       const catalogApiUrl = "{{ path('catalog_items') }}";
  1145.       const activeCatalogCategory = catalogState.category || "all";
  1146.       const catalogSearchInput = document.querySelector("[data-catalog-search]");
  1147.       const fallbackProducts = [
  1148.         {
  1149.           name: "DOOM 2016 STEAM KEY РФ+СНГ",
  1150.           image_url: "./assets/product-pubg.png",
  1151.           price_label: "49,99 ₽",
  1152.           url: "/product",
  1153.           catalog_kind: "keys",
  1154.           catalog_kinds: ["keys"],
  1155.         },
  1156.       ];
  1157.       const sourceProducts = catalogProducts.length ? catalogProducts : fallbackProducts;
  1158.       const officialProducts = Array.isArray(window.playpapaCatalog?.official_products) && window.playpapaCatalog.official_products.length
  1159.         ? window.playpapaCatalog.official_products
  1160.         : sourceProducts.slice(0, 10);
  1161.       let loadedCatalogProducts = sourceProducts.slice();
  1162.       let catalogTotalCount = Number(window.playpapaCatalog?.total ?? loadedCatalogProducts.length);
  1163.       let catalogNextOffset = Number(window.playpapaCatalog?.next_offset ?? loadedCatalogProducts.length);
  1164.       let catalogHasMore = Boolean(window.playpapaCatalog?.has_more ?? catalogTotalCount > loadedCatalogProducts.length);
  1165.       let catalogLoading = false;
  1166.       let catalogRequestId = 0;
  1167.       let catalogSearchQuery = (catalogSearchInput?.value || catalogState.query || "").trim().toLowerCase();
  1168.       let catalogSortValue = catalogState.sort || "popular";
  1169.       const catalogPageSize = 24;
  1170.       const filterInputs = Array.from(document.querySelectorAll("[data-filter-type]"));
  1171.       const filterApplyBadges = Array.from(document.querySelectorAll(".filter-apply span"));
  1172.       const mobileFilterBadge = document.querySelector(".catalog-mobile-filter-btn b");
  1173.       const mobileTags = document.querySelector(".catalog-mobile-tags");
  1174.       const catalogSortButton = document.querySelector(".catalog-sort");
  1175.       const sortOptions = [
  1176.         ["popular", "Популярные"],
  1177.         ["price_asc", "Сначала дешёвые"],
  1178.         ["price_desc", "Сначала дорогие"],
  1179.         ["new", "Сначала новинки"],
  1180.         ["rating", "По рейтингу"],
  1181.       ];
  1182.       const sortLabels = Object.fromEntries(sortOptions);
  1183.       const productWord = (count) => {
  1184.         const mod10 = count % 10;
  1185.         const mod100 = count % 100;
  1186.         if (mod10 === 1 && mod100 !== 11) return "товар";
  1187.         if (mod10 >= 2 && mod10 <= 4 && (mod100 < 12 || mod100 > 14)) return "товара";
  1188.         return "товаров";
  1189.       };
  1191.       const productMarkup = (product, color, index) => `
  1192.         <article class="product-card">
  1193.           <div class="product-cover">
  1194.             <img src="${escapeHtml(product.image_url || "./assets/product-pubg.png")}" alt="">
  1195.             ${product.discount_label ? `<span class="discount ${color}">${escapeHtml(product.discount_label)}</span>` : ""}
  1196.           </div>
  1197.           <div class="product-body">
  1198.             <h3>${escapeHtml(product.name || "Товар PlayPapa")}</h3>
  1199.             <div class="price-line"><strong>${escapeHtml(product.price_label || "Цена уточняется")}</strong></div>
  1200.             <a href="${escapeHtml(product.url || "/product")}">Купить</a>
  1201.           </div>
  1202.         </article>
  1203.       `;
  1205.       const emptyCatalogMarkup = () => `
  1206.         <div class="catalog-empty">
  1207.           <strong>Ничего не найдено</strong>
  1208.           <span>Попробуйте другую категорию или измените запрос.</span>
  1209.         </div>
  1210.       `;
  1212.       const renderCatalogGrid = (grid, products, startIndex, emptyAllowed = false, countOverride = null) => {
  1213.         const count = countOverride ?? Number(grid.dataset.count || 5);
  1214.         const slice = products.slice(startIndex, startIndex + count);
  1215.         if (slice.length === 0) {
  1216.           grid.innerHTML = emptyAllowed ? emptyCatalogMarkup() : "";
  1217.           return;
  1218.         }
  1220.         const items = slice.map((product, i) => productMarkup(product, discountPattern[(startIndex + i) % discountPattern.length], startIndex + i)).join("");
  1221.         grid.innerHTML = items;
  1222.       };
  1224.       const catalogTotal = document.querySelector(".catalog-total");
  1225.       const officialGrid = document.querySelector(".catalog-feature-grid");
  1226.       const officialScrollButtons = document.querySelectorAll("[data-official-scroll]");
  1227.       const catalogLoader = document.querySelector(".catalog-loader");
  1228.       const catalogTopupRow = document.querySelector(".catalog-topup-row");
  1230.       const renderCatalogProducts = () => {
  1231.         const products = loadedCatalogProducts;
  1232.         document.querySelectorAll("[data-products]").forEach((grid) => {
  1233.           const slot = grid.dataset.products || "";
  1234.           if (slot === "catalog-featured") {
  1235.             renderCatalogGrid(grid, officialProducts, 0, false, 10);
  1236.             return;
  1237.           }
  1239.           if (slot === "catalog-results-grid-primary") {
  1240.             renderCatalogGrid(grid, products, 0, true, 12);
  1241.             return;
  1242.           }
  1244.           if (slot === "catalog-results-grid-secondary") {
  1245.             renderCatalogGrid(grid, products, 12, false, Math.max(0, products.length - 12));
  1246.             return;
  1247.           }
  1249.           renderCatalogGrid(grid, products, 0);
  1250.         });
  1252.         if (catalogTotal) {
  1253.           catalogTotal.textContent = `Всего ${catalogTotalCount} ${productWord(catalogTotalCount)}`;
  1254.         }
  1256.         if (catalogLoader) {
  1257.           catalogLoader.hidden = !catalogLoading && !catalogHasMore;
  1258.         }
  1260.         if (catalogTopupRow) {
  1261.           catalogTopupRow.hidden = activeCatalogCategory !== "all";
  1262.         }
  1263.       };
  1265.       const selectedFilterValues = (type) =>
  1266.         filterInputs
  1267.           .filter((input) => input.dataset.filterType === type && input.checked)
  1268.           .map((input) => input.value)
  1269.           .filter(Boolean);
  1271.       const buildCatalogParams = (offset = 0) => {
  1272.         const params = new URLSearchParams();
  1273.         params.set("offset", String(offset));
  1274.         params.set("limit", String(catalogPageSize));
  1275.         params.set("sort", catalogSortValue);
  1276.         if (activeCatalogCategory !== "all") params.set("category", activeCatalogCategory);
  1277.         if (catalogSearchQuery) params.set("q", catalogSearchQuery);
  1279.         const types = selectedFilterValues("type");
  1280.         const genres = selectedFilterValues("genre");
  1281.         if (types.length) params.set("type", types.join(","));
  1282.         if (genres.length) params.set("genre", genres.join(","));
  1284.         const price = getCatalogPriceFilter();
  1285.         if (price.enabled) {
  1286.           params.set("min_price", String(price.min));
  1287.           params.set("max_price", String(price.max));
  1288.         }
  1290.         return params;
  1291.       };
  1293.       const setCatalogLoading = (loading) => {
  1294.         catalogLoading = loading;
  1295.         renderCatalogProducts();
  1296.       };
  1298.       const updateCatalogSortUi = () => {
  1299.         const label = sortLabels[catalogSortValue] || sortLabels.popular;
  1300.         if (mobileSortLabel) mobileSortLabel.textContent = label;
  1301.         if (catalogSortButton) catalogSortButton.textContent = label;
  1302.         mobileSortPanel?.querySelectorAll("[data-sort-value]").forEach((button) => {
  1303.           button.classList.toggle("is-selected", button.dataset.sortValue === catalogSortValue);
  1304.         });
  1305.       };
  1307.       const fetchCatalogPage = async ({ offset = 0, append = false } = {}) => {
  1308.         const requestId = ++catalogRequestId;
  1309.         setCatalogLoading(true);
  1311.         try {
  1312.           const response = await fetch(`${catalogApiUrl}?${buildCatalogParams(offset).toString()}`, {
  1313.             headers: { Accept: "application/json" },
  1314.           });
  1315.           if (!response.ok) throw new Error(`Catalog API returned ${response.status}`);
  1317.           const payload = await response.json();
  1318.           if (requestId !== catalogRequestId) return;
  1320.           const nextProducts = Array.isArray(payload.products) ? payload.products : [];
  1321.           loadedCatalogProducts = append ? loadedCatalogProducts.concat(nextProducts) : nextProducts;
  1322.           catalogTotalCount = Number(payload.total ?? loadedCatalogProducts.length);
  1323.           catalogNextOffset = Number(payload.next_offset ?? loadedCatalogProducts.length);
  1324.           catalogHasMore = Boolean(payload.has_more);
  1325.         } catch (error) {
  1326.           console.warn(error);
  1327.           if (!append) {
  1328.             loadedCatalogProducts = [];
  1329.             catalogTotalCount = 0;
  1330.             catalogNextOffset = 0;
  1331.             catalogHasMore = false;
  1332.           }
  1333.         } finally {
  1334.           if (requestId === catalogRequestId) {
  1335.             setCatalogLoading(false);
  1336.           }
  1337.         }
  1338.       };
  1340.       const applyCatalogFilters = () => {
  1341.         catalogNextOffset = 0;
  1342.         catalogHasMore = true;
  1343.         fetchCatalogPage({ offset: 0, append: false });
  1344.       };
  1346.       const loadMoreCatalogProducts = () => {
  1347.         if (catalogLoading || !catalogHasMore) return;
  1348.         fetchCatalogPage({ offset: catalogNextOffset, append: true });
  1349.       };
  1351.       const selectedFilterLabels = () =>
  1352.         filterInputs
  1353.           .filter((input) => input.checked)
  1354.           .map((input) => input.closest(".filter-check")?.querySelector("span")?.textContent?.trim())
  1355.           .filter(Boolean);
  1357.       const renderMobileTags = () => {
  1358.         if (!mobileTags) return;
  1359.         const tags = [];
  1360.         if (activeCatalogCategory !== "all") {
  1361.           const activeChip = Array.from(document.querySelectorAll("[data-catalog-category]")).find((chip) => chip.dataset.catalogCategory === activeCatalogCategory);
  1362.           tags.push(activeChip?.textContent?.trim() || "Категория");
  1363.         }
  1364.         if (catalogSearchQuery) tags.push(`Поиск: ${catalogSearchQuery}`);
  1365.         tags.push(...selectedFilterLabels());
  1366.         const price = getCatalogPriceFilter();
  1367.         if (price.enabled) tags.push(`${price.min}-${price.max} ₽`);
  1369.         if (!tags.length) {
  1370.           mobileTags.innerHTML = '<button type="button" disabled>Все товары</button>';
  1371.           return;
  1372.         }
  1374.         mobileTags.innerHTML = `${tags.map((tag) => `<button type="button" disabled>${escapeHtml(tag)}</button>`).join("")}<button type="button" data-catalog-reset>Сбросить</button>`;
  1375.       };
  1377.       updateCatalogFilterBadges = () => {
  1378.         const checkedCount = filterInputs.filter((input) => input.checked).length;
  1379.         const price = getCatalogPriceFilter();
  1380.         const count = checkedCount + (price.enabled ? 1 : 0) + (activeCatalogCategory !== "all" ? 1 : 0);
  1381.         filterApplyBadges.forEach((badge) => {
  1382.           badge.textContent = String(count);
  1383.           badge.hidden = count === 0;
  1384.         });
  1385.         if (mobileFilterBadge) {
  1386.           mobileFilterBadge.textContent = String(count);
  1387.           mobileFilterBadge.hidden = count === 0;
  1388.         }
  1389.         renderMobileTags();
  1390.       };
  1392.       const resetCatalogFilters = () => {
  1393.         if (activeCatalogCategory !== "all") {
  1394.           window.location.href = "/catalog";
  1395.           return;
  1396.         }
  1397.         filterInputs.forEach((input) => {
  1398.           input.checked = false;
  1399.         });
  1400.         catalogSearchQuery = "";
  1401.         if (catalogSearchInput) catalogSearchInput.value = "";
  1402.         resetCatalogPriceFilter();
  1403.         catalogSortValue = "popular";
  1404.         syncFilterCheckState();
  1405.         updateCatalogSortUi();
  1406.         updateCatalogFilterBadges();
  1407.         window.history.replaceState(null, "", "/catalog");
  1408.         applyCatalogFilters();
  1409.       };
  1411.       const setCatalogSort = (value, reload = true) => {
  1412.         catalogSortValue = sortLabels[value] ? value : "popular";
  1413.         updateCatalogSortUi();
  1414.         if (reload) applyCatalogFilters();
  1415.       };
  1417.       renderCatalogProducts();
  1418.       updateCatalogSortUi();
  1419.       updateCatalogFilterBadges();
  1421.       const goToCatalogSearch = () => {
  1422.         catalogSearchQuery = (catalogSearchInput?.value || "").trim().toLowerCase();
  1423.         applyCatalogFilters();
  1424.       };
  1426.       let catalogSearchTimer = 0;
  1427.       catalogSearchInput?.addEventListener("input", () => {
  1428.         catalogSearchQuery = catalogSearchInput.value.trim().toLowerCase();
  1429.         window.clearTimeout(catalogSearchTimer);
  1430.         catalogSearchTimer = window.setTimeout(() => {
  1431.           updateCatalogFilterBadges();
  1432.           applyCatalogFilters();
  1433.         }, 280);
  1434.       });
  1436.       catalogSearchInput?.addEventListener("keydown", (event) => {
  1437.         if (event.key !== "Enter") return;
  1438.         event.preventDefault();
  1439.         window.clearTimeout(catalogSearchTimer);
  1440.         goToCatalogSearch();
  1441.       });
  1443.       filterInputs.forEach((input) => {
  1444.         input.addEventListener("change", updateCatalogFilterBadges);
  1445.       });
  1447.       document.querySelectorAll(".filter-apply").forEach((button) => {
  1448.         button.addEventListener("click", () => {
  1449.           updateCatalogFilterBadges();
  1450.           applyCatalogFilters();
  1451.         });
  1452.       });
  1454.       document.querySelectorAll(".filter-reset").forEach((button) => {
  1455.         button.addEventListener("click", () => {
  1456.           resetCatalogFilters();
  1457.         });
  1458.       });
  1460.       mobileTags?.addEventListener("click", (event) => {
  1461.         if (event.target.closest("[data-catalog-reset]")) resetCatalogFilters();
  1462.       });
  1464.       mobileSortPanel?.querySelectorAll("[data-sort-value]").forEach((button) => {
  1465.         button.addEventListener("click", () => setCatalogSort(button.dataset.sortValue || "popular"));
  1466.       });
  1468.       catalogSortButton?.addEventListener("click", () => {
  1469.         const currentIndex = Math.max(0, sortOptions.findIndex(([value]) => value === catalogSortValue));
  1470.         const next = sortOptions[(currentIndex + 1) % sortOptions.length][0];
  1471.         setCatalogSort(next);
  1472.       });
  1474.       document.querySelectorAll(".catalog-sort-icon").forEach((button, index) => {
  1475.         button.addEventListener("click", () => {
  1476.           if (index === 0) {
  1477.             setCatalogSort(catalogSortValue === "price_asc" ? "price_desc" : "price_asc");
  1478.             return;
  1479.           }
  1480.           setCatalogSort("popular");
  1481.         });
  1482.       });
  1484.       if ("IntersectionObserver" in window && catalogLoader) {
  1485.         const catalogObserver = new IntersectionObserver((entries) => {
  1486.           if (entries.some((entry) => entry.isIntersecting)) loadMoreCatalogProducts();
  1487.         }, { rootMargin: "420px 0px" });
  1488.         catalogObserver.observe(catalogLoader);
  1489.       } else {
  1490.         window.addEventListener("scroll", () => {
  1491.           if (window.innerHeight + window.scrollY < document.documentElement.scrollHeight - 520) return;
  1492.           loadMoreCatalogProducts();
  1493.         }, { passive: true });
  1494.       }
  1496.       const officialScrollStep = () => {
  1497.         if (!officialGrid) return;
  1498.         const firstCard = officialGrid.querySelector(".product-card");
  1499.         const cardWidth = firstCard ? firstCard.getBoundingClientRect().width : 230;
  1500.         const gap = Number.parseFloat(getComputedStyle(officialGrid).columnGap || "16");
  1501.         return cardWidth + gap;
  1502.       };
  1504.       const scrollOfficialGrid = (direction) => {
  1505.         if (!officialGrid) return;
  1506.         const step = officialScrollStep() || 246;
  1507.         const maxLeft = Math.max(0, officialGrid.scrollWidth - officialGrid.clientWidth);
  1508.         const nextLeft = direction === "prev" ? officialGrid.scrollLeft - step : officialGrid.scrollLeft + step;
  1509.         const target = direction === "prev"
  1510.           ? (nextLeft <= 2 ? maxLeft : nextLeft)
  1511.           : (nextLeft >= maxLeft - 2 ? 0 : nextLeft);
  1512.         officialGrid.scrollTo({ left: target, behavior: "smooth" });
  1513.       };
  1515.       officialScrollButtons.forEach((button) => {
  1516.         button.addEventListener("click", () => scrollOfficialGrid(button.dataset.officialScroll === "prev" ? "prev" : "next"));
  1517.       });
  1519.       if (officialGrid) {
  1520.         let officialDragPointer = null;
  1521.         let officialDragStartX = 0;
  1522.         let officialDragStartLeft = 0;
  1523.         let officialDragMoved = false;
  1524.         let officialSuppressClick = false;
  1525.         const isOfficialInteractiveTarget = (target) => Boolean(target.closest("a, button, input, select, textarea, label"));
  1527.         const finishOfficialDrag = (event) => {
  1528.           if (officialDragPointer === null || event.pointerId !== officialDragPointer) return;
  1529.           officialGrid.releasePointerCapture?.(event.pointerId);
  1530.           officialGrid.classList.remove("is-dragging");
  1531.           officialSuppressClick = officialDragMoved;
  1532.           officialDragPointer = null;
  1533.           window.setTimeout(() => {
  1534.             officialDragMoved = false;
  1535.             officialSuppressClick = false;
  1536.           }, 0);
  1537.         };
  1539.         officialGrid.addEventListener("pointerdown", (event) => {
  1540.           if (event.button !== undefined && event.button !== 0) return;
  1541.           if (isOfficialInteractiveTarget(event.target)) return;
  1542.           officialDragPointer = event.pointerId;
  1543.           officialDragStartX = event.clientX;
  1544.           officialDragStartLeft = officialGrid.scrollLeft;
  1545.           officialDragMoved = false;
  1546.           officialGrid.setPointerCapture?.(event.pointerId);
  1547.           officialGrid.classList.add("is-dragging");
  1548.         });
  1550.         officialGrid.addEventListener("pointermove", (event) => {
  1551.           if (officialDragPointer === null || event.pointerId !== officialDragPointer) return;
  1552.           const delta = event.clientX - officialDragStartX;
  1553.           if (Math.abs(delta) > 4) officialDragMoved = true;
  1554.           officialGrid.scrollLeft = officialDragStartLeft - delta;
  1555.         });
  1557.         officialGrid.addEventListener("pointerup", finishOfficialDrag);
  1558.         officialGrid.addEventListener("pointercancel", finishOfficialDrag);
  1559.         officialGrid.addEventListener("click", (event) => {
  1560.           if (!officialSuppressClick) return;
  1561.           event.preventDefault();
  1562.           event.stopPropagation();
  1563.         }, true);
  1564.       }
  1565.     </script>
  1566. {% endblock %}