<template>
  <div class="header">
    <h1>
      <router-link :to="{ name: 'home' }">
        <img class="logo" src="/assets/upend.svg" alt="UpEnd logo" />
        UpEnd
      </router-link>
    </h1>
    <sl-input placeholder="Search" v-sl-model:searchQuery>
      <sl-icon name="search" slot="prefix"></sl-icon>
    </sl-input>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "Header",
  data() {
    return {
      searchQuery: "",
    };
  },
  watch: {
    searchQuery() {
      this.$router.replace({ name: "search", query: { q: this.searchQuery } });
    },
  },
});
</script>

<style scoped lang="scss">
.header {
  display: flex;
  align-items: center;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--foreground);
  margin-bottom: 0.5rem;

  background: var(--background);

  h1 {
    font-size: 14pt;
    font-weight: normal;
    margin: 0;

    a {
      display: flex;
      align-items: center;

      color: var(--foreground);
      text-decoration: none;
      font-weight: normal;

      img {
        margin-right: 0.5em;
      }
    }
  }

  .logo {
    display: inline-block;
    height: 1.5em;

    @media (prefers-color-scheme: dark) {
      filter: invert(1);
    }
  }

  sl-input {
    margin-left: 1em;
    flex-grow: 1;
  }
}
</style>
