<template>
  <div id="app">
    <v-app id="inspire">
      <!-- Main Top Navbar -->
      <nav-bar/>

      <!-- Alerts -->
      <v-alert
        :value="alert.message"
        :color="alert.color"
        :icon="alert.icon"
        class="alert"
        transition="scale-transition"
        outline>
        {{ alert.message }}
      </v-alert>

      <!-- Modals -->
      <new-project-modal
        :show-modal="projectModalShown"
        @close-modal="closeModal('project')"/>

      <new-submission-modal
        :show-modal="submissionModalShown"
        @close-modal="closeModal('submission')"/>

      <edit-profile-modal
        :show-modal="profileModalShown"
        @close-modal="closeModal('profile')"/>

      <router-view/>

      <v-footer
        class="footer"
        height="auto">
        <v-card
          flat
          tile
          class=" text-xs-center">
          <v-card-text>
            <span>
              <img
                :src="fixedLogo"
                class="app-icon">
              isabl &copy;2018 version {{ version }} — <strong>by MSK</strong>
            </span>
          </v-card-text>
        </v-card>
      </v-footer>

    </v-app>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

import NavBar from '@/components/base/NavBar'
import EditProfileModal from '@/components/profile/EditProfileModal'
import NewProjectModal from '@/components/projects/NewProjectModal'
import NewSubmissionModal from '@/components/submissions/NewSubmissionModal'

import Settings from '@/utils/settings'
import { CLOSE_MODAL } from '@/store/actions/modals'
import { USER_REQUEST } from '@/store/actions/user'

const { fixedLogo, version } = Settings()

export default {
  components: {
    NavBar,
    EditProfileModal,
    NewProjectModal,
    NewSubmissionModal
  },
  data () {
    return {
      fixedLogo,
      version
    }
  },
  computed: {
    ...mapGetters([
      'alert',
      'isAuthenticated',
      'projectModalShown',
      'profileModalShown',
      'submissionModalShown'
    ])
  },
  created () {
    if (this.isAuthenticated) {
      this.$store.dispatch(USER_REQUEST)
    }
  },
  methods: {
    closeModal (model) {
      this.$store.dispatch(CLOSE_MODAL, model)
    }
  }
}
</script>

<style lang="scss">
#app {
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#inspire {
  background: #f1f1f1;
}
div.alert.v-alert {
  position: fixed !important;
  left: 50%;
  transform: translateX(-50%);
  margin-top: 80px !important;
  background: white;
  z-index: 240;
}
.footer {
  position: fixed;
  bottom: 0;
  right: 0;
  & , &.v-footer, &.v-card {
    background-color: transparent !important;
  }
  div {
    display: table;
  }
  .v-card {
    background: transparent;
  }
  .v-card__text {
    padding-left: 0px;
  }
  span {
    vertical-align: middle;
    display: table-cell;
  }
}
.app-icon {
  margin-left: 40px;
  height: 18px;
  max-width: 18px;
  min-width: 18px;
}
</style>
