{% extends "base.html" %}
{% block content %}
    <div class="alert alert-primary col-xs-12 col-sm-12 col-md-10 col-lg-6 col-xl-6 col-xxl-5"
         role="alert">
        <h3>Configuration</h3>
        <table class="table table-stripped table-hover bg-light">
            <thead>
                <tr>
                    <th scope="col">Key</th>
                    <th scope="col">Value</th>
                </tr>
            </thead>
            <tbody>
                {% for item, value in config_env.items() %}
                    <tr>
                        <td>
                            {{ item }}
                            <i tabindex="{{ loop.index }}"
                               class="mdi mdi-help-circle-outline"
                               data-bs-toggle="popover"
                               data-bs-custom-class="custom-popover"
                               data-bs-trigger="focus"
                               title="{{ item }}"
                               data-bs-content="{{ explanations[item] }}"></i>
                        </td>
                        <td>{{ value }}</td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endblock content %}
{% block jscript %}
    {{ super() }}
    <script>
        const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
        const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))
    </script>
{% endblock jscript %}