<template>
<div id="sidebarDiv">
    <div id="sidebarHeader">
        <img id="headerImage" src="../assets/station.png" alt="Station Icon">
        <div v-on:click="store.setDisplaySelectedStation(false)" id="xButton">X</div>
    </div>

    <div id="sidebarDiv">
        <h2>Station Code: {{ store.selectedStation["StationCode"][0] }}</h2>
        <p id="typeP">Type: {{ store.selectedStation["StationType"][0] }}</p>
        <p id="dateP">Station Position - Long: {{ store.selectedStation["StationLongitude"][0] }} Lat: {{ store.selectedStation["StationLatitude"][0] }}</p>
        <p id="directionP">Description: {{ store.selectedStation["StationDesc"][0] }}</p>
    </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;
}

#sidebarDiv{
    position: absolute;
    height: 80%;
    width: 100%;
    color: rgb(0, 0, 0);
}

#headerImage{
    height: 80%;
    width: auto;
    overflow: hidden;
    position: relative;
    top: 10px;
}

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

#xButton:hover{
    color:red;
}
</style>