<template>
  <header class="header">
    <div class="secondary-logo">
      <nuxt-link to="https://www.apes-hdf.org" target="_blank">
        <img src="/images/logo/logo_apes.svg" height="50px" alt="Logo APES"/>
      </nuxt-link>
    </div>
    <div class="main-logo">
      <nuxt-link :to="useRoute().name === 'index' ? '' : '/'">
        <img src="/images/logo/main_logo.svg" width="245px" alt="Boussole PLUSS"/>
      </nuxt-link>
    </div>
  </header>
</template>

<style lang="scss" scoped>
.header {
  width: 100%;
  height: 115px;
  margin-bottom: $xxx_medium;
  background-repeat: no-repeat;
  background-image: url("/images/decoration/background.svg");
  background-position: bottom center, 50%;
  background-size: cover;

  .secondary-logo img {
    padding: 12px 0 0 12px;
  }

  .main-logo {
    position: absolute;
    margin-left: auto;
    margin-right: auto;
    top: 40px;
    left: 0;
    right: 0;
    width: 225px;
  }
}
</style>
