{% extends "website/base.html" %}
{% load ev_tags %}
{% block title %}{{ model.name }} – {{ site.brand_name }}{% endblock %}
{% block meta_description %}{{ model.name }}: {{ model.range_display }} range, {{ model.motor_power_w }} W motor, {{ model.load_capacity_kg }} kg load. {{ model.short_description }}{% endblock %}
{% block content %}
<section class="detail-hero">
  <div class="wrap detail">
    <div class="detail__img">{% if model.image %}<img src="{{ model.image.url }}" alt="{{ model.name }}">{% endif %}</div>
    <div class="detail__body">
      <nav class="crumbs crumbs--dark"><a href="{% url 'website:home' %}">Home</a><span>/</span><a href="{% url 'website:models' %}">Models</a><span>/</span>{{ model.name }}</nav>
      {% if model.is_flagship %}<span class="badge badge--orange">Flagship Model</span>{% endif %}
      <h1 class="detail__name">{{ model.name }}</h1>
      <p class="detail__tag">{{ model.tagline }}</p>
      {% if model.description or model.short_description %}<p class="lead">{{ model.description|default:model.short_description }}</p>{% endif %}
      <div class="chips">
        <div class="chip">{% icon "battery" 22 %}<span><small>Range</small>{{ model.range_display }}</span></div>
        <div class="chip">{% icon "bolt" 22 %}<span><small>Motor</small>{{ model.motor_power_w|default:"—" }} W</span></div>
        <div class="chip">{% icon "gauge" 22 %}<span><small>Top Speed</small>{{ model.top_speed_kmph|default:"—" }} Km/h</span></div>
        <div class="chip">{% icon "weight" 22 %}<span><small>Load</small>{{ model.load_capacity_kg|default:"—" }} Kg</span></div>
        <div class="chip">{% icon "battery" 22 %}<span><small>Battery</small>{{ model.battery|default:"—" }}</span></div>
        <div class="chip">{% icon "shield" 22 %}<span><small>Warranty</small>{{ model.warranty|default:"—" }}</span></div>
      </div>
      {% if model.price %}{% with p=model.price %}
      <div class="price-box">
        <div class="price-box__rows">
          <div><span>Ex-showroom price</span><span>₹{{ p.ex_showroom_pre_gst|inr }}</span></div>
          {% if p.customer_discount %}<div class="is-disc"><span>{{ p.discount_name|default:"Discount" }}</span><span>− ₹{{ p.customer_discount|inr }}</span></div>{% endif %}
          <div><span>GST ({{ p.gst_rate|pct }}%)</span><span>₹{{ p.gst_amount|inr }}</span></div>
        </div>
        <div class="price-box__total"><span>Your Price</span><strong>₹{{ p.customer_total|inr }}</strong></div>
        <small>Ex-showroom. Registration, insurance and accessories extra where applicable.</small>
      </div>
      {% endwith %}{% endif %}
      <div class="detail__cta">
        <a href="{% url 'website:test_ride' %}?model={{ model.slug }}" class="btn btn--orange btn--pill btn--lg">{% icon "scooter" 20 %} Book a Test Ride</a>
        <a href="#enquiry" class="btn btn--blue btn--pill btn--lg">Enquire Now {% icon "arrow" 18 %}</a>
      </div>
    </div>
  </div>
</section>

<section class="section section--tight">
  <div class="wrap detail-specs">
    <div class="card">
      <h2 class="card__title">Full Specifications</h2>
      <dl class="spec-list">
        <div><dt>Range</dt><dd>{{ model.range_display }}</dd></div>
        <div><dt>Battery</dt><dd>{{ model.battery|default:"—" }}</dd></div>
        <div><dt>Motor Power</dt><dd>{{ model.motor_power_w|default:"—" }} W</dd></div>
        <div><dt>Top Speed</dt><dd>{{ model.top_speed_kmph|default:"—" }} Km/h</dd></div>
        <div><dt>Loading Capacity</dt><dd>{{ model.load_capacity_kg|default:"—" }} Kg</dd></div>
        <div><dt>Charger</dt><dd>{{ model.charger|default:"—" }}</dd></div>
        <div><dt>Charging Time</dt><dd>{{ model.charging_time|default:"—" }}</dd></div>
        <div><dt>Tyre</dt><dd>{{ model.tyre|default:"—" }}</dd></div>
        <div><dt>Brakes</dt><dd>{{ model.brakes|default:"—" }}</dd></div>
        <div><dt>Suspension</dt><dd>{{ model.suspension|default:"—" }}</dd></div>
        <div><dt>Warranty</dt><dd>{{ model.warranty|default:"—" }}</dd></div>
      </dl>
    </div>
    <div class="card">
      <h2 class="card__title">Extra Features</h2>
      <ul class="ticks">{% for f in model.extra_features_list %}<li>{% icon "check" 16 %}{{ f }}</li>{% empty %}<li>—</li>{% endfor %}</ul>
      <h2 class="card__title mt">Available Colours</h2>
      <ul class="swatches">{% for c in model.colours.all %}<li><i style="background:{{ c.hex_code }}"></i>{{ c.name }}</li>{% empty %}<li>Contact us for colour options</li>{% endfor %}</ul>
    </div>
  </div>
</section>

{% if others %}
<section class="section section--tight section--alt">
  <div class="wrap">
    <header class="sec-head"><h2 class="sec-title">Other <em class="t-green">Models</em></h2></header>
    <div class="grid grid--3">{% for m in others %}{% include "website/partials/model_card.html" %}{% endfor %}</div>
  </div>
</section>
{% endif %}
{% include "website/partials/sec_enquiry.html" with enquiry_heading="Interested in this model?" %}
{% endblock %}