{% load static %} 
{% include 'web/auth/header.html' %}
    <div class="container">

        <!-- Outer Row -->
        <div class="row justify-content-center">

            <div class="col-xl-10 col-lg-12 col-md-9">

                <div class="card o-hidden border-0 shadow-lg my-5">
                    <div class="card-body p-0">
                        <!-- Nested Row within Card Body -->
                        <div class="row">
                            
                            <div class="col-md-4">

                                
                            </div>
                            <div class="col-md-4">
                                <div class="py-5 text-center">
                                    <div class="text-center">
                                        <img src="{% static 'Images/assets/logo.png' %}" style="text-align:center; width:85px; height:85px;" class='my-2'/>
                                        <h1 class="h4 text-gray-900 mb-4">Welcome To MFAH!</h1>
                                    </div>
                                    {% include 'web/message.html' %}
                                    <form method="POST" class="user" id="add_login">
                                        {% csrf_token %}

                                        {% comment %} +++++++++++++++++++++++++++++ {% endcomment %}
                                       
                                        <div class="form-group">
                                            {{ forms.username }}
                                        </div>

                                        <div class="form-group" id="row">
                                            {{ forms.password }}
                                            <i class="far fa-eye" id="togglePassword" style="margin-left: -30px; cursor: pointer;"></i>
                                        </div>
                                        {% if request.get_host == 'admin.mfahmagazine.net:8000' %}
                                            <input type="hidden" name="roles" value="admin"> 
                                        {% elif request.get_host == 'publisher.mfahmagazine.net:8000' %} 
                                            <input type="hidden" name="roles" value="publisher">                           
                                        {% endif %} 
                                        {% comment %} ++++++++++++++++++++++++++++++++++ {% endcomment %}

                                        <div class="form-group">
                                            <input type="submit" name="submit" id="submit" class="fbtn btn-primary btn-user btn-block" value="Sign In"/>
                                        </div>

                                        
                                        <hr>
                                        <!-- <a href="index.html" class="btn btn-google btn-user btn-block">
                                            <i class="fab fa-google fa-fw"></i> Login with Google
                                        </a>
                                        <a href="index.html" class="btn btn-facebook btn-user btn-block">
                                            <i class="fab fa-facebook-f fa-fw"></i> Login with Facebook
                                        </a> -->
                                    </form>
                                   
                                    <div class="text-center">
                                        <a class="small" href="{% url 'web:forgot_password' %}" style="font-size:15px;">Forgot Password</a>
                                    </div>
                                    
                                    <!--Check Admin or Publisher-->
                                    {% if request.get_host == 'publisher.mfahmagazine.net:8000' %}
                                    <div class="text-center">
                                        <a class="small" href="{% url 'web:user_register' %}"  style="font-size:15px;">Create an Account</a>
                                    </div>
                                    {% endif %}
                                    <!--close admin or Publisher-->
                                </div>
                            </div>
                            <div class="col-md-4"></div>
                        </div>
                    </div>
                </div>

            </div>

        </div>

    </div>
    <style>
        #submit{
        border: none;
        }
        #row{
            display: flex;
            align-items: center;
        }
        #togglePassword{
            margin-right:-260px;
        }
        #id_username{
            width:100%;

        }
        #id_password{
            width:100%;
        }
        .error{
            width: 100%;
            padding: 10px;
        }
    </style>
    {% include 'web/auth/footer.html' %}
    <script>
        const togglePassword = document.querySelector('#togglePassword');
        const password = document.querySelector('#id_password');

        togglePassword.addEventListener('click', function (e) {
            // toggle the type attribute
            const type = password.getAttribute('type') === 'password' ? 'text' : 'password';
            password.setAttribute('type', type);
            // toggle the eye slash icon
            this.classList.toggle('fa-eye-slash');
        });
    </script>
    {% comment %} <script src="https://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
            <script type="text/javascript">
                $("#add_login").validate({
                    rules:{
                        username:{
                            required:true,
                        },
                        password:{
                            required:true,
                        },
                    }
                });
            </script>

            <style>
                #add_login .error{
                    font-size: 14px;
                    color: red;
                }
            </style> {% endcomment %}