text: const productComponent = {
      template: `
      <div class="row align-items-center h-100">
      <div class="col-4">
          <img v-bind:src="product.imageUrl" class="img-container">
      </div>
  
      <div class="col">
          <div class="align-middle">
              <h4>{{product.name}}</h4>
              <span>---</span>
              <h4>{{product.description}}</h4>
          </div>
      </div>
  
      <div class="col-1">
          <h4>{{product.quantity}}</h4>
      </div>
  
      <div class="col-3">
          <ul>
              <li v-for="store in product.stores" v-bind:key="id">
                  <span v-on:click="increaseQuantity(product.id)">{{store.name}} | {{store.amount}}</span>
              </li>
  
          </ul>
      </div>
  
  </div>
      `,
      props: [
          'product',
          'products'
      ],
      methods: {
          increaseQuantity(productId) {
              console.log(productId);
              const product = this.products.find((p) => {
                  if (p.id == productId) return p;
              });
              product.quantity += 1;
          }
      }
  }
  
  const addProductComponent = {
      template: `
      <div class="row">
                      <input placeholder="Product Name" v-model="prodName"/>
                  </div>
                  <div class="row">
                      <input placeholder="Description" v-model="prodDesc"/>
                  </div>
                  <div class="row">
                      <input placeholder="Store Name" v-model="storeName"/>
                  </div>
                  <div class="row">
                      <input placeholder="Store Price" v-model="storePrice"/>
                  </div>
                  <button v-on:click="addProduct()" class="btn btn-success">Submit</button>
                  
      `,
      props: ['showform', 'products'],
      methods: {
          addProduct(){
              this.$emit('showformchanged', false);
              
              productForm = {
                  id: 4,
                  name: this.prodName,
                  description: this.prodDesc,
                  imageUrl: "./images/milo-img.png", 
                  quantity: 1,
                  stores: [
                    { id: 1, name: this.storeName, amount: this.storePrice },
                  ],
              };
  
              this.products.push(productForm);
              this.prodName = '';
              this.prodDesc = '';
              this.storeName = '';
              this.storePrice = '';
          } 
      }
  }
  
  const productApp = {
      data() {
          return {
              products: products,
              showform: false,
              prodName: '',
              prodDesc: '',
              storeName: '',
              storePrice: ''
          }
      },
      computed: {
          sortedProducts() {
              return this.products.sort((a, b) => {
                  return b.quantity - a.quantity;
              });
          },
      },
      methods: {
          showForm(){
              this.showform = true;
          },
          onShowformChanged (value){
              this.showform = value;
          }
          
      },
      components: {
          'product-component': productComponent,
          'add-product': addProductComponent
      }
  }
  
  const app = Vue.createApp(productApp);
  app.mount('#app');
  
  