{% extends "website/base.html" %}
{% block title %}EV Models – {{ site.brand_name }}{% endblock %}
{% block content %}
  {% include "website/partials/page_banner.html" with crumb="Models" heading="Our EV" accent="Scooter Range" sub="Compare range, power and price across every ATMOSPHERE EV model." %}
  <section class="section">
    <div class="wrap"><div class="grid grid--4">{% for m in models %}{% include "website/partials/model_card.html" %}{% endfor %}</div></div>
  </section>
  {% include "website/partials/sec_specs.html" %}
  <section class="section section--tight">
    <div class="wrap">
      <header class="sec-head"><h2 class="sec-title">Side-by-side <em class="t-blue">comparison</em></h2></header>
      <div class="table-wrap">
        <table class="compare">
          <thead><tr><th>Specification</th>{% for m in models %}<th><a href="{{ m.get_absolute_url }}">{{ m.name }}</a></th>{% endfor %}</tr></thead>
          <tbody>
            <tr><td>Range</td>{% for m in models %}<td>{{ m.range_display }}</td>{% endfor %}</tr>
            <tr><td>Motor power</td>{% for m in models %}<td>{{ m.motor_power_w|default:"—" }} W</td>{% endfor %}</tr>
            <tr><td>Top speed</td>{% for m in models %}<td>{{ m.top_speed_kmph|default:"—" }} Km/h</td>{% endfor %}</tr>
            <tr><td>Load capacity</td>{% for m in models %}<td>{{ m.load_capacity_kg|default:"—" }} Kg</td>{% endfor %}</tr>
            <tr><td>Battery</td>{% for m in models %}<td>{{ m.battery|default:"—" }}</td>{% endfor %}</tr>
            <tr><td>Charging time</td>{% for m in models %}<td>{{ m.charging_time|default:"—" }}</td>{% endfor %}</tr>
            <tr><td>Brakes</td>{% for m in models %}<td>{{ m.brakes|default:"—" }}</td>{% endfor %}</tr>
            <tr><td>Warranty</td>{% for m in models %}<td>{{ m.warranty|default:"—" }}</td>{% endfor %}</tr>
            {% load ev_tags %}
            <tr class="compare__price"><td>Price (ex-showroom, incl. GST)</td>{% for m in models %}<td>{% if m.price %}₹{{ m.price.customer_total|inr }}{% else %}On request{% endif %}</td>{% endfor %}</tr>
          </tbody>
        </table>
      </div>
    </div>
  </section>
{% endblock %}