{% extends "base.html" %}
{% from "transmodel_macros.html" import class_link, attribution %}
{% block content %}
<article class="tm-page">
  <p class="eyebrow">Transmodel diagram</p>
  <h1>{{ item.name }}</h1>
  <p class="source-location">{% if item.package %}In package <a href="{{ tm_index_href }}#{{ item.package.anchor }}">{{ item.package.name }}</a>{% endif %}{% if item.ea_page %}<a class="source-link" href="{{ tm.ea_url(item.ea_page) }}" target="_blank" rel="noopener noreferrer" title="Open this diagram at transmodel-cen.eu">View on transmodel-cen.eu</a>{% endif %}</p>
  {% if svg %}
  <p class="muted">Laid out by Graphviz from the classes on the diagram and the relationships between them; EA's notes and hand-made layout are not reproduced. Click a class or attribute to open it.</p>
  <div class="tm-diagram">{{ svg }}</div>
  {% elif item.ea_image %}
  <p class="muted">This diagram is too large to lay out automatically, so this is EA's own image from transmodel-cen.eu. Click a class to open it.</p>
  <div class="tm-diagram tm-ea-image">
    <img src="{{ tm.base_url }}{{ item.ea_image.src }}" width="{{ item.ea_image.width }}" height="{{ item.ea_image.height }}" usemap="#ea-map" alt="Diagram {{ item.name }}" loading="lazy">
    <map name="ea-map">
      {% for coords, href, name in areas %}<area shape="rect" coords="{{ coords }}" href="{{ href }}" alt="{{ name }}" title="{{ name }}">{% endfor %}
    </map>
  </div>
  {% else %}
  <p class="muted">No drawing is available for this diagram.</p>
  {% endif %}

  <section class="section-block compact-section allowed-values used-by-elements">
    <h2>Classes on this diagram</h2>
    <div class="enumeration-values">
      {% for cls in item.classes|sort(attribute='name') %}
      <div class="enumeration-value used-element">{{ class_link(cls) }}</div>
      {% endfor %}
    </div>
  </section>

  {{ attribution(tm) }}
</article>
{% endblock %}