{% extends "base.html" %}

{% block page_body %}

<div class="login-styling">

    {% with messages = get_flashed_messages(with_categories=True) %}
      {% if messages %}
        {% for category, m in messages %}
          {% if category %}
          {% set mapping = {'message': 'info', 'error': 'danger'} %}
          <div class="alert alert-{{ mapping.get(category, category) }} alert-dismissible">
          {% else %}
          <div class="alert alert-dismissible">
          {% endif %}
            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            {{ m }}
          </div>
        {% endfor %}
      {% endif %}
    {% endwith %}

    <span class="login-span-styling">
        <img class="navbar-logo"
             src="{{ url_for('static', filename='images/logo.png') }}"/>
        KernelCare.ePortal{% if current_unit() %} [{{ current_unit().title }}]{% endif %}</span>
    <form method="POST">
        {% if config.BUNITS and config.BUNITS_LOGIN_SELECTOR %}
        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-house-fill"></i>
                </span>
                <select id="unit-login-selector" class="form-select">
                    <option hidden {{ 'selected' if not current_unit() else '' }}>Business Unit</option>
                    <option value="_">Super Admin</option>
                {% for slug, title in unit_slugs().items() %}
                    <option value="{{ slug }}" {{ 'selected' if current_unit().slug == slug }} >{{ title }}</option>
                {% endfor %}
                </select>
            </div>
        </div>
        {% endif %}
        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-person-fill"></i>
                </span>
                <input name="username" type="text" class="form-control" placeholder="Username" value="{{ username }}">
            </div>
        </div>
        <div class="mb-3">
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-lock-fill"></i>
                </span>
                <input name="password" type="password" class="form-control" placeholder="Password">
            </div>
        </div>
        <button type="submit" class="btn btn-secondary">Sign In</button>
        {% if config.OIDC_CLIENT_ID %}
        <a class="btn btn-secondary" href="{{ url_for('sso_login') }}">Sign In with SSO</a>
        {% endif %}
    </form>
</div>

{% endblock %}

{% block tail %}
    {{ super() }}
    <script src="{{ url_for('static', filename='eportal-js/unit_selector.js') }}"></script>
{% endblock %}