{% load ev_tags %}
<article class="mcard">
  <a href="{{ m.get_absolute_url }}" class="mcard__img">{% if m.image %}<img src="{{ m.image.url }}" alt="{{ m.name }} electric scooter" loading="lazy">{% endif %}</a>
  <h3 class="mcard__name">{{ m.name }}</h3>
  <p class="mcard__tag">{{ m.tagline }}</p>
  <ul class="mcard__specs">
    <li>{% icon "battery" 22 "c-green" %}<span><small>Range</small>{{ m.range_display }}</span></li>
    <li>{% icon "bolt" 22 "c-green" %}<span><small>Motor</small>{{ m.motor_power_w|default:"—" }} Watt</span></li>
    <li>{% icon "weight" 22 %}<span><small>Load</small>{{ m.load_capacity_kg|default:"—" }} Kg</span></li>
  </ul>
  {% if m.short_description %}<p class="mcard__desc">{{ m.short_description }}</p>{% endif %}
  {% if m.price %}
  <div class="mcard__price">
    {% if m.price.customer_discount %}<s>₹{{ m.price.list_price_incl_gst|inr }}</s>{% endif %}
    <strong>₹{{ m.price.customer_total|inr }}</strong>
    <small>ex-showroom incl. GST{% if m.price.discount_name %} · {{ m.price.discount_name }}{% endif %}</small>
  </div>
  {% endif %}
  <a href="{{ m.get_absolute_url }}" class="btn btn--navy btn--pill btn--sm">View Details {% icon "arrow" 15 %}</a>
</article>