{% include 'registration/login_layout.html' %}
{% load static %}


    <style>
        body {
            margin: 0;
        }
        * {
            box-sizing: border-box;
        }

        .logo-wrap {
            text-align: center;
            padding: 20px;
        }

        .logo-wrap img {
            max-width: 300px;
        }

        .bg-illustration {
            width: 100%;
            min-height: 500px;
            height: 100vh;
            background: url("{% static 'image/user-bg.jpg' %}") no-repeat center center;
            background-size: cover;

        }

        .parent {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .parent>div {
            flex: 1;
        }

        .login {
            padding: 0 15px;
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
        }

        .login .container h1 {
            margin-top: 30px;
            font-size: 30px;

        }

        .login .container .login-form {
            margin-top: 30px;
        }

        .login .container .login-form form input {
            font-size: 16px;
            font-weight: normal;
            background: rgba(57, 57, 57, 0.07);
            margin: 12.5px 0;
            height: 60px;
            border: none;
            padding: 0 20px;
            border-radius: 10px;
            display: block;
            width: 100%;
        }

        .login .container .login-form form button[type=submit],
        .common-btn {
            background: -webkit-linear-gradient(110deg, #2f76b6 0%, #7ccaee 100%);
            background: -o-linear-gradient(110deg, #2f76b6 0%, #7ccaee 100%);
            background: linear-gradient(-20deg, #2f76b6 0%, #7ccaee 100%);
            border: none;
            margin-top: 20px;
            margin-bottom: 20px;
            width: 160px;
            padding: 20px;
            text-transform: uppercase;
            color: white;
            border-radius: 10px;
            font-weight: bold;
            font-size: 20px;
        }

        .login .container .login-form form button[type=submit]:hover, .common-btn:hover {
            background: -webkit-gradient(linear, left bottom, left top, from(#09203f), to(#537895));
            background: -webkit-linear-gradient(bottom, #09203f 0%, #537895 100%);
            background: -o-linear-gradient(bottom, #09203f 0%, #537895 100%);
            background: linear-gradient(to top, #09203f 0%, #537895 100%);
        }


        .login .container .remember-form {
            position: relative;
            margin-top: -30px;
        }

        .login .container .remember-form input[type=checkbox] {
            margin-top: 9px;
        }

        .login .container .remember-form span {
            font-size: 18px;
            font-weight: normal;
            position: absolute;
            top: 32px;
            color: #3B3B3B;
            margin-left: 15px;
        }

        .btn-wrap {
            display: flex;
            flex-wrap: nowrap;

        }

        .btn-wrap a {
            margin-right: 10px;
            text-decoration: none;
            display: inline-block;
            text-align: center;

        }

        @media (max-width:1024px) {
            .bg-illustration {
                min-height: 370px;
                height: auto;
                background: url("{% static 'image/user-bg-mob.jpg' %}") no-repeat center center;

            }

            .parent>div {
                flex: unset;
            }

            .parent {
                display: unset !important;
            }

            .login .container h1 {
                margin: 0;
                font-size: 20px;
            }

            .logo-wrap {
                padding: 0 15px;
            }

            .login .container .login-form {
                margin-top: 15px;
            }

            .login .container .login-form form input {
                height: 58px;
                padding: 0px 22px;
            }

        }

        @media (max-width: 480px) {
            .logo-wrap img {
                max-width: 230px;
            }
            .login .container .login-form form button[type=submit] {
                width: 100%;
            }
            .btn-wrap {
                flex-wrap: wrap;
            }

            .btn-wrap a{
                margin: 10px 0;
                width: 100%;
            }
        }
    </style>


<body>
    <div class="login-wrap">

        <div class="parent">
            <div class="bg-illustration">

            </div>

            <div class="login">
                <div class="logo-wrap">
                    <!--<img src="{% static 'image/Hexagon-infosoft.jpg' %}" alt="logo">-->
                    {% if GET_PASS_IMAGE %}
                        <img src="{% static GET_PASS_IMAGE %}" class="com-logo">
                    {% else %}

                    {% endif %}
                </div>
                <div class="container">
                    <h1>{{function_name}} Login</h1>
                    {% if messages %}
                        {% for message in messages %}
                          <!--<div class="alert alert-danger" role="alert">-->
                          <!--  {{ message }}-->
                          <!--</div>-->
                          <div class="alert
                        {% if 'success' in message.tags %}alert-success alert-dismissible
                        {% elif 'danger' in message.tags %}alert-danger alert-dismissible
                        {% elif 'warning' in message.tags %}alert-warning alert-dismissible
                        {% elif 'info' in message.tags %}alert-info alert-dismissible
                        {% endif %}"
                        role="alert" id="success-alert">
                        {{ message }}
                        <!--<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close">x</button>-->
                      </div>
                        {% endfor %}
                    {% endif %}
                    <div class="login-form">
                        <form method="POST" enctype="multipart/form-data" action="">
                            {% csrf_token %}
                            <input type="hidden" name="user_type" value="{{ function_name }}">
                            {% comment %} <input type="email"  name ="email" placeholder="E-mail Address" required /> {% endcomment %}
                            <input type="number"  name ="employee_code" placeholder="Employee Code" required />
                            <input type="password"  name ="password" placeholder="Password" required />
                            <button type="submit">LOG IN</button>
                            

                            {% if function_name == "Gate Keeper" %}
                                <div class="btn-wrap">                                
                                    <a href="{% url 'admin' %}" class="common-btn">Admin</a>
                                    <a href="{% url 'employee' %}" class="common-btn">Employee</a>
                                    {% comment %} <a href="{% url 'visitors' %}" class="common-btn">Visitor</a> {% endcomment %}
                                </div>
                            {% endif %}
                            {% if function_name == "Admin" %}
                                <div class="btn-wrap">                                
                                    <a href="{% url 'gate_keeper' %}" class="common-btn">Gate Keeper</a>
                                    <a href="{% url 'employee' %}" class="common-btn">Employee</a>
                                    {% comment %} <a href="{% url 'visitors' %}" class="common-btn">Visitor</a> {% endcomment %}
                                </div>
                            {% endif %}
                            {% if function_name == "Visitors" %}
                                <div class="btn-wrap">                                
                                    <a href="{% url 'admin' %}" class="common-btn">Admin</a>
                                    <a href="{% url 'employee' %}" class="common-btn">Employee</a>
                                    {% comment %} <a href="{% url 'gate_keeper' %}" class="common-btn">Gate Keeper</a> {% endcomment %}
                                </div>
                            {% endif %}
                            {% if function_name == "Employee" %}
                                <div class="btn-wrap">                                
                                    <a href="{% url 'admin' %}" class="common-btn">Admin</a>                                    
                                    <a href="{% url 'gate_keeper' %}" class="common-btn">Gate Keeper</a>
                                    {% comment %} <a href="{% url 'visitors' %}" class="common-btn">Visitor</a> {% endcomment %}
                                </div>
                            {% endif %}


                            {% comment %} <div class="btn-wrap">
                                <a href="#" class="common-btn">Admin</a>
                                <a href="#" class="common-btn">Employee</a>
                                <a href="#" class="common-btn">Visitor</a>
                            </div> {% endcomment %}

                        </form>
                    </div>

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

</html>