{% extends 'front/base.html.twig' %}

{% block title %}{{ Globals.getCompany().name }} | NOS PACKS{% endblock %}

{% block stylesheets %}
  {{ parent() }}
  <link rel="stylesheet" href="{{ asset('front/assets/css/product-card.css') }}">
  <link rel="stylesheet" href="{{ asset('front/assets/css/listing.css') }}">
{% endblock %}


{% block body %}
<main class="main" id="app" v-cloak>
  <section class="mt-30 mb-50">
    <div class="container">
      <h3 class="mb-4">Nos packs</h3>

      <div class="row g-3">
        <div class="col-md-4" v-for="p in visiblePacks" :key="p.card_key || p.id">
          <div class="card-product">
            <div class="card-product-media" style="--img-aspect: 0.8;">
              <img :src="imgUrl(p.display_picture || p.picture)"
                  :alt="p.name"
                  @click="goToPackConfig(p)"
                  style="cursor:pointer;">
              <h3 class="home-card-title product-name">${ p.name }</h3>
            </div>
            <div class="card-product-body">
              <div class="small text-muted mb-1">${ p.reference || '' }</div>
              <div class="product-price">
                <div class="price-current">
                  <span class="price-value">${ fmt(p.final_price_ttc) } TND</span>
                  <span class="price-meta" v-if="Number(p.remise||0) > 0">
                    <span class="original-price">${ fmt(p.price_ttc) } TND</span>
                    <span class="discount-flag">-${ Number(p.remise||0).toFixed(2) }%</span>
                  </span>
                </div>
              </div>
              <div class="color-swatches" v-if="p.swatches && p.swatches.length">
                <button v-for="(c, idx) in p.swatches.slice(0, 5)"
                        :key="c.id || idx"
                        type="button"
                        class="color-swatch"
                        :title="c.name"
                        :style="{ backgroundColor: (c.code && c.code.startsWith('#')) ? c.code : '#e5e7eb' }"
                        @click.prevent="goToPackConfig(p, c)">
                </button>
                <button v-if="p.swatches.length > 5"
                        type="button"
                        class="more-colors"
                        @click.prevent="goToPackConfig(p, c)">
                  +${ p.swatches.length - 5 } couleurs
                </button>
              </div>

              <button class="btn btn-dark btn-sm mt-2" @click="goToPackConfig(p)">Configurer ce pack</button>
            </div>
          </div>
        </div>
      </div>



    </div>
  </section>
</main>
{% endblock %}

{% block javascripts %}
  {{ parent() }}
  <script>
    window.PACK_DEFAULT_MODE = '{{ defaultMode|default('product') }}';
  </script>
  <script src="{{ asset('front/assets/scripts/pages/packProducts.js') }}"></script>
{% endblock %}