<template>
    <v-container fluid>
        <div class="Tile Shadowed Padd-0 WM-Margin-B-10" >
            <wm-breadcrumbs LinkClass="WM-Link-Cyan" :items="breadcrumbItems"></wm-breadcrumbs>
        </div>
        <div class="Tile Shadowed">
            <WM-PartTitle class="WM-Margin-T-20" TitleFa=" افزودن آیتم جدید " TitleEn=" Add a new Item " Color="cyan"></WM-PartTitle>
            <v-layout row wrap>
                 <v-flex class="lg4">
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-justify" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" دسته ی مورد نظر "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex class="lg4">
                     <v-card-text>
                        <v-autocomplete prepend-icon="fas fa-align-right" :items="categories" :filter="customFilter" color="cyan" item-text="name" label=" لطفا دسته ی آیتم را به طور جزئی تر مشخص کنید "></v-autocomplete>
                    </v-card-text>
                </v-flex>
                <v-flex class="lg12"><hr></v-flex>
                <v-flex lg2></v-flex>
                <v-flex lg8>
                     <v-text-field label=" نام آیتم را وارد کنید و یا از بین آیتم های پیشنهادی، آیتم مورد نظر خود را انتخاب کنید" color="cyan" prepend-icon="fas fa-tag" append-icon="fas fa-search"></v-text-field>
                </v-flex>

            </v-layout>
            <v-layout row wrap>

            </v-layout>
        </div>
    </v-container>
</template>



<script>
export default {
    components: {
    },
    data () {
      return {
        hasSaved: false,
        model: null,
        categories: [
            { name: ' تلفن همراه ', abbr: 'FL', id: 1 },
            { name: ' تبلت ', abbr: 'GA', id: 2 },
            { name: ' لپ تاپ ', abbr: 'NE', id: 3 },
            { name: ' کامپیوتر ', abbr: 'CA', id: 4 },
            { name: ' دوربین ', abbr: 'NY', id: 5 }
        ],
        breadcrumbItems: [
            {
                text: '',
                disabled: false,
                href: 'Home',
                icon: 'home'
            },
            {
                text: 'محصولات و خدمات من',
                disabled: false,
                href: 'Items'
            },
            {
                text: 'ثبت آیتم جدید',
                disabled: true,
                href: 'AddItem'
            }
        ]

      }
    },
};
</script>

<style scoped lang="scss">
</style>
