{% extends "app_base.html" %}

{% block title %}{{ frame.name or "Frame" }} · Stats{% endblock %}
{% block page_title %}{{ frame.name or "Frame " ~ frame.id }}{% endblock %}

{% block tabs %}{% include "_frame_tabs.html" %}{% endblock %}

{% block content %}
  <div class="layout">
    <div class="main-col">
      <section class="card">
        <h2 class="card-title">Battery history</h2>
        <div id="battery-chart-wrap"><p class="sub">Loading...</p></div>
      </section>

      <section class="card">
        <h2 class="card-title">Lifetime stats</h2>
        <div id="stats-box"><p class="sub">Loading...</p></div>
      </section>
    </div>

    <div class="side-col">
      <section class="card">
        <h2 class="card-title">Device</h2>
        <div id="device-status"><p class="sub">Loading...</p></div>
      </section>
    </div>
  </div>

  <div id="result"></div>
{% endblock %}

{% block scripts %}
  <script>window.FRAME_API = {{ ("/api/frames/" ~ frame.id) | tojson }};</script>
  <script src="/static/battery_chart.js"></script>
  <script src="/static/frame_stats.js"></script>
{% endblock %}