<script setup>
  import logoDefault from '/img/logos/logo_orchestre_red.svg'
  import agendaRouge from '@/assets/img/icones/agenda_rouge.svg'
  import ticket from '@/assets/img/icones/ticket_noir.svg'
  import mobile_agenda_icon from '@/assets/img/icones/agenda_blanc_non_opaque.svg'
  import mobile_ticket from '@/assets/img/icones/ticket_blanc.svg'
  const { brand } = useAppConfig()
</script>

<template>
  <HeaderNav burger-color="hamburger_black">
    <template #logo>
      <NuxtLink to="/" aria-label="Accueil">
        <NuxtImg :src="logoDefault" :alt="brand.logoAlt" class="logo-img" />
      </NuxtLink>
    </template>

    <template #agenda-icon>
      <img :src="agendaRouge" alt="icone agenda" />
    </template>
    <template #ticket>
        <img class="img_ticket_desktop" :src="ticket" alt="icone ticket" />
    </template>
    <template #mobile_agenda_icon>
        <img :src="mobile_agenda_icon" alt="icone ticket" />
    </template>

    <template #mobile_ticket>
        <img class="img_ticket_mob" :src="mobile_ticket" alt="icone ticket" />
    </template>

  </HeaderNav>
</template>

<style lang="scss">

  .img_ticket_desktop {
    max-height: 26px;
    margin-top: 4px;
    margin-left: -11px;
  }
  .img_ticket_mob {
    max-height: 31px;
    margin-top: 10px;
    // margin-left: -11px;
  }


</style>
