<div class="row">
    <div class="col-9">
        <div class="d-flex align-items-center mb-2">
            <span class="font-weight-bold">My Custom Items</span>
            <span class="mx-2 text-secondary">|</span>
            <div moe>
                <a href="#" start show>Add</a>
                <div custom-item-form url="/api/sectionTemplateCustomItem/create">
                    <div class="mb-2">
                        <input type="text" placeholder="Label"
                               v-model="newCustomItemLabel"
                               class="form-control form-control-sm label_new_custom_item">
                    </div>
                    <div>
                        <button type="button" class="btn btn-sm btn-primary mr-1"
                                v-on:click.prevent="saveCustomItem(newCustomItemLabel)">Submit</button>
                        <button type="button" class="btn btn-sm btn-default border"
                                v-on:click.prevent="cancelCustomItem()">Cancel</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="row custom-items-container">
            <div class="col-12 col-sm-6 col-lg-4" v-for="(item, itemIndex) in customFields" v-if="!item.other">
                <label class="d-flex align-items-start mb-1">
                    <input type="checkbox" class="mx-0 mt-1"
                           v-model="item.value">
                    <div class="ml-2 pr-3 d-inline-flex">
                        <div class="d-flex">
                            <span class="mr-1 custom-item">@{{ item.label }}</span>
                            <div moe relative no-mask v-show="item.value" >
                                <a href="#" start show>
                                    <i class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
                                </a>
                                <div url="/nop" right>
                                    <div class="mb-2">
                                        <textarea class="form-control form-control-sm ns-custom-comment min-width-200px" v-model="item.comments"></textarea>
                                    </div>
                                    <div class="">
                                        <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
                                    </div>
                                </div>
                            </div>
                            <div moe relative no-mask class="ml-1">
                                <a href="#" start show>
                                    <i class="fa fa-trash-alt text-danger on-hover-opaque"></i>
                                </a>
                                <div custom-item-form url="/nop">
                                    <p class="mb-2 text-nowrap">
                                        Remove this custom item?
                                    </p>
                                    <div class="">
                                        <button type="button" class="btn btn-sm btn-danger" v-on:click.prevent="removeCustomItem(item, itemIndex)" cancel>Yes</button>
                                        <button type="button" class="btn btn-sm btn-default border" cancel>No</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span v-show="item.value && item.comments"
                              v-html="item.comments"
                              class="text-sm text-secondary"></span>
                    </div>
                </label>
            </div>
        </div>
    </div>
    <div class="col-3 border-left">
        <div class="d-flex align-items-center mb-2">
            <span class="font-weight-bold">Other Custom Items</span>
        </div>
        <div class="custom-items-container">
            <div v-for="item in customFields" v-if="item.other">
                <label class="d-flex align-items-start mb-1">
                    <input type="checkbox" class="mx-0 mt-1"
                           v-model="item.value">
                    <div class="ml-2 pr-3">
                        <div>
                            <span class="mr-2">@{{ item.label }}</span>
                            <div moe relative no-mask v-show="item.value" >
                                <a href="#" start show>
                                    <i class="fa-comment" :class="item.comments ? 'fas' : 'far'"></i>
                                </a>
                                <div url="/nop" right>
                                    <div class="mb-2">
                                        <textarea class="form-control form-control-sm ns-custom-comment min-width-200px" v-model="item.comments"></textarea>
                                    </div>
                                    <div class="">
                                        <button type="button" class="btn btn-sm btn-primary" cancel>Close</button>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <span v-show="item.value && item.comments"
                              v-html="item.comments"
                              class="text-sm text-secondary"></span>
                    </div>
                </label>
            </div>
        </div>
    </div>
</div>