{# 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 class="renewals">
    <div class="renewal">
      <span class="renewal-label">MOT</span>
      <span class="badge {{ renewal_class(summary.mot) }} {{ summary.mot.status }}">{{ renewal_text(summary.mot) }}</span>
      <span class="muted">due {{ summary.mot.due_date if summary.mot.due_date else 'n/a' }}</span>
    </div>
    <div class="renewal">
      <span class="renewal-label">Insurance</span>
      <span class="badge {{ renewal_class(summary.insurance) }} {{ summary.insurance.status }}">{{ renewal_text(summary.insurance) }}</span>
      <span class="muted">due {{ summary.insurance.due_date if summary.insurance.due_date else 'n/a' }}</span>
    </div>
  </div>
</div>