{% extends 'wgcomm/base.html' %}

{% block title %}
    Door Control Management
{% endblock %}


{% block main_content %}
    <div class="container-login100">
        <div class="wrap-login100 p-0">
            <div class="card-body">
                <form class="login100-form validate-form" action="{{ url_for('wgcomm.web_login') }}" method="post">
                    <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
                    <div class="wrap-input100 validate-input" data-bs-validate="need input username">
                        <input class="input100" type="text" name="operatorname" placeholder="user">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
							<i class="zmdi zmdi-pin-account" aria-hidden="true"></i>
						</span>
                    </div>
                    <div class="wrap-input100 validate-input" data-bs-validate="need input password">
                        <input class="input100" type="password" name="password" placeholder="Password">
                        <span class="focus-input100"></span>
                        <span class="symbol-input100">
											<i class="zmdi zmdi-lock" aria-hidden="true"></i>
										</span>
                    </div>
                    {% with messages = get_flashed_messages() %}
                        {% if messages %}
                            <div class="text-end pt-1">
                                <ul>
                                    {% for message in messages %}
                                        <li class="text-danger">{{ message }}</li>
                                    {% endfor %}
                                </ul>
                            </div>
                        {% endif %}
                    {% endwith %}

                    <div class="container-login100-form-btn">
                        <button class="login100-form-btn btn-primary" id="submit-btn">Login</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
{% endblock %}