<template>
  <footer
    class="default-footer"
    data-cy="page-footer">
    <div class="default-footer__section">
      <div class="default-footer__info">
        <div class="default-footer__who-are-we who-are-we">
          <h5 class="who-are-we__title">Wer sind wir?</h5>
          <p class="who-are-we__text">
            mySkillbox ist ein Angebot des hep Verlags in Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für
            Berufsbildung (EHB)
          </p>
        </div>

        <a
          href="https://www.hep-verlag.ch/"
          target="_blank">
          <hep-logo class="default-footer__logo-hep"/>
        </a>
        <a
          href="https://www.ehb.swiss/"
          target="_blank">
          <ehb-logo class="default-footer__logo-ehb"/>
        </a>

      </div>
    </div>
    <div class="default-footer__section">
      <div class="default-footer__links">
        <a
          href="https://myskillbox.ch/datenschutz"
          target="_blank"
          class="default-footer__link">Datenschutz</a>
        <a
          href="https://myskillbox.ch/impressum"
          target="_blank"
          class="default-footer__link">Impressum</a>
        <a
          href="https://myskillbox.ch/agb"
          target="_blank"
          class="default-footer__link">AGB</a>
        <a
          href="https://myskillbox.ch/support"
          target="_blank"
          class="default-footer__link">Support</a>
      </div>
    </div>
  </footer>
</template>

<script>
  import HepLogo from '@/components/icons/HepLogo';
  import EhbLogo from '@/components/icons/EhbLogo';

  export default {
    components: {
      HepLogo,
      EhbLogo
    }
  };
</script>

<style scoped lang="scss">
  @import "@/styles/_variables.scss";
  @import "@/styles/_mixins.scss";

  .default-footer {
    background-color: $color-silver-light;
    max-width: 100vw;
    overflow: hidden;

    &__section {
      width: 100%;
      border-bottom: $color-silver 1px solid;
      display: flex;
      justify-content: center;
    }

    &__info {
      width: 100%;
      max-width: $footer-width;
      padding: 2*$large-spacing 0;
      display: flex;
      flex-direction: column;

      @include desktop {
        flex-direction: row;
        justify-content: space-between;
      }
    }

    &__who-are-we {
      width: 100%;
      margin-bottom: $large-spacing;

      @include desktop {
        width: 330px;
        margin-bottom: 0;
      }
    }

    &__logo-hep {
      width: auto;
      height: 35px;
      margin-bottom: $large-spacing;

      @include desktop {
        width: 147px;
        margin-bottom: 0;
      }
    }

    &__logo-ehb {
      width: 100px;
      height: 32px;
    }

    &__links {
      width: 100%;
      max-width: $footer-width;
      padding: $large-spacing 0;
      display: flex;
      flex-direction: column;

      @include desktop {
        flex-direction: row;
      }
    }

    &__link {
      @include aside-with-cheese;
      margin-right: $large-spacing;
      margin-bottom: $small-spacing;

      @include desktop {
        margin-bottom: 0;
      }
    }
  }

  .who-are-we {
    &__title {
      @include heading-4;
    }

    &__text {
      @include aside-text;
    }
  }
</style>
