{% extends "page.html" %}

{% block main %}
<div id="main" class="container">
    <div class="row">
        <div class="col-lg-10 col-lg-offset-1">

            <h2>Dashboard {{ dashboard.name }}</h2>

            {% if dashboard.description %}
            <p>{{ dashboard.description | escape }}</p>
            {% endif %}

            <p>Owner: {{ dashboard_user.name }}</p>

            {% if dashboard.created %}
            <p>Created: {{ dashboard.created.strftime('%Y-%m-%d %H:%M:%S') }}</p>
            {% endif %}

            {% if dashboard.started %}
            <p>Started: {{ dashboard.started.strftime('%Y-%m-%d %H:%M:%S') }}</p>
            {% endif %}

        </div>
    </div>

    <div class="row">
        <div class="text-center">
          {% block message %}
          <p>The dashboard is starting up.</p>
          {% endblock %}
          <div class="progress">
            <div id="progress-bar" class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%;">
              <span class="sr-only"><span id="sr-progress">0%</span> Complete</span>
            </div>
          </div>
          <p id="progress-message"></p>
        </div>
    </div>
    <div class="row">
        <div class="col-md-8 col-md-offset-2">
          <details id="progress-details">
            <summary>Event log</summary>
            <div id="progress-log"></div>
          </details>
        </div>
    </div>

    <div class="row">
        <div class="text-center">
          
          <a id="launch" role="button" class="btn btn-lg btn-primary" 
            href="#"
            style="display: none"
          >
              Go to Dashboard
              </a>
        </div>
      </div>

</div>
{% endblock main %}

{% block script %}
{{ super () }}
<script type="text/javascript">
  // hook up event-stream for progress
  var dashboard_progress_url = "{{ progress_url | escape }}";

require(["{{ base_url }}dashboards-static/js/viewdashboard.js"]);
</script>
{% endblock script %}