{% extends "base.html" %}
{% block title %}Panel: {{ name }}{% endblock %}
{% block content %}
<h2>Panel: <code class="mono">{{ name }}</code>
  {% if model.name %}<span class="muted">-- {{ model.name }}</span>{% endif %}
</h2>
<p><a href="/panel">&larr; Back to panel tools</a>
   &middot; <a href="/panels/{{ name }}/svg">Raw SVG</a></p>

<div class="card">
  <div class="row" style="align-items:baseline">
    <strong>Size</strong>
    <code class="mono">{{ model.width }}&times;{{ model.height }}</code>
    <strong>Elements</strong>
    <span class="muted small">
      {{ model.sensor_icons|length }} sensor,
      {{ model.turnout_icons|length }} turnout,
      {{ model.signal_icons|length }} signal,
      {{ model.memory_icons|length }} memory,
      {{ model.text_labels|length + model.icon_labels|length }} label,
      {{ model.track_segments|length }} track,
      {{ model.layout_turnouts|length }} layout-turnout
    </span>
    <span style="margin-left:auto"></span>
    <button type="button"
            hx-get="/panels/{{ name }}"
            hx-target="body" hx-swap="outerHTML"
            title="Re-render; bean states will reflect current values">Refresh</button>
  </div>
  {% if model.unknown_tags %}
  <p class="muted small">
    Unrendered element types ({{ model.unknown_tags|length }}):
    {% for tag, count in model.unknown_tags.most_common() %}
    <code>{{ tag }}</code>&times;{{ count }}{% if not loop.last %},{% endif %}
    {% endfor %}
  </p>
  {% endif %}
</div>

<div class="card" style="padding:0.5rem;overflow:auto">
  {{ svg|safe }}
</div>
{% endblock %}