<template>
  <q-layout view="lHh Lpr lFf">
    <q-header elevated>
      <q-toolbar>
        <q-btn
          flat
          dense
          round
          icon="menu"
          aria-label="Menu"
          @click="leftDrawerOpen = !leftDrawerOpen"
        />

        <q-toolbar-title>
          Elite Dangerous FR
        </q-toolbar-title>
      </q-toolbar>
    </q-header>

    <q-drawer
      v-model="leftDrawerOpen"
      show-if-above
      bordered
      content-class="bg-grey-1"
    >

      <q-list bordered>
        <q-item-label header>Navigation </q-item-label>
        <q-item>
          Status du serveur
          <q-icon style="padding-left: 10px" :color="statusServer(status)" name="fas fa-wifi"/>
        </q-item>
        <q-item v-for="route in routes" :key="route.path"
                :to="{name: (route.name )}">
          <q-item-section v-if="route.meta">
            <q-item-label>{{ route.meta.label }}</q-item-label>
          </q-item-section>
        </q-item>

      </q-list>
    </q-drawer>

    <q-page-container>
      <router-view />
    </q-page-container>
  </q-layout>
</template>

<script>
import routes from 'src/router/routes'
import axios from 'axios'

export default {
  name: 'MainLayout',
  data () {
    return {
      leftDrawerOpen: false,
      routes: routes,
      status: null
    }
  },
  mounted () {
    this.getStatusServer()
  },
  methods: {
    async getStatusServer () {
      await axios.get('https://www.edsm.net/api-status-v1/elite-server')
        .then(response => {
          this.status = response.data.type
        })
    },
    statusServer (type) {
      switch (type) {
        case 'success':
          return 'green'
        case 'warning':
          return 'orange'
        case 'danger':
          return 'red'
        default:
          return 'red'
      }
    }
  }
}
</script>
