{% set languages = view.languages %}
<div id="definition-view" class="definition-view" style="--def-langs: {{ languages|length }}">
  <div class="definition-header">
    <div class="d-flex align-items-center gap-2 flex-wrap">
      <h1 class="fs-5 mb-0">{{ t("definition.title") }}</h1>
      <span class="text-secondary small">
        {{ t("definition.summary", cabinets=view.cabinets|length, types=view.type_count, fields=view.field_count) }}
      </span>
      <span class="text-secondary small d-none d-lg-inline">
        {{ t("definition.version", version=view.version, created=view.created) }}
      </span>
      <span class="flex-grow-1"></span>
      <a class="btn btn-sm btn-outline-secondary" href="/api/definition/asobjdef.xml" download>
        <i class="ph ph-download-simple" aria-hidden="true"></i> asobjdef.xml
      </a>
    </div>
    <div class="d-flex align-items-center gap-2 flex-wrap mt-2">
      <div class="definition-filter-box">
        <i class="ph ph-magnifying-glass" aria-hidden="true"></i>
        <input type="search" id="definition-filter" class="form-control form-control-sm"
               placeholder="{{ t('definition.filter') }}" aria-label="{{ t('definition.filter') }}"
               autocomplete="off">
      </div>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="definition-expand">
        <i class="ph ph-caret-down" aria-hidden="true"></i> {{ t("definition.expand_all") }}
      </button>
      <button type="button" class="btn btn-sm btn-outline-secondary" id="definition-collapse">
        <i class="ph ph-caret-up" aria-hidden="true"></i> {{ t("definition.collapse_all") }}
      </button>
      <div class="form-check form-switch mb-0 ms-1">
        <input class="form-check-input" type="checkbox" id="definition-layout">
        <label class="form-check-label small" for="definition-layout">{{ t("definition.show_layout") }}</label>
      </div>
    </div>
  </div>

  <p id="definition-empty" class="text-secondary p-3 d-none">{{ t("definition.no_matches") }}</p>

  {% for cabinet in view.cabinets %}
    {% set cabinet_id = "def-cabinet-" ~ loop.index %}
    <section class="def-cabinet" data-cabinet="{{ cabinet.internal_name }}">
      <h2 class="def-cabinet-head fs-6">
        <button type="button" class="def-toggle" data-bs-toggle="collapse"
                data-bs-target="#{{ cabinet_id }}" aria-expanded="false" aria-controls="{{ cabinet_id }}"
                aria-label="{{ cabinet.name }}" title="{{ cabinet.name }}">
          <i class="ph def-sign" aria-hidden="true"></i>
        </button>
        <i class="ph ph-archive" aria-hidden="true"></i>
        <span class="def-cabinet-name">{{ cabinet.name }}</span>
        <code class="text-secondary">{{ cabinet.internal_name }}</code>
        <span class="badge text-bg-secondary">{{ t("definition.object_count", n=cabinet.types|length) }}</span>
      </h2>
      <div class="collapse def-cabinet-body" id="{{ cabinet_id }}">
        <table class="table table-sm def-table align-middle mb-0">
          <thead>
            <tr>
              <th scope="col" class="def-toggle-col"></th>
              <th scope="col" class="def-statements-col"></th>
              <th scope="col" class="def-kind-col">{{ t("definition.col_type") }}</th>
              <th scope="col" class="def-name-col">{{ t("definition.col_internal") }}</th>
              {% for lang in languages %}
                <th scope="col" class="def-lang-col">{{ lang.name }}{% if lang.name != lang.iso_code %} <span class="text-secondary">({{ lang.iso_code }})</span>{% endif %}</th>
              {% endfor %}
            </tr>
          </thead>
          {% for type in cabinet.types %}
            {% set body_id = "def-fields-" ~ type.type_id %}
            <tbody class="def-type" data-type="{{ type.internal_name }}">
              <tr class="def-type-row">
                <td class="def-toggle-col">
                  <button type="button" class="def-toggle" data-bs-toggle="collapse"
                          data-bs-target="#{{ body_id }}" aria-expanded="false" aria-controls="{{ body_id }}"
                          aria-label="{{ t('definition.fields') }}" title="{{ t('definition.fields') }}">
                    <i class="ph def-sign" aria-hidden="true"></i>
                  </button>
                </td>
                <td class="def-statements-col">
                  <div class="dropdown">
                    <button type="button" class="def-statements-btn" data-bs-toggle="dropdown"
                            aria-expanded="false"
                            aria-label="{{ t('definition.statements') }}" title="{{ t('definition.statements') }}">
                      <i class="ph ph-code" aria-hidden="true"></i>
                    </button>
                    <ul class="dropdown-menu def-verbs">
                      {% for verb in verbs %}
                        <li><button type="button" class="dropdown-item def-statement"
                                    data-type="{{ type.internal_name }}"
                                    data-verb="{{ verb }}">{{ t("definition.verb." ~ verb) }}</button></li>
                      {% endfor %}
                    </ul>
                  </div>
                </td>
                <td>
                  {% if type.icon_id %}
                    <img class="type-icon" src="/api/icons/{{ type.icon_id }}" alt="">
                  {% else %}
                    <i class="ph {{ kind_icons.get(type.kind, 'ph-file-text') }}" aria-hidden="true"></i>
                  {% endif %}
                  <span class="def-kind">{{ t("definition.kind." ~ type.kind) }}</span>
                  {% if type.kind == "document" %}
                    <span class="def-module">{{ t("definition.maintype." ~ type.maintype|lower) }}</span>
                  {% endif %}
                </td>
                <td><code>{{ type.internal_name }}</code></td>
                {% for lang in languages %}
                  <td>{{ type.names.get(lang.iso_code, "") }}</td>
                {% endfor %}
              </tr>
              <tr class="def-fields-row">
                <td colspan="{{ 4 + languages|length }}" class="p-0">
                  <div class="collapse def-fields" id="{{ body_id }}">
                    <div class="def-properties">
                      {% for key, value in type.properties %}
                        <span class="def-prop">
                          <span class="text-secondary">{{ t("definition.prop." ~ key) }}</span>
                          {% if value is boolean %}
                            {{ t("definition.yes") if value else t("definition.no") }}
                          {% else %}
                            <code>{{ value }}</code>
                          {% endif %}
                        </span>
                      {% endfor %}
                    </div>
                    {% if type.fields %}
                      <table class="table table-sm def-field-table mb-0">
                        <thead>
                          <tr>
                            <th scope="col" class="def-toggle-col"></th>
                            <th scope="col" class="def-fname-col">{{ t("definition.col_internal") }}</th>
                            <th scope="col" class="def-ftype-col">{{ t("definition.col_type") }}</th>
                            <th scope="col" class="def-db-col">{{ t("definition.col_db") }}</th>
                            <th scope="col" class="def-tab-col">{{ t("definition.col_page") }}</th>
                            {% for lang in languages %}
                              <th scope="col" class="def-lang-col">{{ lang.name }}</th>
                            {% endfor %}
                            <th scope="col" class="def-flags-col">{{ t("definition.col_flags") }}</th>
                          </tr>
                        </thead>
                        {#- Kept compact: a large system renders a few thousand
                            of these rows, and the detail row is added by
                            definition.js only when a field is unfolded. -#}
                        <tbody>
                          {%- for f in type.fields %}
<tr class="def-field{% if f.is_layout %} is-layout{% endif %}" data-field="{{ f.internal_name }}"
><td class="def-toggle-col"><button type="button" class="def-toggle def-field-toggle"
 aria-expanded="false" aria-label="{{ t('definition.details') }}" title="{{ t('definition.details') }}"
><i class="ph def-sign" aria-hidden="true"></i></button></td
><td><code>{{ f.internal_name }}</code></td
><td class="def-field-type">{{ f.type_label }}</td
><td><code class="text-secondary">{{ f.db_column }}</code></td
><td class="text-secondary">{{ f.page }}</td
>{% for lang in languages %}<td>{{ f.names.get(lang.iso_code, "") }}</td>{% endfor %}<td class="def-flags"
>{% if f.required %}<span class="def-flag is-required">{{ t("definition.flag.required") }}</span>{% endif %}
{%- if f.key_field %}<span class="def-flag is-key">{{ t("definition.flag.key") }}</span>{% endif %}
{%- if f.readonly %}<span class="def-flag">{{ t("definition.flag.readonly") }}</span>{% endif %}
{%- if f.is_table %}<span class="def-flag">{{ t("definition.flag.table") }}</span>{% endif %}
{%- if f.is_layout %}<span class="def-flag">{{ t("definition.flag.layout") }}</span>{% endif %}</td></tr>
                          {%- endfor %}
                        </tbody>
                      </table>
                    {% else %}
                      <p class="text-secondary small p-2 mb-0">{{ t("definition.no_fields") }}</p>
                    {% endif %}
                  </div>
                </td>
              </tr>
            </tbody>
          {% endfor %}
        </table>
      </div>
    </section>
  {% endfor %}
</div>