<?php
/*
* Plugin-Name: Product Designer App
* Plugin-URI: https://productdesignerapp.com
* Author: productdesignerapp
* Page: Products
*/

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="row">
    <div class="col-4 col-lg-3 col-xl-2">
        <label class="form-label">{{ langs.product.product_color }}</label>
        <select class="form-select form-select-sm mw-100" disabled>
            <option value="_" :selected="pageAdd.data.attributes.color == '_' ? true : false">{{ langs.no }}</option>
            <option v-for="(color, cid) in pageAdd.data.colors" :value="cid" :selected="pageAdd.data.attributes.color == cid ? true : false">{{ color.title }}</option>
        </select>
    </div>
    <div class="col-4 col-lg-3 col-xl-2">
        <label class="form-label">{{ langs.product.product_size }}</label>
        <select class="form-select form-select-sm mw-100" disabled>
            <option value="_" :selected="pageAdd.data.attributes.size == '_' ? true : false">{{ langs.no }}</option>
            <option value="0" :selected="pageAdd.data.attributes.size == 0 ? true : false">{{ langs.yes }}</option>
        </select>
    </div>
    <div class="col-4 col-lg-3 col-xl-2" v-for="(extra, eid) in pageAdd.data.extras">
        <label class="form-label w-100">{{ langs.product.extra }}</label>
        <button type="button" class="btn btn-sm btn-info waves-effect waves-light w-100 position-relative" disabled>
            <span>{{ extra.title }}</span>
            <i class="material-icons material-symbols-outlined pdapp-remove-btn">close</i>
        </button>
    </div>
    <div class="col-4 col-lg-3 col-xl-2">
        <label class="form-label w-100">&nbsp;</label>
        <a href="javascript:void(0)" class="btn btn-sm w-sm btn-info waves-effect waves-light ms-2">{{ langs.product.add_extra_attribute }}</a>
    </div>
</div>