{% extends 'crm/base.html' %}
{% load static %}
{% block extra_body_class %}squeeze-bg{% endblock extra_body_class %}
{% block title %}
    Login
{% endblock %}

{% block container %}
    <div data-uk-grid id="login" v-cloak>
        <div class="uk-width-1-2@m uk-flex uk-flex-center uk-flex-middle uk-flex-column flex-card">
            <div class="uk-padding-small">
                <img src="{% static 'crm/images/ccs-logo-1-1-2.png' %}" alt="" class="uk-display-inline uk-margin-small-right margin-bottom-medium">
                <span class="srm-page-heading font-26 uk-display-inline uk-margin-small-left">Cloud Custom Solutions CRM</span>
            </div>

            {% if request.GET.activation and request.GET.activation == 'success' %}
                <div class="uk-alert-success" uk-alert>
                    <a class="uk-alert-close" uk-close></a>
                    <p>Account Activation Success, Please Login Now!</p>
                </div>
            {% endif %}
            {% if request.GET.activation and request.GET.activation != 'success' %}
                <div class="uk-alert-danger" uk-alert>
                    <a class="uk-alert-close" uk-close></a>
                    <p>Account Activation Failed, Please contact support about this.</p>
                </div>
            {% endif %}
            {% if request.GET.new_password %}
                <div class="uk-alert-success" uk-alert>
                    <a class="uk-alert-close" uk-close></a>
                    <p>Please login with your new password!</p>
                </div>
            {% endif %}

            <div class="uk-card uk-box-shadow-small srm-white-background srm-auth-card uk-padding-medium">
                <h1 class="uk-margin-small-top uk-text-center font-26">Login</h1>
                <div class="uk-alert uk-alert-danger" v-if="isError" data-uk-alert>
                    <div>[[ errors[0] ]]</div>
                </div>
                <form id="loginForm" action="{{ request.absolute_uri }}" @submit.prevent="handleLogin" method="post">
                    <div class="srm-form-group">
                        <label id="email-label">E-mail</label><span id="error-msg" class="uk-text-danger uk-hidden">Please enter a valid e-mail address.</span>
                        <input type="email" id="email" name="email" v-model="login_data.email" class="srm-input" placeholder="sasha@burton.io" required>
                    </div>

                    <div class="srm-form-group">
                        <label>Password</label><span id="error-msg"class="uk-text-danger uk-hidden">Please check your password.</span>
                        <input type="password" name="password" v-model="login_data.password" class="srm-input" placeholder="supermegapassword">
                    </div>
                    <div class="uk-flex uk-flex-between@m">
                    <span>
                        <input type="checkbox" class="uk-checkbox srm-checkbox uk-margin-small-right">
                        Remember me
                    </span>
                        <a href="{% url 'srm:users:reset_pass' %}">Forgot Password ?</a>
                    </div>

                    <div class="srm-form-group uk-text-center uk-margin-medium-top">
                        <button type="submit" id="validate" class="crm-button-large srm-button srm-button-primary-outline">Login</button>
                    </div>
                </form>
            </div>

            <div class="uk-text-center uk-margin">
                Don’t have an account? <a href="{% url 'srm:users:register' %}"> Sign up now.</a>
            </div>

        </div>
        <div class="uk-width-1-2@m  uk-flex-middle uk-flex-column flex-card2 uk-position-relative">
            <div class="uk-inline ">
                <div class="uk-border-circle squeeze1">
                    <div class="uk-flex uk-flex-center img-squeeze">
                        <div><img src="{% static 'crm/images/2.png' %}" alt="" class=""></div>
                    </div>
                    <div class="uk-flex uk-flex-center uk-margin-small-top">
                        <div><span class="squeeze-text">Multichannel</span></div>
                    </div>
                    <div class="uk-flex uk-flex-center">
                        <div><span class="squeeze-text">Communication</span></div>
                    </div>
                </div>
            </div>
            <div class="uk-inline pos1">
                <div class="uk-border-circle squeeze2">
                    <div class="uk-flex uk-flex-center img-squeeze2">
                        <div><img src="{% static 'crm/images/3.png' %}" alt="" class=""></div>
                    </div>
                    <div class="uk-flex uk-flex-center uk-margin-small-top">
                        <div><span class="squeeze-text">Event</span></div>
                    </div>
                    <div class="uk-flex uk-flex-center">
                        <div><span class="squeeze-text">management</span></div>
                    </div>
                </div>
            </div>
            <div>
                <div class="pos2 uk-inline">
                    <div class="uk-border-circle squeeze3">
                        <div class="uk-flex uk-flex-center img-squeeze2">
                            <div><img src="{% static 'crm/images/1.png' %}" alt="" class=""></div>
                        </div>
                        <div class="uk-flex uk-flex-center uk-margin-small-top">
                            <div><span class="squeeze-text">SRM</span></div>
                        </div>
                    </div>
                </div>
                <div class="pos3 uk-inline">
                    <div class="uk-border-circle squeeze4">
                        <div class="uk-flex uk-flex-center img-squeeze2">
                            <div><img src="{% static 'crm/images/4.png' %}" alt="" class=""></div>
                        </div>
                        <div class="uk-flex uk-flex-center uk-margin-small-top">
                            <div><span class="squeeze-text">IOT/AI</span></div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock container %}

{% block extra_js %}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="{% static 'crm/js/auth/login.js' %}"></script>
{% endblock %}