{% extends "website/base.html" %}
{% load ev_tags %}
{% block title %}Book a Test Ride – {{ site.brand_name }}{% endblock %}
{% block content %}
  {% include "website/partials/page_banner.html" with crumb="Test Ride" heading="Book a" accent="Test Ride" sub="Free, no obligation. Our nearest dealer will confirm your slot." %}
  <section class="section">
    <div class="wrap enquiry">
      <div class="enquiry__info">
        <span class="eyebrow">How it works</span>
        <h2 class="sec-title sec-title--left">Ride before you decide</h2>
        <ol class="mini-steps">
          <li><b>1</b>Pick a model, date and time that suits you.</li>
          <li><b>2</b>The nearest dealer calls to confirm.</li>
          <li><b>3</b>Bring your driving licence and enjoy the ride.</li>
        </ol>
      </div>
      <form class="card form" method="post" novalidate>
        {% csrf_token %}{{ form.website }}
        <h3 class="form__title">Test Ride Request</h3>
        {% if form.non_field_errors %}<div class="form__err">{{ form.non_field_errors.0 }}</div>{% endif %}
        <div class="form__row">
          <label><span class="lbl">Name<span class="req">*</span></span>{{ form.customer_name }}{% if form.customer_name.errors %}<em class="err">{{ form.customer_name.errors.0 }}</em>{% endif %}</label>
          <label><span class="lbl">Mobile<span class="req">*</span></span>{{ form.mobile }}{% if form.mobile.errors %}<em class="err">{{ form.mobile.errors.0 }}</em>{% endif %}</label>
        </div>
        <div class="form__row">
          <label><span class="lbl">Model<span class="req">*</span></span>{{ form.ev_model }}{% if form.ev_model.errors %}<em class="err">{{ form.ev_model.errors.0 }}</em>{% endif %}</label>
          <label><span class="lbl">Preferred location<span class="req">*</span></span>{{ form.preferred_location }}{% if form.preferred_location.errors %}<em class="err">{{ form.preferred_location.errors.0 }}</em>{% endif %}</label>
        </div>
        <div class="form__row">
          <label><span class="lbl">Preferred date<span class="req">*</span></span>{{ form.preferred_date }}{% if form.preferred_date.errors %}<em class="err">{{ form.preferred_date.errors.0 }}</em>{% endif %}</label>
          <label><span class="lbl">Preferred time<span class="req">*</span></span>{{ form.preferred_slot }}</label>
        </div>
        <button type="submit" class="btn btn--orange btn--pill btn--block btn--lg">{% icon "calendar" 18 %} Request Test Ride</button>
      </form>
    </div>
  </section>
{% endblock %}