<template>
  <div class="vue_app">
    <div class="full_screen">
      <div class="top_menu" v-if="$route.path !== '/login'">
        <a v-if="$route.path !== '/distillate'" href="#/distillate" class="router-link-exact-inactive router-link-inactive">Distillate</a> 
        <a v-if="$route.path !== '/gasoline'" href="#/gasoline" class="router-link-exact-inactive router-link-inactive">Gasoline</a> 
        <a v-if="$route.path !== '/report'" href="#/report" class="router-link-exact-inactive router-link-inactive">Reports</a> 
        <a v-if="$root.admin && $route.path !== '/admin'" href="#/admin" class="router-link-exact-inactive router-link-inactive">Accounts</a> 
        <!-- <router-link v-if="$route.path !== '/distillate'" to="/distillate">Distillate</router-link>
        <router-link v-if="$route.path !== '/gasoline'" to="/gasoline">Gasoline</router-link>
        <router-link v-if="$route.path !== '/report'" to="/report">Reports</router-link> -->
        <!--
          every AJAX request receives a custom HTTP header called X-ADMIN
          which is used to determine whether the logged-in user is Administrator
        -->
        <!-- <router-link v-if="$root.admin && $route.path !== '/admin'" to="/admin">Accounts</router-link> -->
        <button v-if="$route.path !== '/login'" class="btn_logout" @click="$root.logout()">
          <svg width="32" height="32" viewBox="0 0 26 26" xmlns="http://www.w3.org/2000/svg">
            <path d="M25,13c0-6.6166992-5.3828125-12-12-12S1,6.3833008,1,13c0,3.383606,1.413208,6.4386597,3.673645,8.6222534
              c0.0529175,0.0689087,0.1156006,0.1247559,0.1889648,0.171814C7.0038452,23.7769165,9.8582764,25,13,25
              s5.9961548-1.2230835,8.1373901-3.2059326c0.0733643-0.0470581,0.1360474-0.1029053,0.1889648-0.171814
              C23.586792,19.4386597,25,16.383606,25,13z M13,2.5c5.7900391,0,10.5,4.7104492,10.5,10.5
              c0,2.4549561-0.8532715,4.7108154-2.2702637,6.5008545c-0.6505127-2.0978394-2.5076294-3.7401123-5.0281372-4.4957886
              c1.3735962-0.9940796,2.2720337-2.6046143,2.2720337-4.4244995c0-3.0141602-2.4550781-5.4663086-5.4736328-5.4663086
              s-5.4736328,2.4521484-5.4736328,5.4663086c0,1.8198853,0.8984375,3.4304199,2.2720337,4.4244995
              c-2.5205078,0.7556763-4.3776245,2.3979492-5.0281372,4.4957886C3.3532715,17.7108154,2.5,15.4549561,2.5,13
              C2.5,7.2104492,7.2099609,2.5,13,2.5z M9.0263672,10.5805664c0-2.1870117,1.7822266-3.9663086,3.9736328-3.9663086
              s3.9736328,1.7792969,3.9736328,3.9663086S15.1914063,14.546875,13,14.546875S9.0263672,12.7675781,9.0263672,10.5805664z
              M6.0307617,20.8319702C6.2562256,18.0820313,9.1723633,16.046875,13,16.046875s6.7437744,2.0351563,6.9692383,4.7850952
              C18.1130981,22.4855347,15.6757202,23.5,13,23.5S7.8869019,22.4855347,6.0307617,20.8319702z" fill="#fff"></path>
          </svg>
          &nbsp;
          Logout
        </button>
      </div>
      <router-view></router-view>
    </div>
  	<div class="spinner" v-show="$root.spin_visible>0">
      <svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
        <g fill="#29a5d9">
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(0 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(30 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(60 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(90 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(120 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(150 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(180 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(210 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(240 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(270 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(300 50 50) translate(0 -30)"/>
          <rect x="46.5" y="40" width="7" height="20" rx="5" ry="5" transform="rotate(330 50 50) translate(0 -30)"/>
        </g>
      </svg>
  	</div>
  </div>
</template>

<script>
export default {
  name: "app",
  data: function() {
    var a = {};
    return a;
  }
};
</script>

<style>
.vue_app {
  margin: 0;
}

.spinner {
  z-index: 300;
  position: fixed;
  top: 50%;
  left: 50%;
  height: 100px;
  width: 100px;
  transform: translate(-50%, -50%);
  animation: rot 1.1s infinite linear;
}

@keyframes rot {
  0% {
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(359deg);
  }
}

.btn_logout {
  background-color: transparent;
  color: white;
  border: none;
  cursor: pointer;
}

.btn_logout:hover {
  font-weight: bold;
}
</style>