<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">
        <div class="w-100 login-form-wrap">
          <div class="d-flex align-center mb-10">
            <img :src="Logoimg" alt="home" width="200" />
          </div>

          <h1 class="text-h3 font-weight-bold text-grey-darken-4 mb-2">Selamat Datang</h1>
          <p class="text-body-1 text-grey mb-7">
            Silakan masuk dengan akun yang telah terdaftar
          </p>

          <v-btn block color="primary" size="large" rounded="pill" class="text-none mb-7 btn-login"
            @click="loginWithKeycloak">
            <v-icon size="16" class="mr-2">mdi-key-variant</v-icon>
            Masuk dengan Keycloak
          </v-btn>

          <div class="d-flex align-center mb-7">
            <v-divider />
            <div class="mx-3 text-caption text-medium-emphasis width-100">Atau</div>
            <v-divider />
          </div>

          <v-form>
            <label class="text-subtitle-2 text-grey-darken-1 mb-2 d-inline-block">Email </label>
            <v-text-field v-model="email" placeholder="Masukkan email" density="comfortable" variant="outlined"
              rounded="pill" hide-details class="mb-5" />

            <div class="d-flex align-center justify-space-between mb-2">
              <label class="text-subtitle-2 text-grey-darken-1">Password</label>
            </div>
            <v-text-field v-model="password" type="password" placeholder="Masukkan password" density="comfortable"
              variant="outlined" rounded="pill" hide-details class="mb-6" />
            <v-btn block color="primary" size="large" rounded="pill" variant="tonal" class="text-none mb-8 btn-login"
              @click="loginWithKeycloak">
              Masuk
            </v-btn>
          </v-form>

          <p class="text-center text-body-2 text-medium-emphasis mb-0">
            &copy; 2026 RSUD Dr. Saiful Anwar Provinsi Jawa Timur.
          </p>
        </div>
      </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>
</template>

<script setup lang="ts">
import { ref } from "vue";
import Logoimg from "/images/logos/logo-farmasi.svg";

definePageMeta({
  layout: "blank"
});

const email = ref("");
const password = ref("");

const loginWithKeycloak = () => {
  window.location.href = "/";
};
</script>
