{% extends "base.html" %}
{% block body %}
    <div class="page page-center">
        <div class="container-tight py-4">
            <div class="text-center mb-4">
                <img src="./statics/img/logo.svg" height="36" alt="">
            </div>
            <form class="card card-md" action="/admin/login" method="post" autocomplete="off">
                <div class="card-body">
                    <h2 class="card-title text-center mb-4">Login to your account</h2>
                    <div class="mb-3">
                        <label class="form-label">Username</label>
                        {% if username_err==true %}
                            <input type="text" class="form-control is-invalid" placeholder="Enter username"
                                   name="username">
                            <div class="invalid-feedback">Username can not be null.</div>
                        {% else %}
                            <input type="text" class="form-control" placeholder="Enter username"
                                   name="username">
                        {% endif %}
                    </div>
                    <div class="mb-3">
                        <label class="form-label">
                            Password
                        </label>
                        <div class="input-group input-group-flat">
                            {% if password_err==true %}
                                <input type="password" class="form-control is-invalid" name="password"
                                       placeholder=" Password"
                                       autocomplete="off">
                                <div class="invalid-feedback">Password can not be null.</div>
                            {% else %}
                                <input type="password" class="form-control" name="password"
                                       placeholder=" Password"
                                       autocomplete="off">
                            {% endif %}
                            <span class="input-group-text">
                            <a href="#" class="link-secondary" title="" data-bs-toggle="tooltip"
                               data-bs-original-title="Show password"><!-- Download SVG icon from http://tabler-icons.io/i/eye -->
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" width="24" height="24" viewBox="0 0 24 24"
                         stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round"
                         stroke-linejoin="round"><path stroke="none" d="M0 0h24v24H0z" fill="none"></path><circle
                            cx="12" cy="12" r="2"></circle><path
                            d="M22 12c-2.667 4.667 -6 7 -10 7s-7.333 -2.333 -10 -7c2.667 -4.667 6 -7 10 -7s7.333 2.333 10 7"></path></svg>
                  </a>
                            </span>
                        </div>
                    </div>
                    <div class="mb-2">
                        <label class="form-check">
                            <input type="checkbox" class="form-check-input">
                            <span class="form-check-label">Remember me on this device</span>
                        </label>
                    </div>
                    <div style="display:block">
                        {% if errinfo!="" %}
                            <span style="color: red">Username or password is error!</span>
                        {% endif %}
                    </div>
                    <div class="form-footer">
                        <button type="submit" class="btn btn-primary w-100">Sign in</button>
                    </div>
                </div>
            </form>
        </div>
    </div>

{% endblock %}
