{% extends "base.html" %}
{% block title %}{{ page_title }} · {{ app_title }}{% endblock %}
{% block content %}
{% include "components/page_header.html" %}

<div class="page-body">
  <div class="{{ layout.container_class }}">

    {% if back_href %}
    <div class="mb-3">
      <a href="{{ back_href }}" class="btn btn-ghost-secondary btn-sm">
        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-1">
          <path d="M5 12l14 0" />
          <path d="M5 12l6 6" />
          <path d="M5 12l6 -6" />
        </svg>
        {% if locale == 'ru' %}Назад{% else %}Back{% endif %}
      </a>
    </div>
    {% endif %}

    {% if has_warnings %}
    <div class="mb-3">
      {% for warning in warnings %}
      <div class="alert alert-warning" role="alert">{{ warning }}</div>
      {% endfor %}
    </div>
    {% endif %}

    {% if has_sections %}
    <div class="row row-deck row-cards g-3 beeui-detail-sections">
      {% for section in sections %}
        {% set section_index = loop.index0 %}
        {% if section["kind"] == "key_value" %}
        <div class="col-12 col-lg-6">
          <div class="card">
            {% if section.get("title") %}
            <div class="card-header">
              <h3 class="beeui-section-title">{{ section["title"] }}</h3>
            </div>
            {% endif %}

            {% if section.get("no_data") %}
            <div class="card-body">
              <div class="text-secondary beeui-no-data">
                {% if locale == 'ru' %}Не использовалось{% else %}Not used{% endif %}
              </div>
            </div>
            {% else %}
            <div class="card-body">
              <div class="datagrid">
                {% for item in section["items"] %}
                <div class="datagrid-item">
                  <div class="datagrid-title">{{ item["label"] }}</div>
                  <div class="datagrid-content beeui-text-break">
                    {% set variant = item.get("variant", "text") %}
                    {% set tone = item.get("tone", "default") %}
                    {% if variant == "modal_text" %}
                    {% set modal_id = "beeui-detail-text-" ~ section_index ~ "-" ~ loop.index0 %}
                    <button type="button" class="btn btn-sm" data-bs-toggle="modal" data-bs-target="#{{ modal_id }}">
                      {{ item.get("modal_trigger_label", translate("detail.show_text", locale)) }}
                    </button>
                    <div class="modal modal-blur fade" id="{{ modal_id }}" tabindex="-1" aria-labelledby="{{ modal_id }}-title" aria-hidden="true">
                      <div class="modal-dialog modal-dialog-centered modal-dialog-scrollable" role="document">
                        <div class="modal-content beeui-detail-modal">
                          <div class="modal-header">
                            <h5 class="modal-title" id="{{ modal_id }}-title">{{ item.get("modal_title", item["label"]) }}</h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="{{ translate("detail.close", locale) }}"></button>
                          </div>
                          <div class="modal-body">
                            {% if item.get("modal_fields") %}
                            <div class="datagrid">
                              {% for field in item["modal_fields"] %}
                              <div class="datagrid-item">
                                <div class="datagrid-title">{{ field["label"] }}</div>
                                <div class="datagrid-content beeui-text-break{% if field["multiline"] %} beeui-modal-text{% endif %}">{{ field["value"] }}</div>
                              </div>
                              {% endfor %}
                            </div>
                            {% else %}
                            <div class="beeui-modal-text">{{ item["display"] }}</div>
                            {% endif %}
                          </div>
                          <div class="modal-footer">
                            <button type="button" class="btn me-auto" data-bs-dismiss="modal">{{ translate("detail.close", locale) }}</button>
                          </div>
                        </div>
                      </div>
                    </div>
                    {% elif variant == "long_text" and item.get("collapsible") %}
                    <details class="beeui-details">
                      <summary class="beeui-details-summary">
                        {{ translate("detail.show_text", locale) }}
                      </summary>
                      <div class="beeui-details-content">{{ item["display"] }}</div>
                    </details>
                    {% elif variant == "badge" and tone in ("success", "warning", "danger") %}
                    <span class="badge bg-{{ tone }}-lt">{{ item["display"] }}</span>
                    {% elif variant == "boolean" %}
                    <span>{{ item["display"] }}</span>
                    {% elif variant == "confidence" %}
                    <span>{{ item["display"] }}</span>
                    {% elif item["display"] | length > 300 %}
                    <details class="beeui-details">
                      <summary class="beeui-details-summary">
                        {{ translate("detail.show_text", locale) }}
                      </summary>
                      <div class="beeui-details-content">{{ item["display"] }}</div>
                    </details>
                    {% elif variant == "badge" %}
                    <span class="badge bg-secondary-lt">{{ item["display"] }}</span>
                    {% elif tone == "muted" %}
                    <span class="text-secondary">{{ item["display"] }}</span>
                    {% elif tone == "success" %}
                    <span class="text-success">{{ item["display"] }}</span>
                    {% elif tone == "warning" %}
                    <span class="text-warning">{{ item["display"] }}</span>
                    {% elif tone == "danger" %}
                    <span class="text-danger">{{ item["display"] }}</span>
                    {% elif item.get("href") %}
                    <a href="{{ item["href"] }}">{{ item["display"] }}</a>
                    {% else %}
                    {{ item["display"] }}
                    {% endif %}
                  </div>
                </div>
                {% endfor %}
              </div>
            </div>
            {% endif %}
          </div>
        </div>

        {% elif section["kind"] == "text" %}
        <div class="col-12">
          <div class="card">
            {% if section.get("title") %}
            <div class="card-header">
              <h3 class="beeui-section-title">{{ section["title"] }}</h3>
            </div>
            {% endif %}
            <div class="card-body">
              <pre class="mb-0 text-break">{{ section["body"] }}</pre>
            </div>
          </div>
        </div>

        {% elif section["kind"] == "table" %}
        <div class="col-12">
          <div class="card">
            {% if section.get("title") %}
            <div class="card-header">
              <h3 class="beeui-section-title">{{ section["title"] }}</h3>
            </div>
            {% endif %}
            <div class="table-responsive">
              <table class="table table-vcenter card-table">
                <thead>
                  <tr>
                    {% for col in section["columns"] %}
                    <th>{{ col["label"] }}</th>
                    {% endfor %}
                  </tr>
                </thead>
                <tbody>
                  {% for row in section["rows"] %}
                  <tr>
                    {% for col in section["columns"] %}
                    <td>
                      {% set cell = row[col["key"]] %}
                      {% if col.get("cell") == "link" and cell["href"] %}
                      <a href="{{ cell["href"] }}">{{ cell["label"] }}</a>
                      {% elif col.get("cell") == "link" %}
                      {{ cell["label"] }}
                      {% else %}
                      {{ cell }}
                      {% endif %}
                    </td>
                    {% endfor %}
                  </tr>
                  {% endfor %}
                </tbody>
              </table>
            </div>
          </div>
        </div>

        {% elif section["kind"] == "links" %}
        <div class="col-12 col-lg-6">
          <div class="card">
            {% if section.get("title") %}
            <div class="card-header">
              <h3 class="beeui-section-title">{{ section["title"] }}</h3>
            </div>
            {% endif %}
            <div class="list-group list-group-flush">
              {% for item in section["items"] %}
                {% if item["href"] %}
                <a href="{{ item["href"] }}" class="list-group-item list-group-item-action">
                  {{ item["label"] }}
                </a>
                {% else %}
                <span class="list-group-item text-secondary">{{ item["label"] }}</span>
                {% endif %}
              {% endfor %}
            </div>
          </div>
        </div>

        {% endif %}
      {% endfor %}
    </div>

    {% else %}
    <div class="empty">
      <div class="empty-header">{% if locale == 'ru' %}Нет содержимого{% else %}No content{% endif %}</div>
      <p class="empty-subtitle text-secondary">{% if locale == 'ru' %}Для этой страницы нет разделов.{% else %}No sections available for this page.{% endif %}</p>
    </div>
    {% endif %}

  </div>
</div>
{% endblock %}