<template>
  <header class="mb-3">
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <div class="container-fluid">
        <router-link :to="{ name: 'Home' }" class="navbar-brand"
          >KTU SA Problemų sprendimo sistema</router-link
        >
        <button
          class="navbar-toggler"
          type="button"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
          aria-controls="navbarNav"
          aria-expanded="false"
          aria-label="Toggle navigation"
        >
          <span class="navbar-toggler-icon"></span>
        </button>
        <div
          class="collapse navbar-collapse"
          :class="{ show: isExpanded }"
          id="navbarNav"
        >
          <ul class="navbar-nav me-auto">
            <li class="nav-item">
              <router-link :to="{ name: 'Home' }" class="nav-link"
                >Pagrindinis</router-link
              >
            </li>
            <li class="nav-item">
              <a href="/swagger" class="nav-link">Swagger UI</a>
            </li>
          </ul>
          <div class="navbar-nav">
            <span v-if="$store.getters['auth/isValid']" class="navbar-text"
              >Prisijungta kaip {{ $store.getters['auth/email'] }}</span
            >
            <div v-else class="nav-item">
              <a :href="$store.getters['auth/loginUrl']" class="nav-link"
                >Prisijungti</a
              >
            </div>
          </div>
        </div>
      </div>
    </nav>
  </header>
</template>

<script>
export default {
  name: 'NavMenu',
  data() {
    return {
      isExpanded: false,
    }
  },
  methods: {
    collapse() {
      this.isExpanded = false
    },

    toggle() {
      this.isExpanded = !this.isExpanded
    },
  },
}
</script>
