{% extends "base.html" %}
{% from "security/fields.html" import render_field_with_errors, render_username_with_errors %}
{% block title %}{{ config.APP_NAME }}{% endblock %}
{% block body %}
<div class="container-fluid h-100 login_page{% if auth_page is defined and auth_page is true %} auth_page{% endif %}">
    {% if config.LOGIN_BANNER is defined and config.LOGIN_BANNER != "" %}
    <div class="login_banner alert alert-danger" role="alert">
        {{ config.LOGIN_BANNER|safe }}
    </div>
    {% endif %}
    {% include "security/messages.html" %}
    <div class="row h-100 align-items-center justify-content-center">
        <div class="d-none d-md-block col-md-6">{% block panel_image %}{% endblock %}</div>
        <div class="col-md-3 panel-container mh-100">
            <div class="panel-header h4 pt-2 pb-1 m-0 rounded-top">
              <span class="d-flex justify-content-center pgadmin_header_logo"
                    onclick="return false;"
                    href="#"
                    title="{{ _('%(appname)s', appname=config.APP_NAME) }}"
                    aria-label="{{ _('%(appname)s', appname=config.APP_NAME) }} logo">
                <i class="app-icon pg-icon"
                   aria-hidden="true"
                   style="width: auto; background-size: auto; min-width: 100px;"></i>
              </span>
            </div>
            <div class="panel-body p-3 overflow-auto" style="max-height: calc(100vh - 3em);">
              <div class="d-block text-color pb-2 h4 text-center">{% block panel_title %}{% endblock %}</div>
              {% block panel_body %}{% endblock %}
            </div>
        </div>
    </div>
</div>
{% endblock %}