{% extends "base.html" %}

{% block custom_css %}
  <link rel="stylesheet" href="/stark/static/css/test/style-vis.css"/>
  <link rel="stylesheet" href="/stark/static/css/test/turkunlp.css"/>
{% endblock %}
{% block content %}
  <div class="container wider-container">
    <br>


      <!-- Your table with many columns -->
      <h6>{{ _('Examples') }}</h6>
      <div class="card">
        <div class="card-content">
          <div class="table-wrapper2">
            <table>
              <thead>
                <tr>
                  {% for h, h_t in head %}
                    {% if not h == 'Grew-match URL' %}
                  <th><span>{{ h_t }} </span></th>
                    {% endif %}
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for i in range(content['Tree']|length) %}
                <tr class="tr-link" data-toggle="tooltip" title="See an example" data-href={% if 'Grew-match URL' in content %}{{ content['Grew-match URL'][i] }}{% else %}unknown{% endif %}>
                  {% for col in content %}
                    {% if not (col == 'Grew-match URL') %}
                  <td>{{ content[col][i] }}</td>
                    {% endif %}
                  {% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
          <br/>
          <div class="visualization-table">
            <table style="border: none;">
              <thead>
                <tr>
                  <th>{{ _('Examples') }}</th>
                </tr>
              </thead>
              <tbody>
                {% for i in range(visualization['example_id']|length) %}
                <tr style="border-bottom: none;">
                  <td >ID: {{visualization['example_id'][i]}}</td>
                </tr>
                <tr style="border-top: none;">
                  <td ><div class="visualization" data-example-positions="{{visualization['example_positions'][i]}}" data-example-id="{{visualization['example_id'][i]}}"></div></td>
                </tr>
                {% endfor %}
              </tbody>
            </table>
            <table style="border: none;">
              <tbody>
                <tr >
                  <td width="50%"><div class="grew-link"></div></td>
                  <td style="border-left: none;"><div class="other-examples"></div></td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>
{% endblock %}
{% block custom_js %}
  <script src="/stark/static/js/annodoc/head.min.js"></script>
  <script src="/stark/static/js/annodoc/annodoc.js"></script>
  <script src="/stark/static/js/examples.js"></script>
{% endblock %}