<div id="product-variables-table" class="wpcfto_generic_field wpcfto_generic_field_html">
  <div class="wpcfto-field-content">
    <table class="wpcfto-table formipay-variations-table">
      <thead>
        <tr>
          <th data-cell="toggle">{{ product_details.variation_table.th_toggle }}</th>
          <th data-cell="name">{{ product_details.variation_table.th_name }}</th>
          <th data-cell="stock">{{ product_details.variation_table.th_stock }}</th>
          
          <th data-cell="weight" v-if="isPhysical">{{ product_details.variation_table.th_weight }}</th>

          <th v-if="showFlatPricing" data-cell="price">{{ product_details.variation_table.th_price }}</th>
          <th v-if="showFlatPricing" data-cell="sale">{{ product_details.variation_table.th_sale }}</th>
          <th v-else data-cell="prices">{{ product_details.variation_table.th_prices_overall }}</th>
          <th class="toggle-column" v-if="!showFlatPricing"></th>
        </tr>
      </thead>
      <tbody v-if="tableRows.length > 0">
        <template v-for="(row, idx) in tableRows">
          <tr :key="row.key" :class="['wpcfto-repeater-single', { 'variation-inactive': !row.active }]">

            <td data-cell="toggle" style="text-align:center;">
              <label class="switch">
                <input type="checkbox" v-model="row.active" />
                <span class="slider"></span>
              </label>
            </td>

            <td data-cell="name">
              <input type="text" v-model="row.name" class="wpcfto-admin-input" readonly :disabled="!row.active" />
            </td>

            <td data-cell="stock">
              <input type="number" v-model.number="row.stock" class="wpcfto-admin-input" min="0" :placeholder="'∞'" style="width:100%;text-align:right;" :disabled="!row.active" />
            </td>

            <td v-if="isPhysical" data-cell="weight">
              <input type="number" v-model.number="row.weight" step="0.01" style="width:100%; text-align:right;" :disabled="!row.active" />
            </td>

            <td v-if="showFlatPricing" data-cell="price">
              <price-input
                :value="defaultEntry(row).regular_price"
                @input="defaultEntry(row).regular_price = $event"
                :currency-symbol="defaultEntry(row).currency.split(':::')[2] || defaultEntry(row).currency.split(':::')[0]"
                :currency-decimal-digits="parseInt(defaultEntry(row).currency_decimal_digits)"
                :disabled="!row.active"
              />
            </td>
            <td v-if="showFlatPricing" data-cell="sale">
              <price-input
                :value="defaultEntry(row).sale_price"
                @input="defaultEntry(row).sale_price = $event"
                :currency-symbol="defaultEntry(row).currency.split(':::')[2] || defaultEntry(row).currency.split(':::')[0]"
                :currency-decimal-digits="parseInt(defaultEntry(row).currency_decimal_digits)"
                :disabled="!row.active"
              />
            </td>

            <td v-else data-cell="prices" style="text-align:center;">
              <span @click="row.expanded = !row.expanded">{{ product_details.variation_table.manual_price_hint }}</span>
            </td>
            <td class="toggle-column" style="text-align:center;" v-if="!showFlatPricing">
              <button v-if="row.prices.length > 0" @click="row.expanded = !row.expanded" class="button-link child-row-toggle" :class="row.expanded ? 'active' : ''" type="button">
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
                  <g fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="1">
                    <circle cx="12" cy="12" r="10" />
                    <path d="M15 12.915S12.79 15.5 12 15.5s-3-2.585-3-2.585M15 8.5s-2.21 2.585-3 2.585S9 8.5 9 8.5" />
                  </g>
                </svg>
              </button>
            </td>
          </tr>

          <tr v-if="!showFlatPricing && row.expanded" :key="row.key + '-details'" class="variation-details-row">
            <td :colspan="isPhysical ? 7 : 6">
                <div class="variation-details-content">
                    <table class="wpcfto-table inner-table" v-if="row.prices.length > 0">
                        <thead>
                            <tr>
                                <th>{{ product_details.variation_table.child_th_currency }}</th>
                                <th>{{ product_details.variation_table.child_th_regular }}</th>
                                <th>{{ product_details.variation_table.child_th_sale }}</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="(priceEntry, p_idx) in row.prices" :key="p_idx">
                                <td>{{ priceEntry.currency.split(':::')[1] }} ({{ priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0] }})</td>
                                <td>
                                    <price-input :value="priceEntry.regular_price" @input="priceEntry.regular_price = $event" :currency-symbol="priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0]" :currency-decimal-digits="parseInt(priceEntry.currency_decimal_digits)" :disabled="!row.active" />
                                </td>
                                <td>
                                    <price-input :value="priceEntry.sale_price" @input="priceEntry.sale_price = $event" :currency-symbol="priceEntry.currency.split(':::')[2] || priceEntry.currency.split(':::')[0]" :currency-decimal-digits="parseInt(priceEntry.currency_decimal_digits)" :disabled="!row.active" />
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p v-else style="padding: 10px; text-align:center;">{{ product_details.variation_table.no_currencies }}</p>
                </div>
            </td>
          </tr>
        </template>
      </tbody>

      <tbody v-else>
        <tr>
          <td :colspan="isPhysical ? 7 : 6" style="text-align:center;color:#8c99a5;">
            {{ product_details.variation_table.no_variations }}
          </td>
        </tr>
      </tbody>
    </table>
    <input type="hidden" name="product_variables" v-model="jsonValue" />
  </div>
</div>