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

<!-- Begin page content -->
<main class="container-fluid h-100">
    <div class="row h-100 overflow-auto">
        <div class="col-12 text-center mb-auto px-0">
            <header class="header">
                <div class="row">
                    <div class="col-auto"></div>
                    <div class="col">
                        <div class="logo-small">
                            <img src="{{ profil.logo.url }}" alt="">
                            <h5>{{ profil.nama_faskes }}</h5>
                        </div>
                    </div>
                    <div class="col-auto"></div>
                </div>
            </header>
        </div>
        <div class="col-10 col-md-6 col-lg-5 col-xl-3 mx-auto align-self-center text-center py-4">
            <h1 class="mb-4 text-color-theme">Masuk</h1>
            {% for message in messages%}
            <br><br><h4>{{message}}</h4>
            {% endfor %}
            <br><br><br>
            <form class="was-validated needs-validation" action="{% url 'postlogin' %}" method="post">
                {% csrf_token %}
                <div class="form-group form-floating mb-3 is-valid">
                    <input type="text" class="form-control" value="" name="username" id="email" placeholder="Username">
                    <label class="form-control-label" for="email">Username</label>
                </div>

                <div class="form-group form-floating is-invalid mb-3">
                    <input type="password" class="form-control" name="password" id="password" placeholder="Password">
                    <label class="form-control-label" for="password">Password</label>
                    <button type="button" class="text-danger tooltip-btn" data-bs-toggle="tooltip"
                            data-bs-placement="left" title="Masukan Password Dengan Benar dan Tepat" id="passworderror">
                        <i class="bi bi-info-circle"></i>
                    </button>
                </div>

                <button type="submit" class="btn btn-lg btn-default w-100 mb-4 shadow">
                    Masuk
                </button>
            </form>
        </div>
    </div>
</main>

{% endblock %}