<template>
  <div
    class="hello"
    data-cy="hello-page">
    <div class="about">
      <div class="about__logos logos">
        <a
          href="https://www.hep-verlag.ch/"
          target="_blank">
          <hep-logo-no-claim class="logos__logo" />
        </a>
        <a
          href="https://www.ehb.swiss/"
          target="_blank">
          <ehb-logo class="logos__logo" />
        </a>
      </div>
      <p class="about__text">mySkillbox ist ein Angebot des hep Verlags in
      Zusammenarbeit mit dem Eidgenössischen Hochschulinstitut für Berufsbildung.</p>
    </div>
    <logo class="logo" />
    <div class="login-actions">
      <h2
        class="login-actions__title"
        data-cy="hello-title">Wollen Sie {{ pageTitle }} im Unterricht verwenden?</h2>
      <a
        class="button button--primary button--big actions__submit"
        href="/api/oauth/login/"
        data-cy="oauth-login">Mit hep Konto anmelden</a>

      <div class="login-actions__register register">
        <p>Haben Sie noch kein hep Konto?</p>
        <a
          class="hep-link"
          href="/api/oauth/login/"
          data-cy="oauth-login">Jetzt registrieren</a>
      </div>
    </div>
    <div class="information">
      <p>Was ist ein hep Konto und wie kann ich mich dafür registrieren?</p>
      <a
        class="hep-link"
        href="https://myskillbox.ch/anleitung"
        data-cy="oauth-login">Anleitung anschauen</a>
    </div>
    <div class="links">
      <ul class="links__list">
        <li class="links__list-item">
          <a href="https://myskillbox.ch/angebot">Lizenz kaufen</a>
        </li>
        <li class="links__list-item">
          <a href="https://myskillbox.ch/support">Support</a>
        </li>
        <li class="links__list-item">
          <a href="https://myskillbox.ch/datenschutz">Datenschutz</a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>

  import LoadingButton from '@/components/LoadingButton';
  import pageTitleMixin from '@/mixins/page-title';
  import HepLogoNoClaim from '@/components/icons/HepLogoNoClaim';
  import EhbLogo from '@/components/icons/EhbLogo';
  import Logo from '@/components/icons/Logo';
  import HelloIllustration from '@/components/illustrations/HelloIllustration';

  export default {
    mixins: [pageTitleMixin],
    components: {
      LoadingButton,
      HelloIllustration,
      HepLogoNoClaim,
      EhbLogo,
      Logo
    },

    data() {
      return {
        email: '',
        submitted: false,
        loading: false
      };
    },

  };
</script>

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

  $hello-block-margin: 2*$medium-spacing;

  .hello {
    max-width: 600px;
    margin: 0 auto;
    @include desktop {
      max-width: 600px;
      margin: 0 auto;
    }
  }

  .logo {
    display: block;
    width: 300px;
    margin: $small-spacing auto $hello-block-margin;

    @include desktop {
      display: none;
    }
  }

  .about {
    display: none;
    margin-bottom: $hello-block-margin;

    @include desktop {
      display: block;
    }

    &__text {
      margin-top: $medium-spacing;
      @include regular-text;
    }

    &__logos {
      & a:first-child {
        margin-right: $large-spacing;
      }
    }
  }

  .logos {
    &__logo {
      height: 30px;
    }
  }

  .login-actions {
    @include widget-shadow;
    padding: $medium-spacing;
    margin-bottom: $hello-block-margin;

    &__title {
        font-size: 2.125rem; // 34px
        font-weight: 700;
    }

    &__register {
      margin-top: $large-spacing;

      > p, a {
        @include regular-text;
      }
    }
  }

  .information {
    margin-top: $hello-block-margin;
    > p, a {
      @include regular-text;
    }
  }

  .links {
    margin-top: $hello-block-margin;
    display: flex;

    &__list-item {

      color: $color-silver-dark;

      > a {
        @include regular-text;
      }

      flex-direction: column;
      margin-top: $medium-spacing;

      &:first-child {
        margin-top: 0;
      }

      @include desktop {
        display: inline-block;
        flex-direction: row;

        &:not(:last-child) {
          margin-right: 1rem;
        }
     }
    }
  }

</style>
