{% from "html/macros/layout.html" import row_key %}
{% macro figure(model, anchor_nodes=false) -%}
<figure data-figure-kind="{{ model.kind }}" aria-labelledby="{{ model.figure_id }}-title" aria-describedby="{{ model.figure_id }}-summary">
  <figcaption>
    <strong id="{{ model.figure_id }}-title">{{ model.title }}</strong>
    <span id="{{ model.figure_id }}-summary">{{ model.summary }}</span>
  </figcaption>
  <div class="visualization" aria-hidden="true">{{ model.svg | safe }}</div>
  {% set show_paths = model.nodes | selectattr("paths") | first is defined %}
  {% set show_detail = model.nodes | selectattr("detail") | first is defined %}
  <table class="visualization-fallback">
    <thead><tr><th>{{ t('macros.visualizations.component') }}</th>{% if show_detail %}<th>{{ t('macros.visualizations.what-it-does') }}</th>{% endif %}{% if show_paths %}<th>{{ t('macros.visualizations.paths') }}</th>{% endif %}</tr></thead>
    <tbody>
      {% for node in model.nodes %}
      <tr{% if anchor_nodes %} id="id-{{ node.id }}"{% endif %} data-fallback-id="{{ node.id }}">{{ row_key(pairs=[(t('macros.layout.id'), node.id), (t('macros.layout.name'), node.label), (t('macros.layout.kind'), node.note)]) }}{% if show_detail %}<td>{{ node.detail | inline_code }}</td>{% endif %}{% if show_paths %}<td>{% for path in node.paths %}<code>{{ path }}</code>{% if not loop.last %} {% endif %}{% endfor %}</td>{% endif %}</tr>
      {% endfor %}
    </tbody>
  </table>
  {% if model.edges %}
  <table class="visualization-fallback visualization-edges">
    <thead><tr><th>{{ t('macros.visualizations.from') }}</th><th>{{ t('macros.visualizations.to') }}</th><th>{{ t('macros.visualizations.relation') }}</th></tr></thead>
    <tbody>
      {% for edge in model.edges %}
      <tr data-fallback-edge="{{ edge.source }}-{{ edge.target }}"><td>{{ edge.source | inline_code }}</td><td>{{ edge.target | inline_code }}</td><td>{{ edge.label | inline_code }}</td></tr>
      {% endfor %}
    </tbody>
  </table>
  {% endif %}
</figure>
{%- endmacro %}