# Cart

<snt-cart></snt-cart>

<snt-cart #default="{ items, totalPrice, selectQuantity, selectedPurchase, remove, submit }">
  <div>
    <template v-for="item in items">
      <div :key="`cart-item-${ item.id }`">
        <div>{{ item.name }}</div>
        <div>{{ item.price | toLocaleString }} ฿</div>
        <div v-if="item.displayOnSale">
          {{ item.fullPrice | toLocaleString }} ฿
        </div>
        <div>
          <snt-number-field
            :value="item.quantity"
            :min="1"
            :max="item.available"
            controls
            center
            @input="selectQuantity(item, $event)">
          </snt-number-field>
        </div>
      </div>
    </template>
  </div>
  <div>
    <snt-button
      :to="{ name: 'SalePageCheckout' }"
      :disabled="!selectedPurchase.length"
      depressed
      large
      block
      @click="close()">
      สั่งสินค้า
    </snt-button>
  </div>
</snt-cart>

<snt-cart>
  <template #header>
    <h3>My Store</h3>
  </template>
</snt-cart>

<snt-cart>
  <template #[`no-data`]>
    <h3>No data</h3>
  </template>
</snt-cart>