{% load i18n %}
<section class="module qbe-section qbe-explorer" aria-labelledby="qbe-explorer-title">
  <h2 id="qbe-explorer-title">{% translate "Registered fields and relationships" %}</h2>
  <p>{% translate "This report uses only fields registered for models you are authorized to view." %}</p>
  <div class="qbe-explorer-enhanced" hidden>
    <label for="qbe-explorer-search">{% translate "Search registered fields" %}</label>
    <input id="qbe-explorer-search" type="search" autocomplete="off">
    <div class="qbe-explorer-diagram-scroll" tabindex="0" aria-label="{% translate 'Relationship diagram; scroll horizontally to explore' %}">
      <svg class="qbe-explorer-diagram" role="img" aria-label="{% translate 'Registered model relationships' %}"></svg>
    </div>
    <p id="qbe-explorer-feedback" class="visually-hidden" role="status" aria-live="polite"></p>
  </div>
  <h3>{% translate "Relationship paths" %}</h3>
  {% if explorer_data.edges %}
  <ul class="qbe-explorer-relations">
    {% for edge in explorer_data.edges %}
    <li data-edge-id="{{ edge.id }}">
      <span>{{ edge.source_id }}</span> &rarr; <span>{{ edge.target_id }}</span>:
      {{ edge.label }} ({% if edge.reverse %}{% translate "reverse" %}{% else %}{% translate "forward" %}{% endif %};
      {% if edge.multi_valued %}{% translate "multiple" %}{% else %}{% translate "single" %}{% endif %})
    </li>
    {% endfor %}
  </ul>
  {% else %}
  <p>{% translate "This report has no registered relationships." %}</p>
  {% endif %}
  <h3>{% translate "Fields by model" %}</h3>
  <ul class="qbe-explorer-models">
    {% for node in explorer_data.nodes %}
    <li data-explorer-model>
      <details class="qbe-explorer-model" {% if node.is_root %}open{% endif %}>
        <summary><strong>{{ node.label }}</strong></summary>
        <ul class="qbe-explorer-fields">
        {% for field in explorer_data.fields %}
        {% if field.owner_id == node.id %}
        <li class="qbe-explorer-field" data-explorer-field data-field-path="{{ field.path }}">
          <div class="qbe-explorer-field-description">
            <span data-field-label>{{ field.label }}</span> <code>{{ field.path }}</code>
            {% if field.multi_valued %}<span class="help">{% translate "Multiple values; available for columns and filters only." %}</span>{% endif %}
          </div>
          <details class="qbe-explorer-actions" data-explorer-menu="field" hidden>
            <summary class="button" data-explorer-menu-trigger aria-label="{% blocktranslate with field_label=field.label %}Add actions for {{ field_label }}{% endblocktranslate %}">{% translate "Add" %}</summary>
            <div class="qbe-explorer-action-list">
              <button type="button" data-explorer-action="column" data-field-path="{{ field.path }}">{% translate "Add column" %}</button>
              {% if field.groupable %}<button type="button" data-explorer-action="group" data-field-path="{{ field.path }}">{% translate "Add summary group" %}</button>{% endif %}
              <button type="button" data-explorer-action="filter" data-field-path="{{ field.path }}">{% translate "Add filter" %}</button>
            </div>
          </details>
        </li>
        {% endif %}
        {% endfor %}
        </ul>
      </details>
    </li>
    {% endfor %}
  </ul>
</section>