{% extends 'base.html' %}

{% block title %}Log In | ServerMonitor{% endblock %}

{% block content %}
<div class="flex bg-white shadow-2xl mx-64 my-20 rounded overflow-hidden">
    <div class="container w-1/2 bg-orange-200">
        <div class="relative">
            <img class="object-cover h-full w-full" src="/static/img/Flat-Mountains.svg" alt="">
            <div class="absolute top-0 pl-48 pt-40 text-white">
                    <h1 class="font-bold text-4xl">Hello!</h1>
                    <p class="font-medium">Log in to continue access</p>
                </div>
            
        </div>
    </div>
    <div class="inline w-1/2 p-4">
        <h1 class="pt-10 pl-10 text-3xl font-bold text-gray-800">Log In</h1>
        <form class="p-10" method="POST" action="">
                {{ form.hidden_tag() }}
                <fieldset class="">
                    <div class="flex items-center border-b border-b-2 border-orange-500 py-2">
    
                        {% if form.email.errors %}
                        {{ form.email(class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none") }}
                        <div class="invalid-feedback">
                            {% for error in form.email.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.email(class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none bg-white", placeholder="Email") }}
                    {% endif %}     
    
                    </div>
                    <div class="flex items-center border-b border-b-2 border-orange-500 py-2">
    
                        {% if form.password.errors %}
                        {{ form.password(class="appearance-none bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none") }}
                        <div class="invalid-feedback">
                            {% for error in form.password.errors %}
                            <span>{{ error }}</span>
                            {% endfor %}
                        </div>
                    {% else %}
                        {{ form.password(class="appearance-none pt-4 bg-transparent border-none w-full text-gray-700 mr-3 py-1 px-2 leading-tight focus:outline-none bg-white", placeholder="Password") }}
                    {% endif %}     
                    </div>
                    <div class="pt-4">
                        {{ form.remember(class="") }}
                        {{ form.remember.label(class="text-gray-800 font-medium") }}
                    </div>
                </fieldset>
                <div class="form-group pt-4">
                    {{ form.submit(class="bg-orange-500 hover:bg-orange-400 text-white font-bold py-2 px-4 rounded inline-flex items-center") }}
                    <small class="text-gray-600 hover:text-gray-800">
                        <a class="ml-2" href="{{url_for('users.reset_request')}}">Reset password</a>
                    </small>
                </div>
            </form>
    </div>
</div>

<!-- <div class="mx-auto container shadow-sm bg-white rounded">
    <div class="content-section card-body">
        <form method="POST" action="">
            {{ form.hidden_tag() }}
            <fieldset class="form-group">
                <legend class="border-bottom mb-4">Log in to your Account</legend>
                <div class="form-group">
                    {{ form.email.label(class="form-control-label") }}

                    {% if form.email.errors %}
                    {{ form.email(class="form-control is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.email.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.email(class="form-control form-control") }}
                {% endif %}     

                </div>
                <div class="form-group">
                    {{ form.password.label(class="form-control-label") }}

                    {% if form.password.errors %}
                    {{ form.password(class="form-control is-invalid") }}
                    <div class="invalid-feedback">
                        {% for error in form.password.errors %}
                        <span>{{ error }}</span>
                        {% endfor %}
                    </div>
                {% else %}
                    {{ form.password(class="form-control form-control") }}
                {% endif %}     
                </div>
                <div class="form-check">
                    {{ form.remember(class="form-check-input") }}
                    {{ form.remember.label(class="form-check-label") }}
                </div>
            </fieldset>
            <div class="form-group">
                {{ form.submit(class="btn btn-outline-info") }}
                <small class="text-muted">
                    <a class="ml-2" href="{{url_for('users.reset_request')}}">Reset password</a>
                </small>
            </div>
        </form>
    </div>
</div>
<div class="mx-auto container border-top pt-2">
    <small class="text-muted">
        Need An Account? <a class="ml-2" href="{{ url_for('users.signup') }}">Sign Up</a>
    </small>
    <br>
</div> -->
{% endblock %}