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

if (!defined('ABSPATH'))
{
    exit;
}
?>
<div class="modal-body" v-if="modal.type == 'extra'">
    <div class="row">
        <div class="col-4">
            <label class="form-label">{{ langs.product.attribute_name }} <span class="text-danger">*</span></label>
            <input type="text" class="form-control form-control-sm" v-model="modal.data.attr" :placeholder="langs.product.attribute_name_desc">
        </div>
        <div class="col-4">
            <label class="form-label w-100">&nbsp;</label>
            <button type="button" class="btn btn-sm btn-info waves-effect waves-light" @click="addAttr">{{ langs.product.add_attribute }}</button>
        </div>
    </div>

    <div class="mt-2 pt-2 mb-2 pb-2 d-flex gap-3 w-100 border-top border-bottom justify-content-start align-items-center" v-if="modal.data.attrs.length">
        <div class="position-relative" v-for="(attr, aid) in modal.data.attrs" :key="aid">
            <input type="text" class="form-control form-control-sm" v-model="modal.data.attrs[aid]" :placeholder="langs.product.attr_value_desc">
            <i class="material-icons material-symbols-outlined pdapp-remove-btn" @click="modal.data.attrs.splice(aid, 1)">close</i>
        </div>
    </div>
    <div class="mt-2 d-flex gap-2 w-100 justify-content-between align-items-center">
        <button type="button" class="btn btn-light btn-sm" @click="modal.show = false">{{ langs.cancel }}</button>
        <button type="button" class="btn btn-primary btn-sm" :disabled="modal.data.attr == '' || modal.data.attrs.length == 0 || (typeof modal.data.attrs[0] != 'undefined' && modal.data.attrs[0] == '')" @click="saveAttrs()">{{ langs.save }}</button>
    </div>
</div>