{% extends "app_base.html" %}

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

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

{% block content %}
  <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 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/device_status_bar.js"></script>
  <script src="/static/frame_stats.js"></script>
{% endblock %}