{% extends "simulation-details.html" %}

{% block head %}
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega/3.0.0-beta.31/vega.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-lite/2.0.0-beta.3/vega-lite.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vega-embed/3.0.0-beta.14/vega-embed.js"></script>
{% endblock %}

{% block evaluation %}
  <ol class="breadcrumb">
    <li class="breadcrumb-item">
      <a href="{{ url_for('view_simulation', sim_id=simulation.id) }}">Evaluations</a>
    </li>
    <li class="breadcrumb-item active">{{ evaluation.observable }} </li>
  </ol>
<div class="row">
  <div class="col-md-4">
    <table class="table table-striped">
      <th>Evaluation parameters</th><th></th>
      <tr>
        <td>Selection</td>
        <td>{{ evaluation.selection }}</td>
      </tr>
      {% for param in evaluation_params %}
      <tr>
        <td>{{ param.name }}</td>
        <td>{{ param.value }}</td>
      </tr>
      {% endfor %}
    </table>

    <div id="vis"></div>
    <script type="text/javascript">
      var spec = "{{ url_for('get_evaluation_plot_spec', id=evaluation.id) }}";
      vega.embed('#vis', spec);
    </script>
  </div>
  <div class="col-md-4">
    {% if data.to_html %}
    <div class="card">
      <div class="card-header"><a data-toggle="collapse" href="#data-table">Data</a></div>
      <div id="data-table" class="card-collapse collapse">
        <div class="card-body">
            {{ data.to_html(index=False) | replace('dataframe', 'table table-sm table-bordered table-striped') | safe }}
        </div>
      </div>
    </div>
    {% else %}
      <table class='table'>
        <tr>
          <td>Value</td><td>{{ data }}</td>
        </tr>
      </table>
    {% endif %}
  </div>
</div>
{% endblock %}