{% extends 'base.html' %}
{% load ui_extras %}

{% block content %}
<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li class="breadcrumb-item"><a href="/">Home</a></li>
        <li class="breadcrumb-item"><a href="{% url 'realms:index' %}">SSO</a></li>
        <li class="breadcrumb-item active">{{ configurations_count }} Realm{{ realms_count|pluralize }}</li>
    </ol>
</nav>

<div class="d-flex align-items-center mb-1">
    <h3 class="mb-3">Realm{{ realms_count|pluralize }} ({{ realms_count }})</h3>
    <div class="ms-auto">
        {% if create_links %}
        <div class="dropdown mb-2">
            <button class="btn btn-link dropdown-toggle" type="button" id="createRealm"
                    data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                <i class="bi bi-plus-circle"></i>
            </button>
            <ul class="dropdown-menu" aria-labelledby="createRealm">
                {% for link in create_links %}
                <li><a href="{{ link.url }}" class="dropdown-item">{{ link.anchor_text }} realm</a></li>
                {% endfor %}
            </ul>
        </div>
        {% endif %}
    </div>
</div>

<table class="table table-striped align-middle table-hover">
    <thead>
        <tr>
        <th>Name</th>
        <th>Backend</th>
        <th></th>
        </tr>
    </thead>
    <tbody>
        {% for realm in object_list %}
        <tr class="data-row">
        <td>
            {% if perms.realms.view_realm %}
            <a href="{{ realm.get_absolute_url }}">{{ realm }}</a>
            {% else %}
            {{ realm }}
            {% endif %}
        </td>
        <td>
            {{ realm.backend }}
        </td>
        <td class="text-end py-0">
            {% if not request.realm_authentication_session.is_remote and perms.realms.change_realm %}
                {% url 'realms:update' realm.uuid as url %}
                {% button 'UPDATE' url "Edit Realm" %}
            {% endif %}
        </td>
        </tr>
        {% endfor %}
    </tbody>
    </table>
</div>
{% endblock %}