<template>
  <v-container fluid class="pa-0 fill-height login-page">
    <v-row no-gutters class="fill-height w-100">
      <v-col cols="12" md="6" class="d-flex align-center justify-center login-form-panel">
        <auth-login-form />
      </v-col>

      <v-col cols="12" md="6" class="d-flex align-center justify-center px-8 px-md-12 right-panel bg-primary">
        <div class="right-panel-content">
          <!-- Background Image -->
          <auth-login-image class="hero-image" />

          <div class="feature-grid mb-6">
            <div class="feature-pill">
              <v-icon color="white" size="18" class="mr-2">mdi-login</v-icon>
              Integrated with keycloak
            </div>
            <div class="feature-pill">
              <v-icon color="white" size="18" class="mr-2">mdi-lock</v-icon>
              Secure Authentication
            </div>
          </div>
        </div>
      </v-col>
    </v-row>
  </v-container>
  <shared-app-snackbar />
</template>

<script setup lang="ts">

definePageMeta({
  layout: "blank"
});
</script>
