{% load i18n %}

<div class="chassis-information-page">
    {% for alert in chassis_page_alerts %}
        {% include "admin/chassis/information_alert.html" with message=alert.message color=alert.color icon_class=alert.icon_class only %}
    {% endfor %}
    {% for section in information_sections %}
        <fieldset
            class="
                module aligned wide chassis-changelist-fieldset chassis-information-fieldset
                chassis-information-fieldset--span-{{ section.column_span }}
                {% if section.column_start %}chassis-information-fieldset--start-{{ section.column_start }}{% endif %}
                {% if section.row_span > 1 %}chassis-information-fieldset--row-span-{{ section.row_span }}{% endif %}
            "
        >
            <h2 class="fieldset-heading">
                <span class="chassis-information-fieldset__title">{{ section.title }}</span>
                {% if section.header_action %}
                    <a
                        href="{{ section.header_action.url }}"
                        class="
                            chassis-information-action
                            chassis-information-action--{{ section.header_action.color }}
                            chassis-information-action--with-label
                            chassis-information-fieldset-action
                        "
                        title="{{ section.header_action.label }}"
                        aria-label="{{ section.header_action.label }}"
                    >
                        {% if section.header_action.icon_class %}
                            <i class="{{ section.header_action.icon_class }}" aria-hidden="true"></i>
                        {% endif %}
                        {% if section.header_action.show_label %}
                            <span>{{ section.header_action.label }}</span>
                        {% endif %}
                    </a>
                {% endif %}
            </h2>
            {% if section.timeline %}
                <div class="chassis-information-table-wrapper">
                    {% include "admin/chassis/timeline.html" with timeline=section.timeline only %}
                </div>
            {% else %}
                <div class="chassis-information-table-wrapper">
                    <table class="chassis-information-table">
                        <tbody>
                            {% for row in section.rows %}
                                <tr>
                                    <th scope="row">{{ row.label }}</th>
                                    <td>
                                        <span class="chassis-information-cell">
                                            <span class="chassis-information-value">
                                                {% if row.badges %}
                                                    <span class="chassis-information-badges">
                                                        {% for badge in row.badges %}
                                                            <span
                                                                class="
                                                                    chassis-information-badge
                                                                    chassis-information-badge--{{ badge.color }}
                                                                "
                                                            >
                                                                {{ badge.label }}
                                                            </span>
                                                        {% endfor %}
                                                    </span>
                                                {% elif row.icon_class %}
                                                    <span
                                                        class="
                                                            chassis-information-status
                                                            chassis-information-status--{{ row.icon_color }}
                                                        "
                                                        title="{{ row.icon_label }}"
                                                    >
                                                        <i class="{{ row.icon_class }}" aria-hidden="true"></i>
                                                        <span class="visually-hidden">{{ row.icon_label }}</span>
                                                    </span>
                                                {% else %}
                                                    {{ row.value|default_if_none:'—' }}
                                                {% endif %}
                                            </span>
                                            {% if row.action %}
                                                <a
                                                    href="{{ row.action.url }}"
                                                    class="
                                                        chassis-information-action
                                                        chassis-information-action--{{ row.action.color }}
                                                        {% if row.action.show_label %}chassis-information-action--with-label{% endif %}
                                                    "
                                                    title="{{ row.action.label }}"
                                                    aria-label="{{ row.action.label }}"
                                                >
                                                    <i class="{{ row.action.icon_class }}" aria-hidden="true"></i>
                                                    {% if row.action.show_label %}<span>{{ row.action.label }}</span>{% endif %}
                                                </a>
                                            {% endif %}
                                        </span>
                                    </td>
                                </tr>
                            {% endfor %}
                        </tbody>
                    </table>
                </div>
            {% endif %}
        </fieldset>
    {% empty %}
        <p>{% translate 'Нет информации для отображения.' %}</p>
    {% endfor %}
</div>