{% extends "base.html" %}
{% set active_page = "login" %}

{% block title %}{% trans "page title" %}Log in{% endtrans %} | LibreQDA{% endblock %}

{% block contents %}
<div class="row">
    <div class="col">
        <h1>{% trans "tab" %}Log in{% endtrans %}</h1>
        <p class="mb-4">{% trans %}LibreQDA uses <a target="_blank" href="https://www.cilogon.org/home">CILogon</a> to authenticate users by redirecting them to their chosen identity provider.{% endtrans %}</p>
        <div class="alert alert-secondary mt-3 small" role="alert">
            {% trans %}
            If your institution is not listed or authentication fails, please contact your institution's IT department.
            You can refer them to <a href="https://www.cilogon.org/service/addidp" target="_blank">this page</a>.
            <br>
            Do not contact CILogon directly.
            {% endtrans %}
        </div>

        <div class="row mt-4 g-3">
            <div class="col-12 col-sm">
                <div class="dropdown hierarchy-select w-100" id="entity_id-select">
                    <button class="btn btn-outline-secondary dropdown-toggle w-100 py-2 px-3" type="button"
                            id="entity_idButtonTag" data-bs-toggle="dropdown"
                            aria-expanded="false"></button>
                    <ul class="dropdown-menu" aria-labelledby="entity_idButtonTag">
                        <div class="hs-searchbox">
                            <input type="text" class="form-control" autocomplete="off">
                        </div>
                        <div class="hs-menu-inner">
                            <a class="dropdown-item" data-value="" data-level="1" href="#">
                                {% trans %}Select your institution{% endtrans %}
                            </a>
                            {% for idp in idps %}
                                <a class="dropdown-item" data-value="{{ idp['entityid'] }}" data-level="1" href="#"
                                   {% if idp['entityid'] == entity_id %}selected=""{% endif %}>
                                    {{ idp['name'] }}
                                </a>
                            {% endfor %}
                        </div>
                    </ul>
                    <input class="d-none" id="entity_id" name="entity_id" readonly="readonly" aria-hidden="true"
                           type="text" {% if entity_id %}value="{{ entity_id }}"{% endif %}/>
                </div>
            </div>

            <div class="col-12 col-sm-auto">
                <a class="btn btn-primary w-100 py-2 px-4" id="cilogon" href="/cilogon">
                    {% trans %}Continue to authentication with{% endtrans %} CILogon
                </a>
            </div>
        </div>
    </div>
</div>


<!-- Alert modal -->
{% include 'partials/alert.html' %}

{% if error %}
    <script type="text/javascript">
        let error_msg = `{{ error_msg }}`;
        window.addEventListener('load', function() {
            showAlert(error_msg, 'error');
        });
    </script>
{% endif %}
{% endblock %}

{% block morejs %}
<script type="text/javascript">
    document.addEventListener('DOMContentLoaded', function () {
        const loginBtn = document.getElementById('cilogon');
        const entityInput = document.getElementById('entity_id');

        loginBtn.addEventListener('click', function (e) {
            if (!entityInput.value) {
                e.preventDefault();
                showAlert("{% trans %}Please select your institution from the list before continuing{% endtrans %}.", "error");
            }
        });
    });
</script>

<!-- Utilities -->
<script type="text/javascript" src="{{ static_url('js/utilities.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/vendor/hierarchy-select.min.js') }}"></script>
<script type="text/javascript" src="{{ static_url('js/login.js') }}"></script>
{% endblock %}