{% extends "base.html" %}
{% block title %} - Home{% endblock %}
{% block content %}

<div id="welcome">
    <div class='btn-summary' id="summary-div" data-target="#summary-modal">
      <a class="btn btn-success btn-summary disabled" id='summary-button'>Analysis running, summary not available.</a>
    </div>
  <div class="progress-hint">
      (Percentage of time used by every step. Hover over the sections to see what step it corresponds to)
  </div>
  <div class="progress" id='progress_bar'>
  </div>
  <div class="col-lg-6" id="progress_graph" class="graphviz-graph">
      <!-- Source for the graph (or static image) will go here -->
  </div>
  <div class="col-lg-6">
        <div class="bs-component">
          <table class="table table-striped table-hover">
            <thead>
              <tr>
                <th>Pipeline step</th>
                <th>Started</th>
                <th>Status</th>
              </tr>
            </thead>
            <tbody id="progress_table"></tbody>
          </table>
        </div>
        {% if update %}
        <div class="bs-component">
            <div class="panel panel-primary">
              <div class="panel-heading">
                <h3 class="panel-title">Last log message read</h3>
              </div>
              <div class="panel-body">
                  <pre class="log-message" id='panel-message'>
                  </pre>
              </div>
            </div>
        </div>
        {% endif %}
  </div>
  <!-- SUMMARY MODAL -->
  <div class="modal" id="summary-modal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Summary for "{{ title }}"</h4>
      </div>
      <div class="modal-body">
          <div>
              <h3>Total time</h3>
              <p id='analysis-time'><p>
              <h3>Time (decomposed)</h3>
              <table class="table  table-striped  table-hover" id="times-summary-table">
                  <thead>
                      <tr>
                          <th>Step</th>
                          <th>Duration</th>
                      </tr>
                  </thead>
                  <tbody id="times-summary-table-body"></tbody>
              </table>
          </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>
</div>

{% endblock %}
