{% extends "admin/base.html" %}

{% block title %}Huey{% endblock %}
{% block content_title %}Huey{% endblock %}
{% block content_tagline %}task queue{% endblock %}

{% block breadcrumbs %}
  <li class="breadcrumb-item"><a href="{{ panel.dashboard_url() }}">Dashboard</a></li>
  <li class="breadcrumb-item active">Huey</li>
{% endblock %}

{% block extra_script %}
<style>
  .huey-tile { font-variant-numeric: tabular-nums; }
  .huey-tile .val { font-size: 1.6rem; line-height: 1.1; font-weight: 600; }
  .huey-tile .lbl { font-size: .75rem; text-transform: uppercase; letter-spacing: .03em; }
  .huey-tile .sub { font-size: .7rem; margin-top: .1rem; }
  .huey-chart svg { width: 100%; height: 64px; display: block; }
  table.huey-tbl { font-variant-numeric: tabular-nums; }
  table.huey-tbl td, table.huey-tbl th { vertical-align: middle; }
  .huey-mono { font-family: var(--bs-font-monospace); font-size: .8rem; }
  .huey-err { max-width: 32rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
</style>
{% endblock %}

{% block content %}
<div id="hp-content" data-url="{{ url_for(panel.get_url_name('fragment')) }}">
  {% include "admin/huey/_content.html" %}
</div>

<script>
(function () {
  var box = document.getElementById('hp-content');
  if (!box) return;
  var url = box.getAttribute('data-url');
  var last = '';
  function refresh() {
    fetch(url, {headers: {'X-Requested-With': 'fetch'}})
      .then(function (r) { return r.text(); })
      .then(function (html) { if (html !== last) { last = html; box.innerHTML = html; } })
      .catch(function () {});
  }
  setInterval(refresh, 5000);
})();
</script>
{% endblock %}