{% extends 'auth_layout.html' %}

{% block css %}
<style>
    html, body {
        height: 100%;
        margin: 0;
        padding: 0;
        overflow: hidden;
    }
    #app, .v-application, .v-application__wrap {
        height: 100vh;
        min-height: 100vh;
    }
    .auth-image {
        background-image: url('/static/img/auth-bg.webp');
        background-size: cover;
        background-position: center;
        height: 100vh;
    }
    .auth-overlay {
        background-color: rgba(0, 0, 0, 0.5);
        height: 100%;
    }
    @media (max-width: 960px) {
        .auth-image {
            height: 40vh;
        }
    }
</style>
{% endblock %}

{% block content %}
    <div id="app">
        <v-container fluid class="pa-0 ma-0 h-100" style="height: 100vh;">
            <v-row no-gutters style="height: 100vh;">
                <!-- Login Form Column -->
                <v-col cols="12" md="6" class="d-flex align-center justify-center">
                    <v-card width="500" elevation="0" class="mx-auto">
                        <v-card-title>
                            <div class="d-flex align-center ga-3 mb-5">
                                {% include "_brand.html" %}
                                <span class="text-headline-small font-weight-bold">Log in to your account</span>
                            </div>
                        </v-card-title>
                        
                        <v-card-text>
                            {% include "security/_messages.html" %}

                            <!-- Email/Password Form -->
                            <v-form 
                                action="{{ url_for_security('login') }}" 
                                method="post" 
                                id="loginForm" 
                                ref="form"
                            >
                                {{ login_user_form.hidden_tag() }}
                                
                                <v-text-field
                                    label="Email"
                                    name="email"
                                    type="email"
                                    required
                                ></v-text-field>

                                <v-text-field
                                    id="password"
                                    label="Password"
                                    name="password"
                                    type="password"
                                    required
                                ></v-text-field>
                                
                                {% if login_user_form.email.errors or login_user_form.password.errors %}
                                    <v-alert type="error" density="compact" class="mb-4">Invalid email or password!</v-alert>
                                {% endif %}
                                
                                {% if security.recoverable %}
                                <div class="d-flex justify-end mb-4">
                                    <a href="{{ url_for_security('forgot_password') }}" class="text-decoration-none">Forgot password?</a>
                                </div>
                                {% endif %}
                                
                                <v-btn 
                                    block 
                                    color="primary" 
                                    size="large" 
                                    @click="submit" 
                                    class="mb-4"
                                >
                                    Log In
                                </v-btn>
                            </v-form>
                            
                            {% if security.webauthn and security.wan_allow_as_first_factor or config.GOOGLE_AUTH_ENABLED or config.GITHUB_AUTH_ENABLED %}
                            <div class="d-flex align-center my-4">
                                <v-divider></v-divider>
                                <span class="mx-3 text-medium-emphasis text-body-small">or</span>
                                <v-divider></v-divider>
                            </div>

                            <div class="d-flex flex-column gap-3 mb-4">
                                {% if security.webauthn and security.wan_allow_as_first_factor %}
                                <v-btn
                                    variant="outlined"
                                    block
                                    href="{{ url_for_security('wan_signin') }}"
                                    height="48"
                                >
                                    <template v-slot:prepend>
                                        <i class="ti ti-fingerprint" style="font-size: 20px;"></i>
                                    </template>
                                    Sign in with Passkey
                                </v-btn>
                                {% endif %}

                                {% if config.GOOGLE_AUTH_ENABLED %}
                                <v-btn
                                    variant="outlined"
                                    block
                                    href="{{ url_for('public.google_login') }}"
                                    class="mb-2"
                                    height="48"
                                >
                                    <template v-slot:prepend>
                                        <svg width="18" height="18" viewBox="0 0 17 16" fill="none" xmlns="http://www.w3.org/2000/svg" class="mr-2">
                                            <path d="M17 8.18371C17 7.63989 16.9551 7.09314 16.8591 6.55814H9.16046V9.63879H13.5691C13.3862 10.6324 12.7983 11.5113 11.9376 12.0698V14.0687H14.5678C16.1123 12.6754 17 10.6177 17 8.18371Z" fill="#4285F4"></path>
                                            <path d="M9.16042 16C11.3617 16 13.2182 15.2916 14.5707 14.0687L11.9406 12.0698C11.2088 12.5578 10.2641 12.8341 9.16342 12.8341C7.03409 12.8341 5.22865 11.4261 4.58085 9.53299H1.8667V11.5936C3.25227 14.2951 6.07438 16 9.16042 16V16Z" fill="#34A853"></path>
                                            <path d="M4.57786 9.53298C4.23596 8.53941 4.23596 7.46353 4.57786 6.46996V4.40933H1.8667C0.709065 6.66985 0.709065 9.33309 1.8667 11.5936L4.57786 9.53298V9.53298Z" fill="#FBBC04"></path>
                                            <path d="M9.16042 3.16589C10.3241 3.14825 11.4487 3.57743 12.2914 4.36523L14.6217 2.0812C13.1462 0.72312 11.1878 -0.0235267 9.16042 -1.02057e-05C6.07438 -1.02057e-05 3.25227 1.70493 1.8667 4.40932L4.57785 6.46995C5.22265 4.57394 7.03109 3.16589 9.16042 3.16589V3.16589Z" fill="#EA4335"></path>
                                        </svg>
                                    </template>
                                    Continue with Google
                                </v-btn>
                                {% endif %}

                                {% if config.GITHUB_AUTH_ENABLED %}
                                <v-btn
                                    variant="outlined"
                                    block
                                    href="{{ url_for('public.github_login') }}"
                                    height="48"
                                >
                                    <template v-slot:prepend>
                                        <svg width="18" height="18" viewBox="0 0 16 16" version="1.1" class="mr-2">
                                            <path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"></path>
                                        </svg>
                                    </template>
                                    Continue with GitHub
                                </v-btn>
                                {% endif %}
                            </div>
                            {% endif %}

                            {% if security.registerable %}
                            <div class="text-center mt-6">
                                <span class="text-medium-emphasis">New to {{ config.APP_NAME }}? </span>
                                <a href="{{ url_for_security('register') }}" class="text-decoration-none">Sign up</a>
                            </div>
                            {% endif %}
                        </v-card-text>
                    </v-card>
                </v-col>
                
                <!-- Image Column -->
                <v-col cols="12" md="6" class="auth-image d-none d-md-block">
                    <v-container fluid class="auth-overlay pa-0 ma-0">
                        <v-row align="center" justify="center" style="height: 100vh;">
                            <v-col cols="12" class="text-center">
                                <div class="text-display-large font-weight-bold text-white">{{ config.APP_TAGLINE }}</div>
                                {% if config.APP_DESCRIPTION %}<p class="text-body-large text-white mt-4">{{ config.APP_DESCRIPTION }}</p>{% endif %}
                            </v-col>
                        </v-row>
                    </v-container>
                </v-col>
            </v-row>
        </v-container>
    </div>
{% endblock %}

{% block js %}
    <script>
        const {createApp} = Vue;
        const {createVuetify} = Vuetify;
        const vuetify = createVuetify(config.vuetifyConfig);

        const app = createApp({
            data() {
                return {
                    menu: null,
                    errors: '',
                    email: "",
                    password: ""
                };
            },
            methods: {
                submit() {
                    document.getElementById('loginForm').submit();
                }
            },
            delimiters: ['${', '}']
        });

        app.use(vuetify).mount('#app');
    </script>
{% endblock %}