
<template>
  <div align="center">
    <table :width="width">
      <tr class="header"><td v-if="title1">{{  title1 }}</td><td v-if="title2">{{  title2 }}</td></tr>
      <tr>
        <td width=50%><img :src="path1"></td>
        <td width=50%><img :src="path2"></td>
      </tr>
    </table>
  </div>
</template>

<style scoped>
table {
  border : 1px solid black ;
  border-collapse: collapse;
}
th, td {
  padding: 15px;
  border : 1px solid black ;
  text-align: left;
}

.header {
  background-color:grey ;
  color : white ;
}

img {
  object-fit: contain;
}
</style>

<script>

export default {

  computed : {
    path1 : function() { return "/" + this.me + "/images/" + this.data1 } ,
    path2 : function() { return "/" + this.me + "/images/" + this.data2 }

  } ,

  props : {
    me : String ,
    width : String ,
    title1 : String ,
    title2 : String ,
    data1 : String ,
    data2 : String ,
  } ,

  methods : {


  }
}
</script>