{% extends "base.html" %}
{% load static %}
{% block title %}Login{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/login.css' %}">
{% endblock %}

{% block content %}
<div class="login-container d-flex align-items-center min-vh-100">
    <div class="modal modal-sheet position-static d-block p-4 py-md-5" tabindex="-1" role="dialog" id="modalSignin">
        <div class="modal-dialog modal-dialog-centered">
            <div class="modal-content rounded-4 shadow">
                <div class="modal-header p-5 pb-4">
                    <img src="{% static 'img/Acouspin_Logo.png' %}" class="mx-auto d-block" width="150" alt="Acouspin Oy">

                    <!-- <h5 class="modal-title">Signin</h5> -->
                </div>
                <div class="modal-body">
                    
                    <form id="login-form">
                        <div class="mb-3">
                            <label for="UserName" class="form-label">Username</label>
                            <input type="text" class="form-control" id="username" placeholder="Your Acouspin username" aria-describedby="Insert you user name without spaces" name="username" required>
                            <div id="UserNameHelp" class="form-text">Limited tries.</div>
                        </div>
                        <div class="mb-3">
                            <label for="UserNamePassword" class="form-label">Password</label>
                            <input type="password" class="form-control" id="password" placeholder="Password" required>
                        </div>
                        
                        
                        <div class="d-grid gap-2 d-md-flex justify-content-md-end py-3">
                            <button type="submit" class="btn btn-gradient me-md-2">
                                Login&nbsp;<i class="bi bi-box-arrow-in-right ps-1"></i>
                            </button>
                        </div>
                    </form>
                    
                    <p id="error-msg" style="color: red;"></p>
                    <div class="modal-footer">
                        <p class="text-end font-credentials"> by Daniel Meneses</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
    

{% endblock %}

{% block extra_js %}
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.5/dist/js/bootstrap.bundle.min.js" integrity="sha384-k6d4wzSIapyDyv1kpU366/PK5hCdSbCRGRCMv+eplOQJWyd1fbcAu9OCUj5zNLiq" crossorigin="anonymous"></script>
<script src="{% static 'js/login.js' %}"></script>
{% endblock %}