<template>
    <v-row>
        <v-col v-for="item in items" class="image-select" :class="`${size} hidden-sm-and-down pa-1`">
            <div class="item">
                <img class="thumbnail width-full" :src="`/images/Global/Flags/${item.src}.png`"/>
                <div class="name">
                    <div class="content">
                        <div class="Fa"> {{ item.name }} </div>
                        <div class="En"> {{ item.name_en }} </div>
                    </div>
                </div>
                <div class="icon-wrapper"><v-icon class="WMi-ok" color="white"></v-icon></div>
            </div>
        </v-col>
        <v-col xl="4" offset-xl="8" class="hidden-md-and-up">
            <v-card-text>
                <v-autocomplete
                    :items="items"
                    :color="$_color('product')"
                    prepend-icon="WMi-globe"
                    append-icon="WMi-down-open"
                    label=" زبان ترجمه "
                >
                    <template v-slot:selection="data">
                        <div class="color-square" :class="data.item.src"> </div>  {{ data.item.name}}
                    </template>
                    <template v-slot:item="data">
                        <div class="color-square" :class="data.item.src "> </div>  {{ data.item.name}}
                    </template>
                </v-autocomplete>
            </v-card-text>
        </v-col>
    </v-row>

</template>
<script>
    export default {
        props: {
            size: { default: "col-xl-2" },
            items: { default: []},
        },
        data: () => ({
            thumbnail:"images/Business/Items/iPhoneX.jpg",
        }),
    };
</script>
<style lang="scss" scoped>
    .image-select {
    }
    .image-select .item {
        position: relative;
        border: 1px solid transparent;
        transition: 0.2s;
        cursor: pointer;
    }
    .image-select .item .icon-wrapper {
        display: none;
        background-color: var(--color-blue);
        text-align: center;
        justify-content: center;
        color: #fff;
    }
    .image-select .item.selected {
        border: 1px solid var(--color-blue);
    }
    .image-select .item.selected .icon-wrapper {
        display: flex;
        position: absolute;
        right: 0px;
        bottom: 0px;
    }
    .image-select .item .thumbnail {
        position: relative;
    }
    .image-select .item .name {
        display: flex;
        position: absolute;
        width: 100%;
        height: 100%;
        color: #fff;
        right: 0px;
        top: 0px;
        visibility: hidden;
        opacity: 0;
        transition: visibility 0s, opacity 0.2s linear;
        background-color: rgba(0,0,0,0.8);
        justify-content: center;
        align-items: center;
        text-align: center;
    }
    .image-select .item .name .Fa {
        font-size: 18px;
    }
    .image-select .item .name .En {
        font-size: 12px;
        letter-spacing: 5px;
        text-transform: uppercase;
        opacity: 0.8;
    }

    .image-select .item:hover {
        border: 1px solid #2f353b;
        /*padding: 5px;*/
    }
    .image-select .item:hover .thumbnail {
        -webkit-filter: grayscale(0%);
    }
    .image-select .item:hover .name {
        visibility: visible;
        opacity: 1;
        width: 100%;
        height: 100%;
    }

</style>
