{% if not included %}
{% extends 'index.html' %}
{% endif %}

{% block title %}
RTC plots
{% endblock title %}



{% block content%}

<section class="row">

<h5>plot</h5>
  {% for d in data %}

  <div class="col-3">
    <figure class="card">
      <canvas id="{{d.id}}"
              width="500" height="500"
              style="border:1px solid gray;">
        plot here
      </canvas>

      <!-- <img class="card-img-top" src="{{d.image}}"> -->

      <aside class="card-body" id="{{d.id}}-info">
        <h5 class="card-title">{{d.name}}</h5>

        <form class="row" id="f-{{d.id}}">
          <div class="col-3 col-form-label">
            <span>Color</span>
            <label for="min-{{d.id}}">min</label>
            <span>,</span>
            <label for="max-{{d.id}}">max</label>
          </div>
          <div class="col">
            <div class="input-group">
              <input id="min-{{d.id}}" type="number" class="form-control">
              <input id="max-{{d.id}}" type="number" class="form-control">
            </div>
          </div>
        </form>

        <dl>
          {% for k, v in d.info %}
          <div class="row">
            <dt class="col">{{v}}</dt>
            <dd id="image-{{k}}-{{d.id}}" class="col">value</dd>
          </div>
          {% endfor %}
        </dl>

      </aside>
    </figure>
  </div>
  <script>
  </script>
  {% endfor %}

</section>


{% endblock content %}
