<template>
  <div class="saml-auth-container">
    <BaseText>
      {{ $_tr('notYetMember') }}

      <Link :href="registerLink" :inline="false">{{ $_tr('register') }}</Link>
    </BaseText>

    <div class="saml-link mt-l">
      <Title tag="h5">
        {{ $_tr('connectWithTrybaAccount') }}
      </Title>

      <Link :href="samlUrl" :inline="false">
        <Button>{{ $_tr('connect') }}</Button>
      </Link>
    </div>
  </div>
</template>

<script>
import { formatHref } from '@inside-library/helpers/Langs.js'
import { BaseText, Title } from 'inside-collection/atoms.js'
import { Button, Link } from 'inside-collection/components.js'

export default {
  name: 'SamlAuth',
  $_i18nRootPath: 'customs.AUTH.SAML',
  components: {
    BaseText,
    Button,
    Link,
    Title
  },
  data() {
    return {
      samlUrl: '/saml/login'
    }
  },
  computed: {
    registerLink() {
      return formatHref(
        {
          name: 'CheckInLogin'
        },
        this.$_currentLang
      )
    }
  }
}
</script>

<style lang="scss" scoped>
.saml-auth-container {
  .saml-link {
    position: relative;
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: var(--spacing-m);
    padding-top: var(--spacing-l);

    &::before {
      position: absolute;
      top: 0;
      left: 50%;
      width: 60px;
      height: 1px;
      background: var(--color-grey);
      transform: translateX(-50%);
      content: '';
    }
  }
}
</style>
