{# Service-status card. Expects: bike, summary (BikeSummary). #}
<div class="card due-card {{ status_class(summary.due) }}">
  <div class="due-top">
    <div>
      <h2 class="due-title">Service status</h2>
      <p class="due-summary">{{ status_text(summary.due) }}</p>
    </div>
    <span class="badge {{ status_class(summary.due) }}">{{ status_text(summary.due) }}</span>
  </div>
  <dl class="due-meta">
    {% if summary.due.current_mileage is not none %}
      <dt>Odometer</dt><dd>{{ summary.due.current_mileage | money }} mi</dd>
    {% endif %}
    {% if summary.due.last_service %}
      {% set ls = summary.due.last_service %}
      <dt>Last service</dt><dd>{{ ls.event_date }} &middot; {{ ls.mileage | money }} mi</dd>
    {% endif %}
    <dt>Interval</dt>
    <dd>{% if bike.service_interval_miles %}{{ bike.service_interval_miles | money }} mi{% else %}<span class="muted">not set</span>{% endif %}</dd>
    <dt>Records</dt><dd>{{ summary.event_count }}</dd>
    <dt>Cost to date</dt><dd>{{ summary.total_cost | money }}</dd>
  </dl>
</div>