{% load i18n static mingo_settings %}

<div class="d-flex flex-column flex-lg-row flex-column-fluid">
    <div class="d-flex flex-column flex-lg-row-fluid w-lg-50 p-10 order-2 order-lg-1">
        <div class="d-flex flex-center flex-column flex-lg-row-fluid">
            <div class="w-lg-500px p-10">
                <form class="form w-100" action="{{ app_path }}" method="post" id="login-form">
                    {% csrf_token %}
                    <div class="text-center mb-11">
                        <h1 class="text-gray-900 fw-bolder mb-3">Sign In</h1>
                        <div class="text-gray-500 fw-semibold fs-6">Your Social Campaigns</div>
                    </div>
                    {% if form.errors and not form.non_field_errors %}
                        <p class="text-danger">{% blocktranslate count counter=form.errors.items|length %}Please correct the error below.{% plural %}Please correct the errors below.{% endblocktranslate %}</p>
                    {% endif %}

                    {% if form.non_field_errors %}
                        {% for error in form.non_field_errors %}
                        <p class="text-danger">{{ error }}</p>
                        {% endfor %}
                    {% endif %}
                    
                    <div class="fv-row mb-8">
                        {{ form.username.errors }}
                        {{ form.username }}
                    </div>
                    <div class="fv-row mb-3">
                        {{ form.password.errors }}
                        {{ form.password }}
                        <input type="hidden" name="next" value="{{ next }}">
                    </div>
                    <div class="d-flex flex-stack flex-wrap gap-3 fs-base fw-semibold mb-8">
                        <div></div>
                        <a href="authentication/layouts/creative/reset-password.html" class="link-primary">Forgot Password ?</a>
                    </div>
                    <div class="d-grid mb-10">
                        <button type="submit" id="kt_sign_in_submit" class="btn btn-primary">
                            <span class="indicator-label">Sign In</span>
                        </button>
                    </div>
                </form>
            </div>
        </div>
    </div>
    <!--end::Body-->

    <!--begin::Aside-->
    <div class="d-flex flex-lg-row-fluid w-lg-50 bgi-size-cover bgi-position-center order-1 order-lg-2" style="background-image: url(/static/media/misc/auth-bg.png)">
        <div class="d-flex flex-column flex-center py-7 py-lg-15 px-5 px-md-15 w-100">
            <a href="/" target="_blank" class="mb-0 mb-lg-12">
                <img alt="Logo" src="/static/media/logos/logo.png" >
            </a>

            <img class="d-none d-lg-block mx-auto w-275px w-md-50 w-xl-500px mb-10 mb-lg-20" src="/static/media/misc/auth-screens.png" alt="">

            <h1 class="d-none d-lg-block text-white fs-2qx fw-bolder text-center mb-7">Fast, Efficient and Productive</h1>

            <div class="d-none d-lg-block text-white fs-base text-center">
                In this kind of post, <a href="#" class="opacity-75-hover text-warning fw-bold me-1">the blogger</a>
                introduces a person they’ve interviewed <br> and provides some background information about
                <a href="#" class="opacity-75-hover text-warning fw-bold me-1">the interviewee</a> and their <br> work following this is a transcript of the interview.
            </div>
        </div>
    </div>
</div>