{% extends 'base.html' %}

{% block title %}Active Beers — Brew Log{% endblock %}

{% block content %}
<div class="page__head">
    <div>
        <h1 class="page__title">Active Beers</h1>
        <p class="page__sub">Everything currently in the fermenter, with its tap and projected strength.</p>
    </div>
    <div class="btn-row">
        <a class="btn btn--ghost btn--sm" href="{{ url_for('brews.index') }}">Record a reading</a>
        <a class="btn btn--ghost btn--sm" href="{{ url_for('analysis.history') }}">History</a>
    </div>
</div>

<div class="grid grid--3 mb-lg">
    <div class="stat">
        <div class="stat__label">Active brews</div>
        <div class="stat__value">{{ totals.count }}</div>
        <div class="stat__meta">in the fermenter now</div>
    </div>
    <div class="stat">
        <div class="stat__label">Average age</div>
        <div class="stat__value">{{ totals.avg_days }}</div>
        <div class="stat__meta">day{{ '' if totals.avg_days == '1' else 's' }} since first reading</div>
    </div>
    <div class="stat">
        <div class="stat__label">Longest running</div>
        <div class="stat__value">{{ totals.longest_days if totals.longest_days is not none else '—' }}</div>
        <div class="stat__meta">day{{ '' if totals.longest_days == 1 else 's' }} in the fermenter</div>
    </div>
</div>

{% if cards %}
<div class="grid grid--cards">
    {% for run in cards %}
    <article class="brew-card">
        <div class="brew-card__head">
            <div>
                <h2 class="brew-card__name">
                    <a href="{{ url_for('brews.run_detail', run_id=run.beer_run_id) }}">{{ run.canonical_name }}</a>
                </h2>
                <div class="brew-card__meta">
                    Run {{ run.beer_run_id }}
                    {% if run.first_date %} &middot; since {{ run.first_date }}{% endif %}
                    {% if run.reading_count == 1 %} &middot; 1 reading{% else %} &middot; {{ run.reading_count }} readings{% endif %}
                </div>
            </div>
            {% if run.tap_number is not none %}
                <span class="chip chip--tap">Tap {{ run.tap_number }}</span>
            {% else %}
                <span class="chip chip--active">Active</span>
            {% endif %}
        </div>

        <div class="brew-card__stats">
            <div class="brew-card__stat">
                <div class="stat__label">Gravity</div>
                <div class="stat__value">
                    {% if run.min_sg is not none %}{{ run.min_sg_decimal }}{% else %}—{% endif %}
                </div>
                {% if run.min_sg is not none %}
                <div class="stat__meta">{{ run.min_sg_point_scale }} points</div>
                {% endif %}
            </div>
            <div class="brew-card__stat">
                <div class="stat__label">Est. ABV</div>
                <div class="stat__value">
                    {% if run.projected_abv is not none %}{{ '%.2f' % run.projected_abv }}%{% else %}—{% endif %}
                </div>
                <div class="stat__meta">
                    {% if run.projected_abv is not none %}projected{% else %}needs 2nd reading{% endif %}
                </div>
            </div>
            <div class="brew-card__stat">
                <div class="stat__label">Days</div>
                <div class="stat__value">
                    {% if run.days_in_fermenter is not none %}{{ run.days_in_fermenter }}{% else %}—{% endif %}
                </div>
                <div class="stat__meta">day{{ '' if run.days_in_fermenter == 1 else 's' }} brewing</div>
            </div>
        </div>

        {% if run.readings | length > 1 %}
        <div class="brew-card__spark">
            <canvas class="sparkline"
                    data-labels='{{ run.readings | map(attribute="date") | list | tojson }}'
                    data-values='{{ run.readings | map(attribute="sg") | list | tojson }}'></canvas>
        </div>
        {% else %}
        <div class="brew-card__spark brew-card__spark--empty faint tiny">
            One reading so far — the trend appears after the next one.
        </div>
        {% endif %}

        {% if run.last_comment %}
        <div class="small muted">
            <strong class="faint tiny">Latest:</strong> {{ run.last_comment }}
        </div>
        {% endif %}

        {% if run.advice %}
        <div class="advice advice--reading{% if not run.advice_ok %} advice--failed{% endif %}">
            <span class="advice__label">Brewing advice</span>
            {{ run.advice }}
        </div>
        {% endif %}

        <div class="btn-row">
            <a class="btn btn--ghost btn--sm"
               href="{{ url_for('brews.run_detail', run_id=run.beer_run_id) }}">Open run</a>
            <a class="btn btn--sm" href="{{ url_for('brews.index') }}">Add reading</a>
        </div>
    </article>
    {% endfor %}

    {# A tile that fills the last slot and gives the page its missing
       affordance: there is currently no way to start a brew from here. #}
    <a class="brew-card brew-card--new" href="{{ url_for('brews.index') }}">
        <span class="brew-card__new-mark" aria-hidden="true">+</span>
        <span class="brew-card__new-text">
            <strong>Start a new beer</strong>
            <span class="faint tiny">Record its first reading</span>
        </span>
    </a>
</div>
{% else %}
<div class="card">
    <div class="empty">
        <img class="empty__icon" src="{{ url_for('static', filename='img/logo.svg') }}" alt="" width="40" height="40">
        <p><strong>Nothing in the fermenter.</strong></p>
        <p class="small">Start a run by recording its first reading on the
           <a href="{{ url_for('brews.index') }}">brew process page</a>.</p>
    </div>
</div>
{% endif %}
{% endblock %}