<template>
  <div class="auth-shell">
    <div class="auth-shell__form-area">
      <div class="auth-shell__bg-mobile" :style="{ backgroundImage: `url(${bgPatternMobile})` }" />
      <div class="auth-shell__form">
        <slot />
      </div>
    </div>
    <div class="auth-shell__pattern">
      <PatternSection :front-image="logoPattern" :bg-image="bgPattern" />
    </div>
  </div>
</template>

<script setup>
import { gallery } from '@/utils/gallery'
import PatternSection from '@/features/auth/components/PatternSection.vue'

const bgPattern = gallery.loginPattern
const bgPatternMobile = gallery.loginPatternMobile
const logoPattern = gallery.loginPatternWithLogo
</script>

<style lang="scss" scoped>
.auth-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100dvh;
  min-height: 100vh;

  @media (min-width: 768px) {
    flex-direction: row;
  }

  &__form-area {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;

    @media (min-width: 768px) {
      flex-basis: 58.3333%;
    }
  }

  &__bg-mobile {
    width: 100%;
    height: 20%;
    background-position: bottom;
    background-position-x: right;
    background-size: cover;
    background-repeat: no-repeat;

    @media (min-width: 768px) {
      display: none;
    }
  }

  &__form {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    justify-content: space-between;
    margin-inline-start: auto;
    width: 100%;
    padding: 0 1.25rem;

    @media (min-width: 640px) {
      padding: 0 0.5rem;
    }

    @media (min-width: 768px) {
      max-width: 300px;
      padding: 0;
    }

    @media (min-width: 1024px) {
      max-width: 400px;
    }

    @media (min-width: 1280px) {
      max-width: 514px;
    }
  }

  &__pattern {
    display: none;

    @media (min-width: 768px) {
      display: block;
      flex-basis: 41.6667%;
    }
  }
}
</style>
