{% extends "administration/base.html" %}

{% load i18n %}
{% load authentik_utils %}

{% block content %}
<section class="pf-c-page__main-section pf-m-light">
    <div class="pf-c-content">
        <h1>
            <i class="pf-icon pf-icon-infrastructure"></i>
            {% trans 'Stage Bindings' %}
        </h1>
        <p>{% trans "Bind existing Stages to Flows." %}</p>
    </div>
</section>
<section class="pf-c-page__main-section pf-m-no-padding-mobile">
    <div class="pf-c-card">
        {% if object_list %}
        <div class="pf-c-toolbar">
            <div class="pf-c-toolbar__content">
                <div class="pf-c-toolbar__bulk-select">
                    <ak-modal-button href="{% url 'authentik_admin:stage-binding-create' %}">
                        <ak-spinner-button slot="trigger" class="pf-m-primary">
                            {% trans 'Create' %}
                        </ak-spinner-button>
                        <div slot="modal"></div>
                    </ak-modal-button>
                    <button role="ak-refresh" class="pf-c-button pf-m-primary">
                        {% trans 'Refresh' %}
                    </button>
                </div>
                {% include 'partials/pagination.html' %}
            </div>
        </div>
        <table class="pf-c-table pf-m-compact pf-m-grid-xl" role="grid">
            <thead>
                <tr role="row">
                    <th role="columnheader" scope="col">{% trans 'Order' %}</th>
                    <th role="columnheader" scope="col">{% trans 'Name' %}</th>
                    <th role="columnheader" scope="col">{% trans 'Stage Type' %}</th>
                    <th role="cell"></th>
                </tr>
            </thead>
            <tbody role="rowgroup">
                {% regroup object_list by target as grouped_bindings %}
                {% for flow in grouped_bindings %}
                    <tr role="role">
                        <td>
                            {% blocktrans with slug=flow.grouper.slug %}
                            Flow {{ slug }}
                            {% endblocktrans %}
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                    </tr>
                    {% for binding in flow.list %}
                    <tr class="pf-c-table__expandable-row pf-m-expanded" role="row">
                        <td role="cell">
                            <span>
                                {{ binding.order }}
                            </span>
                        </td>
                        <th role="columnheader">
                            <div>
                                <div>{{ binding.target.slug }}</div>
                                <small>
                                    {{ binding.target.name }}
                                </small>
                            </div>
                        </th>
                        <td role="cell">
                            <div>
                                <div>
                                    {{ binding.stage.name }}
                                </div>
                                <small>
                                    {{ binding.stage }}
                                </small>
                            </div>
                        </td>
                        <td>
                            <ak-modal-button href="{% url 'authentik_admin:stage-binding-update' pk=binding.pk %}">
                                <ak-spinner-button slot="trigger" class="pf-m-secondary">
                                    {% trans 'Update' %}
                                </ak-spinner-button>
                                <div slot="modal"></div>
                            </ak-modal-button>
                            <ak-modal-button href="{% url 'authentik_admin:stage-binding-delete' pk=binding.pk %}">
                                <ak-spinner-button slot="trigger" class="pf-m-danger">
                                    {% trans 'Delete' %}
                                </ak-spinner-button>
                                <div slot="modal"></div>
                            </ak-modal-button>
                        </td>
                    </tr>
                    {% endfor %}
                {% endfor %}
            </tbody>
        </table>
        <div class="pf-c-pagination pf-m-bottom">
            {% include 'partials/pagination.html' %}
        </div>
        {% else %}
        <div class="pf-c-empty-state">
            <div class="pf-c-empty-state__content">
                <i class="fas fa-cubes pf-c-empty-state__icon" aria-hidden="true"></i>
                <h1 class="pf-c-title pf-m-lg">
                    {% trans 'No Flow-Stage Bindings.' %}
                </h1>
                <div class="pf-c-empty-state__body">
                    {% trans 'Currently no flow-stage bindings exist. Click the button below to create one.' %}
                </div>
                <ak-modal-button href="{% url 'authentik_admin:stage-binding-create' %}">
                    <ak-spinner-button slot="trigger" class="pf-m-primary">
                        {% trans 'Create' %}
                    </ak-spinner-button>
                    <div slot="modal"></div>
                </ak-modal-button>
            </div>
        </div>
        {% endif %}
    </div>
</section>
{% endblock %}