{# load formvalidation config #}
{% set aFvDataAttrNames = oViewConf.getViewThemeParam("aFvDataAttrNames") %}

<div class="row">
    <div class="col-12 col-md-6 mb-4 mb-md-0">
        <div class="card c4s-account-card h-100">
            <div class="card-header">
                <h4 class="card-title">{{ translate({ ident: "LOGIN_ACCOUNT_PANEL_LOGIN_TITLE" }) }}</h4>
            </div>

            <div class="card-body d-flex">
                <form id="c4s-login-form" name="login" method="post" novalidate="novalidate"
                      action="{{ oViewConf.getSslSelfLink()|raw }}"
                      class="d-flex flex-column justify-content-between"
                >
                    {{ oViewConf.getHiddenSid()|raw }}
                    {{ oViewConf.getNavFormParams()|raw }}
                    <input type="hidden" name="fnc" value="login_noredirect">
                    <input type="hidden" name="cl" value="{{ oViewConf.getActiveClassName() }}">

                    {% if sType == "account" %}
                        <input type="hidden" name="tpl" value="{{ oViewConf.getActTplName() }}">
                        <input type="hidden" name="oxloadid" value="{{ oViewConf.getActContentLoadId() }}">
                    {% endif %}

                    {% if oView.getArticleId() %}
                        <input type="hidden" name="aid" value="{{ oView.getArticleId() }}">
                    {% endif %}

                    {% if oView.getProduct() %}
                        {% set product = oView.getProduct() %}
                        <input type="hidden" name="anid" value="{{ product.oxarticles__oxnid.value }}">
                    {% endif %}

                    <p class="card-text mb-4">{{ translate({ ident: "LOGIN_ALREADY_CUSTOMER" }) }}</p>

                    <div class="mb-3{% if aErrors %} is-invalid{% endif %}">
                        <label class="form-label c4s-label-required" for="c4s-login-username-input">{{ translate({ ident: "EMAIL" }) }}</label>
                        <input type="text" id="c4s-login-username-input" class="form-control" name="lgn_usr"
                               required="required"
                               {% if aFvDataAttrNames %}
                                   {{ aFvDataAttrNames.NotEmpty }}="true"
                                   {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                   {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                                   {{ aFvDataAttrNames.Email }}="true"
                                   {{ aFvDataAttrNames.EmailMessage }}="{{ translate({ ident: "FORM_VALIDATION_VALIDEMAIL" }) }}"
                               {% endif %}
                        >
                    </div>

                    <div class="mb-3{% if aErrors %} is-invalid{% endif %}">
                        <label class="form-label c4s-label-required" for="c4s-login-pwd-input">{{ translate({ ident: "PASSWORD" }) }}</label>
                        <input type="password" id="c4s-login-pwd-input" class="form-control" name="lgn_pwd"
                               required="required"
                               {% if aFvDataAttrNames %}
                                   {{ aFvDataAttrNames.NotEmpty }}="true"
                                   {{ aFvDataAttrNames.NotEmptyTrim }}="true"
                                   {{ aFvDataAttrNames.NotEmptyMessage }}="{{ translate({ ident: "FORM_VALIDATION_REQUIRED" }) }}"
                               {% endif %}
                        >
                    </div>

                    <div class="d-grid gap-3 d-md-flex justify-content-between align-items-center my-3">
                        {% if oView.showRememberMe() %}
                            <div class="form-check">
                                <input type="checkbox" id="c4s-login-account-input" class="form-check-input" name="lgn_cook" value="1">
                                <label class="form-check-label" for="c4s-login-account-input">{{ translate({ ident: "KEEP_LOGGED_IN" }) }}</label>
                            </div>
                        {% endif %}

                        <div>
                            <a id="c4s-login-forgot-pwd-link" href="{{ seo_url({ ident: oViewConf.getSelfLink()|raw ~ "cl=forgotpwd" }) }}" class="btn-link">{{ translate({ ident: "FORGOT_PASSWORD" }) }}</a>
                        </div>
                    </div>

                    <div class="d-grid">
                        <button id="c4s-login-button" type="submit" class="btn btn-primary">{{ translate({ ident: "LOGIN" }) }}</button>
                    </div>
                </form>
            </div>
        </div>
    </div>

    <div class="col-12 col-md-6">
        <div class="card c4s-account-card h-100">
            <div class="card-header">
                <h4 class="card-title">{{ translate({ ident: "LOGIN_ACCOUNT_PANEL_CREATE_TITLE" }) }}</h4>
            </div>

            <div class="card-body d-flex flex-column justify-content-between">
                <div class="card-text mb-4">{{ translate({ ident: "LOGIN_ACCOUNT_PANEL_CREATE_BODY" }) }}</div>

                <div class="d-grid gap-2 mt-auto">
                    <a id="openAccountLink" href="{{ seo_url({ ident: oViewConf.getSslSelfLink()|raw ~ "cl=register" }) }}" class="btn btn-primary" role="button">
                        {{ translate({ ident: "OPEN_ACCOUNT" }) }}
                    </a>
                </div>
            </div>
        </div>
    </div>
</div>