<script setup lang="ts">
import {ref} from 'vue';
import {useLogin} from "@models/session.ts";
import {isMobile} from "@models/globals.ts";
import eye from '@/assets/svg/eye.svg';
import eyeSlash from '@/assets/svg/eye-slash.svg';
import ReadableButton from "@components/readableComponents/ReadableButton.vue";
import ReadableSvg from "@components/readableComponents/ReadableSVG.vue";
import ReadableInput from "@components/readableComponents/ReadableInput.vue";


const username = ref('');
const password = ref('');
const {login} = useLogin();
const showPassword = ref(false);
</script>

<template>
    <div class="container">
        <div class="row justify-content-center">
            <div class="col" :style="isMobile ? '' : 'max-width: 400px'">
                <h1 class="text-center mt-3">Login</h1>
                <form>
                    <div class="mb-2">
                        <label class="form-label" for="username">Username</label>
                        <input class="form-control" id="username" v-model="username" type="text" autocomplete="username"
                               required/>
                    </div>
                    <div class="mb-2">
                        <label class="form-label" for="password">Password</label>
                        <div class="input-group">
                            <ReadableInput class="form-control" id="password" v-model="password"
                                       :type="showPassword ? 'text' : 'password'"
                                       autocomplete="current-password" required style="border-right:0;"/>
                            <button type="button" class="input-group-text border-start-0"
                                    style="cursor:pointer;"
                                    @click="showPassword = !showPassword">
                                <ReadableSvg :svg="eye" :width="20" :height="20"
                                         view-box="0 0 28 28" v-if="!showPassword"/>
                                <ReadableSvg :svg="eyeSlash" :width="20" :height="20"
                                         view-box="0 0 28 28" v-else/>
                            </button>
                        </div>
                    </div>
                    <div class="d-grid">
                        <ReadableButton class="btn btn-submit mt-4" type="submit"
                                    @click.prevent="login(username, password)">
                            Login
                        </ReadableButton>
                    </div>
                </form>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>