<template>
    <div v-if="name == yours" class="card-layout-1">
        <img id="card-icon-1" :src="your_icon" alt="" style="width: 50px;height:50px">
        <div class="card-color-size-1">{{ content }}</div>
    </div>
    <div v-else  class="card-layout-2">
        <div class="card-color-size-2">{{ content }}</div>
        <img id="card-icon-2" :src="my_icon" alt="" style="width: 50px;height:50px">
    </div>
</template>

<script>
export default{
    data(){
        return{
            msg: ''
        }
    },
    props:{
        yours: String,
        content: String,
        name: String,
        your_icon: String,
        my_icon: String,
    },
    computed:{
    }
}


</script>


<style scoped>
.card-layout-1{
    display: flex;
    margin: 10px;
    margin-left: 30px;
    margin-top: 30px;
    /* max-width: 70%; */
}
.card-layout-2{
    display: flex;
    justify-content: flex-end;
    margin: 10px;
    margin-right: 30px;
    margin-top: 30px;
    /* max-width: 70%; */
}
.card-color-size-1{
    white-space: pre-line;
    background-color: rgb(248, 248, 248);
    margin-left: 10px;
    border-radius: 10px;
    border-bottom-left-radius: 0px;
    padding: 10px;
}
#card-icon-1{
    align-self: flex-end;
    border: 2px solid #ff68b8;
    border-radius: 100%;
}
#card-icon-2{
    align-self: flex-end;
    border: 2px solid #ff68b8;
    border-radius: 100%;
}
.card-color-size-2{
    white-space: pre-line;
    background-color: #fcb7dc;
    margin-right: 10px;
    border-radius: 10px;
    border-bottom-right-radius: 0px;
    padding: 10px;
}

</style>