{% extends "app_home/base.html" %}
{% load static %}
{% load i18n %}

{% block navbar_app %}
{% include 'app_home/_sidebar.html' %}
{% endblock %}


{% block title %}
<h2><i class="fa fa-bar-chart"></i> &nbsp; {% translate "Telemetry" %}</h2>
<hr>
{% endblock %}


{% block content %}

{% include "app_data/telemetry/_dashboards.html" %}

<!-- SELECTOR -->
<form method="get" action="{% url 'telemetry:index' %}" class="row g-2 align-items-end mb-3">

  <div class="col-auto">
    <label class="form-label small mb-0" for="f-key">{% translate "Key" %}</label>
    <select class="form-select form-select-sm" id="f-key" name="key">
      <option value="">-</option>
      {% for k in keys %}<option value="{{ k.key }}" {% if params.key == k.key %}selected{% endif %}>{{ k.key }} ({{ k.type }})</option>{% endfor %}
    </select>
  </div>

  {% if detail %}
  <div class="col-auto">
    <label class="form-label small mb-0" for="f-function">{% translate "Function" %}</label>
    <select class="form-select form-select-sm" id="f-function" name="function">
      {% for f in detail.functions %}<option value="{{ f }}" {% if params.function == f %}selected{% endif %}>{{ f }}</option>{% endfor %}
    </select>
  </div>

  <div class="col-auto">
    <label class="form-label small mb-0" for="f-period">{% translate "Period" %}</label>
    <select class="form-select form-select-sm" id="f-period" name="period">
      {% for p in periods %}<option value="{{ p }}" {% if params.period == p %}selected{% endif %}>{{ p }}</option>{% endfor %}
    </select>
  </div>

  {% if detail.ids %}
  <div class="col-auto">
    <label class="form-label small mb-0" for="f-id">{% translate "ID" %}</label>
    <select class="form-select form-select-sm" id="f-id" name="id">
      <option value="">{% translate "all" %}</option>
      {% for i in detail.ids %}<option value="{{ i }}" {% if params.id == i %}selected{% endif %}>{{ i }}</option>{% endfor %}
    </select>
  </div>
  {% endif %}

  <div class="col-auto">
    <label class="form-label small mb-0" for="f-start">{% translate "Start" %}</label>
    <input class="form-control form-control-sm cv-telemetry-filter" id="f-start" name="start" value="{{ params.start }}" placeholder="now-1d">
  </div>

  <div class="col-auto">
    <label class="form-label small mb-0" for="f-end">{% translate "End" %}</label>
    <input class="form-control form-control-sm cv-telemetry-filter" id="f-end" name="end" value="{{ params.end }}" placeholder="now">
  </div>
  {% endif %}

  <div class="col-auto">
    <label class="form-label small mb-0" for="f-raw">{% translate "Raw events" %}</label>
    <input class="form-control form-control-sm cv-telemetry-filter-sm" id="f-raw" name="raw" type="number" min="1" max="1000" value="{{ raw_limit }}">
  </div>

  <div class="col-auto">
    <button type="submit" class="btn btn-sm btn-outline-secondary">{% translate "Show" %}</button>
  </div>
</form>

{% if detail %}
<p class="cv-telemetry-meta">
  {{ detail.type }}{% if detail.unit %} ({{ detail.unit }}){% endif %}{% if detail.description %} - {{ detail.description }}{% endif %}
  {% for p, r in detail.ranges.items %}
  <span class="ms-2">{{ p }}: {{ r.first|date:"Y-m-d H:i" }} → {{ r.last|date:"Y-m-d H:i" }} ({{ r.count }})</span>
  {% endfor %}
</p>

<div class="cv-telemetry-grid mb-4">
  {% for widget in widgets %}
  {% include "app_data/telemetry/_widget_cell.html" with refresh=0 %}
  {% endfor %}
</div>
{% endif %}

<!-- RAW -->
<h5>{% translate "Last raw events" %}{% if params.key %} - {{ params.key }}{% endif %}</h5>
<pre class="cv-telemetry-raw">{% for line in raw_lines %}{{ line }}
{% empty %}{% translate "No raw event." %}{% endfor %}</pre>

{% endblock %}


{% block script %}
<script src="{% static 'v2/chart.umd.min.js' %}"></script>
<script src="{% static 'v2/telemetry.js' %}?v={{ CAVALIBA_VERSION }}"></script>
{% endblock %}