<template>
    <div class="Tile" :class="tileClass">
        <i v-if="icon" class="pre-icon" :class="'WMi-'+icon"/>
        <div class="Title">
            <div class="TitleFa Fa">{{ TitleFa }}</div>
            <div class="TitleEn En">{{ TitleEn }}</div>
        </div>
        <v-icon v-if="hasDetail" class="post-icon">WMi-left-open </v-icon>
        <!-- <i v-if="hasDetail" class="WMi-left-open post-icon"></i> -->
    </div>
</template>
<script>
export default {
    props: {
        TitleFa : {default: ' عنوان بخش '},
        TitleEn : {default: ' Section Title '},
        icon : {default: null},
        hasDetail: {default: true},
        tileClass: {default: ''}
    }
}
</script>
<style scoped>
.Tile {
    padding: 1em;
    padding-right: 20px;
    cursor: pointer;
    display: -webkit-inline-flex;
    width: 100%;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-transition: color 1000ms;
    transition: color 1000ms;
    color: #383838;
    text-align: right;
}
.Tile:before {
    content: "";
    position: absolute;
    z-index: -1;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--color-black);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    -webkit-transform-origin: 100% 50%;
    transform-origin: 100% 50%;
    -webkit-transition-property: transform;
    transition-property: transform;
    -webkit-transition: 300ms cubic-bezier(1, 0, 0, 1);
    transition: 300ms cubic-bezier(1, 0, 0, 1);
}
.Tile.orange-theme:before {
    background: var(--color-orange);
}
.Tile.red-theme:before {
    background: var(--color-red);
}
.Tile.cyan-theme:before {
    background: var(--color-cyan);
}

.Tile.orange-theme .pre-icon {
    color: var(--color-orange);
}
.Tile.red-theme .pre-icon {
    color: var(--color-red);
}
.Tile.cyan-theme .pre-icon {
    color: var(--color-cyan);
}

.Tile:hover:before {
    -webkit-transform: scaleX(1);
    transform: scaleX(1);
}
.Tile:hover, .Tile:hover .post-icon,  .Tile:hover .pre-icon, .Tile:hover .TitleEn {
    color: #fff;
}
.Tile .pre-icon {
    padding-left: 5px;
    font-size: 35px;
    opacity: 0.2;
}
.Tile .Title {
    padding-left: 10px;
    margin-right:-30px;
}

.Tile .TitleFa {
    font-size: 16px;
    line-height: 22px;
}
.Tile .TitleEn {
    letter-spacing: 3px;
    line-height: 20px;
    font-size: 10px;
    color: #a29da9;

}
.Tile .post-icon::before {
    margin-top: 0px;
}


.post-icon {
    font-size: 24px !important;
    margin-right: auto;
    color: #888;
}
.Tile:hover .post-icon {
    transform: translateX(-4px);
}
</style>
