{% extends "base.html" %}
{% block title %}{{ tr('Приложения') }} · {{ dev.name }} — Puntavia{% endblock %}

{% block crumb %}{% with tab = 'overview' %}{% include "_device_head.html" %}{% endwith %}{% endblock %}

{% block content %}

<div class="pagehead">
  <div>
    <h1>{{ tr('На чём уходит время') }}</h1>
    <p class="sub">{{ tr('Все приложения за период и заголовки окон, которые в них встречались чаще всего.') }}</p>
  </div>
  <div class="side">
    <div class="seg">
      {% for n in [7, 14, 30, 60] %}
      <a href="?days={{ n }}" class="{{ 'on' if days == n }}">{{ tr('{n} дней').format(n=n) }}</a>
      {% endfor %}
    </div>
  </div>
</div>

{% if apps %}
<div class="card">
  <div class="bars" style="--b-lab:minmax(140px,220px);--b-sum:86px">
    {% for a in apps %}
    <div class="b">
      <span class="b-lab" title="{{ a.process }}">{{ a.label }}</span>
      <span class="b-track"><i style="width:{{ a.share }}%"></i></span>
      <span class="b-sum">{{ a.human }}</span>
    </div>
    {% endfor %}
  </div>
</div>

<h2>{{ tr('Что было открыто') }}</h2>
<div class="card">
  <ul class="list">
    {% for a in apps %}
    {% if a.titles %}
    <li class="apptitles">
      <div>
        <div class="nm">{{ a.label }}</div>
        <div class="v muted">{{ a.human }}</div>
      </div>
      <div>
        {% for t in a.titles %}<div class="v">{{ t }}</div>{% endfor %}
      </div>
    </li>
    {% endif %}
    {% endfor %}
  </ul>
</div>
{% else %}
<div class="empty">
  <b>{{ tr('За этот период данных нет') }}</b>
  {{ tr('Выберите период побольше или загляните, когда машина поработает.') }}
</div>
{% endif %}
{% endblock %}

{% block head %}
<style>
.list .apptitles{grid-template-columns:220px 1fr;align-items:start}
</style>
{% endblock %}