{% extends base %}
{% block preamble %}

  <!-- Bootstrap -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
  <!-- Custom Style -->
  <link href="ensemble_monitor/static/css/custom.min.css" rel="stylesheet">

{% endblock %}

{% block contents %}

<div class="container body">
  <div class="main_container">


    <!-- page content -->
    <div class="right_col" role="main">

      <!-- top tiles -->
      <div class="row tile_count">
        {% for name in stats_names %}
        <div class="col-md-2 col-sm-4 col-xs-6 tile_stats_count">
          <span class="count_top"><i class="fa fa-{{stats[name].icon}}"></i> {{ stats[name].label }}</span>
          <div class="count">{{ stats[name].value }}</div>
        </div>
        {% endfor %}
      </div>
      <!-- /top tiles -->

      <div class="row">

          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel tile fixed_height_50 overflow_hidden">
              <div class="row x_title">
                <div class="col-md-6">
                  <h3>Ensemble Status</h3>
                </div>
              </div>
              {{ embed(roots.progress) }}
            </div>
          </div>

      </div>

      <div class="row">

          <div class="col-md-12 col-sm-12 col-xs-12">
            <div class="x_panel tile fixed_height_530 overflow_hidden">
              <div class="row x_title">
                <div class="col-md-6">
                  <h3>Ensemble Members <small>current status</small></h3>
                </div>
              </div>
              {{ embed(roots.job_status) }}
            </div>
          </div>

      </div>

      <div class="row">

        <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="x_panel tile fixed_height_320 overflow_hidden">
            <div class="row x_title">
              <h3>Currently running jobs</h3>
              <div class="clearfix"></div>
            </div>
            {{ embed(roots.data_table) }}
          </div>
        </div>

      </div>

    </div>

  </div>
</div>
<!-- /page content -->

{% endblock %}