{% extends "panoramix/datasource.html" %}

{% block head_css %}
{{super()}}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='dataTables.bootstrap.css') }}">
{% endblock %}

{% block viz %}
    {{ super() }}
    {% if not error_msg %}
        <table class="dataframe table table-striped table-bordered table-condensed">
          <thead>
            <tr>
              {% for col in df.columns if not col.endswith('__perc') %}  
              <th>{{ col }}</th>
              {% endfor %}
            </tr>
          </thead>
          <tbody>
          {% for row in df.to_dict(orient="records") %}
            <tr>
              {% for col in df.columns if not col.endswith('__perc') %}  
                {% if col + '__perc' in df.columns %}
                <td style="background-image: linear-gradient(to right, lightgrey, lightgrey {{ row[col+'__perc'] }}%, rgba(0,0,0,0) {{ row[col+'__perc'] }}%">{{ row[col] }}</td>
                {% else %}
                  <td>{{ row[col] }}</td>
                {% endif %}
              {% endfor %}
            </tr>
          {% endfor %}
          </tbody>
        </table>
    {% endif %}
{% endblock %}

{% block extra_fields %}
  <div>{{ form.row_limit.label }}: {{ form.row_limit(class_="form-control select2") }}</div>
{% endblock %}

{% block tail %}
{{ super() }}
<script src="{{ url_for('static', filename='jquery.dataTables.min.js') }}"></script>
<script src="{{ url_for('static', filename='dataTables.bootstrap.js') }}"></script>

<script>
    //$('table').css('background-color', 'white');
$(document).ready(function() {
    var table = $('table').DataTable({
        paging: false,
    });
    table.column('-1').order( 'desc' ).draw();
});
</script>
{% endblock %}

