<template>
    <div class="login-container">
        <form class="login-form" method="POST" :action="useRuntimeConfig().public.baseUrl + '/realms/' + useRuntimeConfig().public.realmKey + '/protocol/openid-connect/auth?client_id=' + useRoute().query.client_id">
            <div style="display: flex; flex-direction: column; justify-content: center;">
                <h2 class="sso-heading">Sign in with Verifoo</h2>
                <p class="sso-subheading">MavenVault</p>
            </div>
            <div class="field">
                <p>E-Mail</p>
                <input name="email" type="text" value="andreas.j.dinauer@gmail.com">
            </div>
            <div class="field">
                <p>Password</p>
                <input name="password" type="password" value="pw">
            </div>
            <a href="">Forgot password?</a>
            <button class="button" type="submit">Login</button>
        </form>
    </div>
</template>

<script setup lang="ts">
</script>

<style scoped>
.login-container {
    width: 620px;
}
.field {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
}
.login-form {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1.25rem;
    background-color: #f4f4f4;
    padding: 3rem;
    border: 1px solid #dfdfdf;
}
.sso-heading {
    text-align: center;
    display: inline-block;
    margin-bottom: 0.5rem;
}
.sso-subheading {
    text-align: center;
    display: inline-block;
    margin-bottom: 1.5rem;
}
.button {
    background-color: #232323;
    color: white;
    height: 2.5rem;
    outline: none;
    border: none;
    font-size: 1.125rem;
    margin-top: 1.5rem;
}
a {
    color: black;
}
</style>