{% extends "base.html" %}
{% from "_macros.html" import icon %}
{% set active_nav = 'report' %}
{% block title %}Report{% endblock %}
{% block heading %}Daily report{% endblock %}
{% block content %}
<form method="get" action="{{ url_for('reports.report') }}" class="report-picker">
  <div class="date-nav">
    <a class="date-step" href="{{ url_for('reports.report', date=prev_date) }}" aria-label="Previous day">{{ icon('chevron', 'flip') }}</a>
    <input type="date" name="date" value="{{ selected }}" onchange="this.form.submit()">
    <a class="date-step" href="{{ url_for('reports.report', date=next_date) }}" aria-label="Next day">{{ icon('chevron') }}</a>
  </div>
  <noscript><button class="btn btn-secondary" type="submit">Show</button></noscript>
</form>

<div class="report-totals">
  <div class="stat"><span class="stat-num">{{ totals.assigned }}</span><span>Assigned</span></div>
  <div class="stat stat-done"><span class="stat-num">{{ totals.completed }}</span><span>Completed</span></div>
  <div class="stat stat-spill"><span class="stat-num">{{ totals.spilled_over }}</span><span>Spilled over</span></div>
</div>

{% if not rows %}
  <div class="empty">
    <div class="empty-icon">{{ icon('report') }}</div>
    <p>No tasks were due on {{ selected | nicedate }}.</p>
  </div>
{% else %}
  <p class="page-summary">Tap a person to see their tasks for this day.</p>
  {% for row in rows %}
    <a class="report-card" href="{{ url_for('reports.report_day', date_str=selected, user_id=row.person.id) }}">
      <div class="report-card-main">
        <div class="report-name">{{ row.person.name }}{% if row.is_self %} <span class="you">you</span>{% endif %}</div>
        <div class="report-chips">
          <span class="chip">{{ row.assigned }} assigned</span>
          <span class="chip chip-done">{{ row.completed }} done</span>
          {% if row.spilled_over %}<span class="chip chip-spill">{{ row.spilled_over }} spilled</span>{% endif %}
        </div>
      </div>
      <span class="report-go">{{ icon('chevron', 'ico-sm') }}</span>
    </a>
  {% endfor %}
{% endif %}
{% endblock %}