{% extends "base.html" %}
{% import "macros.html" as macros %}

{# The unit selector (guarded further down by the same two flags) is the
   only other thing on the page naming the unit, so the heading and title
   repeat it only when the selector isn't there to. One flag drives both
   `{% if %}`s below and the selector's own guard, so they can't diverge. #}
{% set unit_selector_shown = config.BUNITS and config.BUNITS_LOGIN_SELECTOR %}
{% set show_unit_name = current_unit() and not unit_selector_shown %}

{% block title %}Log in - ePortal{% if show_unit_name %} [{{ current_unit().title }}]{% endif %}{% endblock %}

{# No chrome: there is no navigation to bypass, and the sign-in form is the
   page. The landmark is inherited, so it cannot drift from the rest of the
   app. #}
{% block chrome %}{% endblock %}

{# Inside the card, not above it: the shared region renders full width at the
   top of the page, 10em clear of the form the error belongs to. #}
{% block messages %}{% endblock %}

{% block body %}
<div class="login-styling">
    {{ macros.flashed_messages() }}
    {# Sized as the brand line it replaced: a bare <h1> is 2.5rem and wraps
       with a unit name appended. #}
    <h1 class="login-span-styling fs-6 fw-normal lh-base">
        <img class="navbar-logo" alt=""
             src="{{ url_for('static', filename='images/logo.png') }}"/>
        Sign In to KernelCare.ePortal{% if show_unit_name %} [{{ current_unit().title }}]{% endif %}</h1>
    <form method="POST" id="login-form">
        {% if unit_selector_shown %}
        <div class="mb-3">
            <label for="unit-login-selector" class="form-label">Business Unit</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-house-fill"></i>
                </span>
                {# No separate activation control: arrowing down a native
                   select fires `change` on every option passed, but
                   `unit_selector.js` only retargets where the form (and the
                   SSO link) will submit -- it never navigates, so nothing
                   changes context and SC 3.2.2 holds without an extra
                   click. #}
                <select id="unit-login-selector" class="form-select unit-login-selector">
                    <option hidden value="" {{ '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">
            <label for="username" class="form-label">Username</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-person-fill"></i>
                </span>
                <input id="username" name="username" type="text" class="form-control"
                       autocomplete="username" value="{{ username }}">
            </div>
        </div>
        <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <div class="input-group">
                <span class="input-group-text">
                    <i class="bi bi-lock-fill"></i>
                </span>
                <input id="password" name="password" type="password" class="form-control"
                       autocomplete="current-password">
            </div>
        </div>
        <button type="submit" class="btn btn-secondary">Sign In</button>
        {% if config.OIDC_CLIENT_ID %}
        <a class="btn btn-secondary" id="sso-login-link" 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 %}