<turbo-stream action="append" target="modals"><template><div id="modal_d4188416-c290-4869-bdc0-c1dfc59ac2b6">
  <!-- Модалка продукта -->
  <div class="fixed inset-0 flex items-end justify-center md:items-center md:p-4 animate-fade-in"
       style="z-index: 50;"
       data-testid="product-modal"
    id="product-modal-frame-0"
    data-frame-stack-level="0"
    data-stack-level="0">
    <!-- overlay -->
    <a href="/units/509da9f3-4449-4e69-a3e4-6bcbbdd71465/products/d4188416-c290-4869-bdc0-c1dfc59ac2b6/modal/close" class="absolute inset-0 bg-black bg-opacity-50 transition-opacity duration-300" data-turbo-stream="true" data-testid="modal-overlay"></a>
    <!-- Контейнер модалки - выезжает снизу на мобильных, центр на десктопе -->
    <div class="bg-white rounded-t-2xl md:rounded-lg w-full md:max-w-4xl max-h-[90vh] overflow-hidden transform transition-transform duration-300 ease-out animate-slide-up"
         data-testid="product-modal-container"
         data-action="click->product-modal#stopPropagation">
      <!-- Заголовок с кнопкой закрытия -->
      <div class="flex items-center justify-between p-6 border-b border-gray-200">
        <h2 class="text-xl font-semibold text-gray-900" data-testid="product-modal-title">
          Фирменный с жасмином
        </h2>
        <a href="/units/509da9f3-4449-4e69-a3e4-6bcbbdd71465/products/d4188416-c290-4869-bdc0-c1dfc59ac2b6/modal/close" class="text-gray-400 hover:text-gray-600 transition-colors" data-turbo-stream="true" data-turbo-frame="modals" data-testid="modal-close-button">
          <svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
          </svg>
        </a>
      </div>
      <!-- Контент модалки -->
      <div class="overflow-y-auto max-h-[calc(90vh-8rem)]">
        <div class="p-4 space-y-6 max-w-4xl mx-auto">
          <!-- Галерея -->
          <div class="space-y-4" data-controller="gallery" data-testid="product-modal-gallery">
  <!-- Основное изображение с миниатюрами поверх -->
  <div class="relative aspect-square rounded-lg h-[300px] w-full overflow-hidden bg-gray-100">
      <img src="https://neuropine.com/attachments/34841257-4813-4db9-8eb0-19f8bd308ff5?quality=75&amp;width=800"
           alt="Фирменный с жасмином"
           class="w-full h-full object-cover"
           data-gallery-target="mainImage"
           data-testid="product-gallery-main-image">
    <!-- Индикатор остроты -->
    <!-- Маленькие миниатюры поверх основного изображения -->
  </div>
</div>


          <!-- Выбор размера (если несколько) -->

          <!-- Основная информация -->
          <div class="flex items-center justify-between mb-4" id="product-price-info">
            <div class="flex items-center gap-3">
              <div class="text-2xl font-bold text-primary" data-testid="product-modal-total-price"
                   data-controller="product-price"
                   data-product-price-base-value="340">
                340 ₽
              </div>
            </div>
              <div class="text-gray-500">
                500.0 мл
              </div>
          </div>

            <div id="product-modifiers-section">
              <div class="space-y-4" data-testid="product-modifier-selector">
  <h2 class="text-lg font-semibold text-gray-900" data-testid="product-modal-modifiers-title">
    Настройте под себя
  </h2>
      <div class="space-y-3" data-testid="modifier-group-4068339f-5a6c-4092-a8fb-2467d0aca42d">
        <!-- Заголовок группы -->
        <div class="flex items-center justify-between">
          <h3 class="font-semibold text-gray-900">
            700мл (4)
          </h3>
          <div class="text-sm text-gray-500">
            Выберите один
          </div>
        </div>
        <!-- Опции модификаторов -->
        <div class="space-y-2">
            <div class="border border-gray-200 rounded-lg p-3 cursor-pointer hover:border-primary-300 transition-colors modifier-option"
                 data-controller="product-modifier"
                 data-action="click->product-modifier#selectOption"
              data-product-modifier-group-id-value="4068339f-5a6c-4092-a8fb-2467d0aca42d"
              data-product-modifier-option-id-value="13771dde-fbd3-4e90-813a-55db3c206a14"
              data-product-modifier-selection-type-value="single"
              data-testid="modifier-option-13771dde-fbd3-4e90-813a-55db3c206a14"
              data-modifier-selected="false">
              <div class="flex items-center justify-between">
                <div class="flex-1">
                  <h4 class="font-medium text-gray-900">700мл.</h4>
                </div>
                <div class="ml-4 flex items-center space-x-2">
                    <span class="inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium bg-green-100 text-green-800" data-modifier-price="390">
                      +390 ₽
                    </span>
                  <!-- Чекмарк для выбранных -->
                  <div class="w-5 h-5 rounded-full border-2 border-gray-300 flex items-center justify-center selected-indicator hidden">
                    <svg class="w-3 h-3 text-white" fill="currentColor" viewBox="0 0 20 20">
                      <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
                    </svg>
                  </div>
                </div>
              </div>
              <!-- Скрытый input для отправки формы -->
                <input type="radio" name="modifier_group_4068339f-5a6c-4092-a8fb-2467d0aca42d" id="modifier_group_4068339f-5a6c-4092-a8fb-2467d0aca42d_13771dde-fbd3-4e90-813a-55db3c206a14" value="13771dde-fbd3-4e90-813a-55db3c206a14" class="hidden modifier-input" />
            </div>
        </div>
      </div>
</div>

            </div>

          

            <div>
              <h2 class="text-lg font-semibold text-gray-900 mb-3">Описание</h2>
              <p class="text-gray-700 leading-relaxed"><p>Наш фирменный напиток с ноткой жасмина</p></p>
            </div>
            <div>
              <h2 class="text-lg font-semibold text-gray-900 mb-3">Состав</h2>
              <p class="text-gray-700 leading-relaxed"><p>молоко, чай зеленый, тапиока</p></p>
            </div>
          <div>
  <h2 class="text-lg font-semibold text-gray-900 mb-4">Отзывы</h2>
  <!-- Список отзывов -->
    <div class="text-center py-8 text-gray-500">
      <p>Пока нет отзывов об этом товаре</p>
    </div>
  <!-- Форма отзыва или приглашение войти -->
    <div class="border-t pt-6">
      <p class="text-gray-500 text-center">
        <a class="text-blue-600 hover:text-blue-800 font-medium" href="/session/new">Войдите в аккаунт</a>
        , чтобы оставить отзыв
      </p>
    </div>
</div>

        </div>
      </div>
    </div>
    <style>
      @keyframes fade-in {
        from { opacity: 0; }
        to { opacity: 1; }
      }

      @keyframes slide-up {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
      }

      .animate-fade-in {
        animation: fade-in 300ms ease-out;
      }

      .animate-slide-up {
        animation: slide-up 300ms ease-out;
      }

      @media (min-width: 768px) {
        @keyframes slide-up-md {
          from { transform: translateY(20px); opacity: 0; }
          to { transform: translateY(0); opacity: 1; }
        }

        .animate-slide-up {
          animation: slide-up-md 300ms ease-out;
        }
      }

      /* Стили для стекинговых модалок */
      .stacked-modal-container {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) {
        position: relative;
      }

      #stacked-modals-container .stacked-modal-container:nth-child(n+2) [data-testid="product-modal-content"] {
        background-color: rgba(0, 0, 0, 0.7);
      }
    </style>
  </div>
</div>
</template></turbo-stream>