<template>
    <div class="btn-timeline">
        <v-icon size="26" :style="type == 'right' ? 'order:1;' : ''">
            {{type == 'right' ? '$next' : '$prev'}}
        </v-icon>
        <div class="icons" :style="type == 'right' ? 'order:0;' : ''" v-if="btnsWidth >= 100">
            &nbsp;
            <div class="timeline-icon" v-for="btn in elements" :key="'btn_'+btn.id" :style="getItemStyle(btn)">
                <v-img :src="btn.icon"></v-img>
            </div>
        </div>
        <!-- <svg xmlns="http://www.w3.org/2000/svg" :class="type"  viewBox="0 0 24 24">
            <path class="arrow" d="M17 5h-17v14h17l7-7z"/>
        </svg> -->
    </div>
</template>
<script>
export default {
    name:"TimelineButton",
    props:['type', 'elements', 'btnsWidth'],
    methods: {
        getItemStyle: function(btn){
            return "background-color:"+btn.color+";"
        }
    },
}
</script>
<style lang="scss">
    .btn-timeline {
        display:flex;
        justify-content:space-between;
        align-items:center;
        flex-wrap:nowrap;
        width:100%;
        cursor:pointer;
        .icons {
            display:flex;
            justify-content:center;
            align-items:center;
            flex-wrap:wrap;
            .timeline-icon {
                width:25px;
                height:25px;
                padding:3px;
                border-radius:50%;
                margin: 3px;
            }
        }
    }
    
    .btnTime {
        height:50px;
        line-height:50px;
        vertical-align:middle;
        text-align:center;
        padding:0 10px;
        color:#000;
        background-color:#EEE;
        width:calc(100% - 20px - 10%);
        position:relative;
        display:flex;
        align-items:center;
        justify-content:center;
        cursor:pointer;
        &.left {
            &:after {
                position:absolute;
                left:-20px;
                content:" ";
                width: 0px;
                height: 0px;
                border-style: solid;
                border-width: 25px 0 25px 20px;
                border-color: transparent transparent transparent #EEE;
                transform:rotate(180deg);
            }
        }
        &:hover {
            background-color:#DDD;
            &.left {
                 &:after {
                     border-color: transparent transparent transparent #DDD;
                 }
            }
        }
        
    }
</style>