<template>
<div id="sidebarDiv">
    <div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">🗙</div>
    <h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
    <div id="sidebarHeader">
        <img id="headerImage" src="../assets/station.png" alt="Station Icon" style="object-fit: contain;">
    </div>

    <div id="sidebarDiv">
        <div id="typeDiv">
          <div id="typeIcon">
            <img id="typeImage" src = "../assets/trainTypeIcon.png">
          </div>
            <p id="typeP"><span style="color:grey; font-size: 14px;">Station Type:</span><br>{{ store.selectedStation["StationType"][0] }}</p>
        </div>

        <div id="positionDiv">
          <div id="positionIcon">
            <img id="positionImage" src = "../assets/locationIcon.png">
          </div>
          <div id="positionParagraphDiv">
            <p id="longP"><span style="color:grey; font-size: 14px;">Longitude:</span><br>{{ store.selectedStation["StationLongitude"][0] }}</p>
            <p id="latP"><span style="color:grey; font-size: 14px;">Latitude:</span><br>{{ store.selectedStation["StationLatitude"][0] }}</p>
          </div>
        </div>
        
        <div id="descriptionDiv">
          <div id="descriptionIcon">
            <img id="descriptionImage" src="../assets/descriptionIcon.png">
          </div>
          <p id="descriptionP"><span style="color:grey; font-size: 14px;">Description:</span><br>{{ store.selectedStation["StationDesc"][0] }}</p>
        </div>
        
    </div>
</div>
</template>

<script>
import { store } from '../store/store'
export default {
    name: "StationSidebar",

    data() {
        return {
            store
        }
    }
}
</script>

<style scoped>
#sidebarHeader{
  position: relative;
  top:0%;
  height: 15%;
  width: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center; 
  background-color: rgb(214, 214, 214);
  box-shadow: 0 0 5px 2px rgb(190, 190, 190);
}

#sidebarDiv{
  position: absolute;
  height: 80%;
  width: 100%;
  color: rgb(0, 0, 0);
  padding-top: 10px;
}

.headerImage{
  object-fit: contain;
  height: 100%;
  width: 100%;
  padding: 10px;
}

#xButton{
    font-size: 80%;
    font-family: Georgia;
    color: rgb(0, 0, 0);
    position: absolute;
    top:10px;
    right:10px;
}

#xButton:hover{
    color:red;
    cursor: pointer;
}

#typeDiv, #positionDiv, #descriptionDiv{
  object-fit: contain;
  background-color: rgb(230, 230, 230);
  height: 12%;
  position: absolute;
  right:0px;
  width:100%;
}

#typeIcon, #positionIcon, #descriptionIcon{
  object-fit: contain;
  background-color: rgb(214, 214, 214);
  width:20%;
  height: 100%;
  position: absolute;
  left:0px;
  display: flex;
  justify-content: center;
}

#positionImage, #descriptionImage{
  object-fit: contain;
  padding-top: 2px; 
  padding-bottom: 2px;
}

#typeP, #longP, #latP, #descriptionP{
  font-size: 16px;
  position: relative;
  bottom: 3px;
  width: 40%;
  left: 22%;
  text-align: left;
}

#positionParagraphDiv{display: flex;}

#latP{left: 3%;}

#typeImage{
  object-fit: contain;
  width: 70%;
}

#positionDiv{top: 16%;}
#descriptionDiv{top: 29.5%;}

@media screen and (max-width: 850px) {
  .headerImage{
  object-fit: contain;
  height: 100%;
  width: 100%;
  padding: 10px;
  }

  #typeImage{
  object-fit: contain;
  width: 50%;
  }

}
</style>
