{% extends "base.html" %}
{% block title %}{{ bike.name }} - volundr{% endblock %}
{% block content %}
<div class="page-head">
  <h1>{{ bike.name }}</h1>
  <a href="/bikes/{{ bike.id }}/edit" class="btn">Edit</a>
</div>

<div id="bike-body">
  {% include "components/service_card.html" with context %}

  <section class="card list-card">
    {% include "events/list.html" with context %}
  </section>
</div>

<section class="card">
  <h2>Log a new event</h2>
  <form method="post" action="/bikes/{{ bike.id }}/events" novalidate
        hx-post="/bikes/{{ bike.id }}/events"
        hx-target="#bike-body"
        hx-swap="innerHTML"
        hx-indicator="#busy-btn"
        hx-on::after-request="this.reset()">
    <input type="hidden" name="csrf" value="{{ csrf }}">
    <div class="form-row">
      <label>
        <span>Type</span>
        <select name="type" required>
          {% for t in event_types %}
            <option value="{{ t }}">{{ t }}</option>
          {% endfor %}
        </select>
      </label>
      <label>
        <span>Date</span>
        <input type="date" name="event_date" required max="{{ today.isoformat() }}"
               value="{{ today.isoformat() }}">
      </label>
    </div>
    <div class="form-row">
      <label>
        <span>Mileage (optional)</span>
        <input type="number" name="mileage" min="0" step="1"
               {% if summary.due.current_mileage is not none %}value="{{ summary.due.current_mileage }}"{% endif %}>
        <small class="muted">Odometer reading at this event{% if summary.due.current_mileage is not none %}. Prefilled with your last reading of {{ summary.due.current_mileage | money }} mi; just nudge it up{% endif %}.</small>
      </label>
      <label>
        <span>Cost (optional)</span>
        <input type="number" name="cost" min="0" step="1">
      </label>
    </div>
    <label>
      <span>Notes</span>
      <textarea name="notes" rows="2"></textarea>
    </label>
    <div class="form-actions">
      <button type="submit" class="btn btn-primary" id="busy-btn">
        <span class="btn-label">Add event</span>
        <span class="btn-busy">Adding&hellip;</span>
      </button>
      <p class="add-note">
        Tip: logging a <em>service</em> with the current mileage keeps your due
        date accurate.
      </p>
    </div>
  </form>
</section>
{% endblock %}