{% extends "base.html" %}

{% block custom_css %}
<!--  <link rel="stylesheet" href="/stark/static/css/test/annodoc-main.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>{{ _('Results') }}</h6>
      <div class="card">
        <div class="card-content">
          <div class="row">
            <div class="col s12">

              <form action="{{ url_for('result', result_id=request.view_args['result_id']) }}" method="POST" enctype="multipart/form-data" id="submit-form">
                <button class="btn inline btn-large insidebutton margin-top" onclick="window.location.href = '{{url_for('index')}}?lang={{ _('code') }}'; event.preventDefault();">{{ _('Back to chosen settings') }} <i class="material-icons left">keyboard_double_arrow_left</i></button>
                <button class="btn inline right waves-effect waves-light btn-large" type="submit" name="action">{{ _('Download complete results') }}
                  <i class="material-icons right">download</i>
                </button>
              </form>
            </div>
          </div>
          <div class="visualization-table">
            <button class="close-visualization btn-flat grey-text text-darken-1" style="float: right; margin: 10px;">&#10006; {{ _('Close') }}</button>
            <table style="border: none;">
              <thead>
                <tr>
                  <th>{{ _('Visualization') }}</th>
                </tr>
              </thead>
              <tbody>
                <tr >
                  <td ><div class="visualization"></div></td>
                </tr>
              </tbody>
            </table>
            <table style="border: none;">
              <tbody>
                <tr >
                  <td width="50%"><div class="other-examples"></div></td>
                  <td style="border-left: none;"><div class="grew-link"></div></td>
                </tr>
              </tbody>
            </table>
          </div>
          <br/>
          <div class="table-wrapper">
            <table>
              <thead>
                <tr>
                  {% for h, h_t in head %}
                    {% if not h == 'Grew-match URL' %}
                  <th><span>{{ h_t }} </span><span class="th-desc">&#x25be;</span><span class="th-asc">&#x25b4;</span></th>
                    {% endif %}
                  {% endfor %}
                </tr>
              </thead>
              <tbody>
                {% for i in range(content['Tree']|length) %}
                <tr data-other-examples-text="{{_('See all other examples')}}" data-grew-link-text="{{_('See examples in Grew-match')}}" data-exid="{{content['example_id'][i]}}" data-expositions="{{content['example_positions'][i]}}" data-subtree-hash="{{content['subtree_hash'][i]}}" 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' or col == 'example_id' or col == 'example_positions' or col == 'subtree_hash') %}
                  <td>{{ content[col][i] }}</td>
                    {% endif %}
                  {% endfor %}
                </tr>
                {% endfor %}
              </tbody>
            </table>
          </div>
        </div>
      </div>
  </div>
{% endblock %}
{% block custom_js %}
  <script src="/stark/static/js/result.js"></script>
  <script src="/stark/static/js/annodoc/head.min.js"></script>
  <script src="/stark/static/js/annodoc/annodoc.js"></script>
{% endblock %}
