<template>
    <div>
        <nav class="navbar navbar-expand-sm navbar-my sticky-top mb-4">
            <div class="navbar-brand px-3">
                <i class="fa-brands fa-old-republic fa-lg"></i>
                M5
            </div>
            <span class="navbar-text">
                Login
            </span>
            <ul class="nav justify-content-end ml-auto"></ul>
        </nav>


        <div class="container">
            <div class="row justify-content-center">
                <div class="col-8 col-sm-6 col-md-4 px-3 py-3 border">

                    <form accept-charset="UTF-8" v-on:submit.prevent="createSession">

                        <div class="form-group px-1 py-1">
                            <label for="username">Username:</label>
                            <input id="username" class="form-control" type="text" v-model="username"/>
                        </div>

                        <div class="form-group px-1 py-1">
                            <label for="password">Password:</label>
                            <input id="password" class="form-control" type="password" v-model="password"/>
                        </div>

                        <div class="text-center mt-3 mb-1">
                            <button class="btn btn-primary btn-sm" type="submit">Submit</button>
                        </div>

                    </form>

                </div>
            </div>
        </div>

        <div class="container">
            <div class="row">
                <div class="col mt-5">
                    <hr class="justify-content-sm-center" />
                    <div class="text-center">
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import axios from 'axios'

const username = ref("")
const password = ref("")

function createSession() {
    console.log("data", username.value, password.value)
        axios.post("/api/v1/session/create", {
            username: username.value,
            password: password.value
        })
        .then((response) => console.log(response))
}

</script>

<style lang="scss">
$steel-blue: #4682b4;

.navbar-my {
    background-color: darken($steel-blue, 12%) !important;

}
</style>
