<script setup lang="ts">
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'
const route = useRoute()
const router = useRouter()

import SimulationBanner from './SimulationBanner.vue'

const searchQuery = ref('')
const popupOpen = ref(false)

// TODO: Add search for site w/ modal popup
const togglePopup = () => {
  popupOpen.value = !popupOpen.value
}
</script>

<template>
  <SimulationBanner />
  <nav>
    <ul>
      <li class="nav-back" :style="{ visibility: route.path !== '/' ? 'visible' : 'hidden' }">
        <button @click="router.back()">← back</button>
      </li>


      <li class="nav-center">
          <a href="/">three60</a>
      </li>
    </ul>
  </nav>
</template>

<style scoped>
nav {
  background: #333;
  color: #fff;
  padding: 0.5rem 1rem;
  margin: 0 0 1rem 0;
}

nav ul {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-back {
  flex: 1;
}

nav ul::after {
  content: '';
  flex: 1;
}

.nav-center a {
  color: var(--theme);
  text-decoration: none;
  transition: color 0.3s ease;
}

.nav-back button {
    background: transparent;
    border: none;
    color: var(--theme-dim, rgba(255, 100, 0, 0.6));
    font-size: 0.8rem;
    cursor: pointer;
    padding: 0;
    transition: color 0.2s;
}

.nav-back button:hover {
    color: var(--theme, rgba(255, 100, 0, 1));
}
</style>