<div class="w-full flex">
        <label for="name" class="block uppercase tracking-wide text-black-v2 text-xs font-bold mb-2">List all the Attributes
        </label>
        <span>
            <i class="fas fa-plus-circle h-4 w-4 text-grey-darker" @click="add(k)" v-show="k == inputs.length-1">
            </i>
        </span>
    </div>

    <div class="w-full flex inline-block" v-for="(input,k) in inputs" :key="k">
        <!-- if there's no products for this person -->
        <div v-if="user.products.length === 0" class="flex inline-block w-full">
            <select v-model="inputs.crime_id" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
                <option v-for="products in products">{{ products.brand }} </option>
            </select>
            <div id="input-group" class="ml-4 w-3/5">
                <input type="text" v-model="inputs.name" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Attribute Details" required>
            </div>
            <span>
                <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
                </i>
                <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">
                </i>
            </span>
        </div>
        <div class="w-full inline-block" v-else>
            <div v-for="products in user.products">
                <!-- <p>{{ products.brand }} </p> -->
                <div class="flex inline-block">
                    <select class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal">
                        <option v-for="products in products">{{ products.brand }} </option>
                    </select>
                    <div class="flex inline-block">
                        <div id="input-group" class="ml-4 w-3/5">
                            <input type="text" :value="user.profile.weight_in_kilos" class="hover:bg-grey-lightest bg-grey-lighter w-full mb-2 p-2 leading-normal" id="pin" name="pin" autocomplete="name" placeholder="Crime Details" required>
                        </div>
                        <span class="mr-2">
                            <i class="fas fa-minus-circle" @click="remove(k)" v-show="k || ( !k && inputs.length > 1)">
                            </i>
                            <i class="fas fa-plus-circle" @click="add(k)" v-show="k == inputs.length-1">
                            </i>
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>