<template>
  <v-app-bar color="#191c2a" style="background: #0d1538">
    <v-container :class="mobile ? 'ms-3' : 'ms-auto me-auto'" style="max-width: 1440px">
      <v-row>
        <v-app-bar-title style="align-self: center">
          <span style="font-size: 20px">
            ALHP Status
            <a
              class="ms-2"
              href="https://somegit.dev/ALHP/ALHP.GO"
              style="color: white; font-size: 25px"
              target="_blank">
              <i class="fa fa-gitea"></i>
            </a>
          </span>
        </v-app-bar-title>

        <build-stats v-if="!mobile" />
      </v-row>
    </v-container>
  </v-app-bar>
</template>

<script lang="ts" setup>
import BuildStats from '@/components/BuildStats.vue'
import { useDisplay } from 'vuetify'

const { mobile } = useDisplay()
</script>

<style scoped></style>
