{% load ev_tags %}
<section class="hero" data-slider data-autoplay="6500" aria-roledescription="carousel" aria-label="Featured scooters">
  {% for s in slides %}
  <div class="hero__slide{% if forloop.first %} is-active{% endif %}" data-slide aria-roledescription="slide" aria-label="{{ forloop.counter }} of {{ slides|length }}">
    <img class="hero__bg" src="{{ s.image.url }}" alt="" {% if not forloop.first %}loading="lazy"{% endif %}>
    <div class="wrap hero__in">
      <div class="hero__copy">
        <h1 class="hero__title">
          <span class="hero__t1">{{ s.headline }} {% if s.headline_accent %}<em>{{ s.headline_accent }}</em>{% endif %}</span>
          {% if s.subheadline %}<span class="hero__t2">{{ s.subheadline }}</span>{% endif %}
        </h1>
        {% if s.tagline %}<p class="hero__tag">{{ s.tagline }}</p>{% endif %}
        <ul class="hero__pills">
          <li><span class="hero__pill-ic is-green">{% icon "leaf" 22 %}</span>Eco<br>Friendly</li>
          <li><span class="hero__pill-ic">{% icon "bolt" 22 %}</span>Cost<br>Efficient</li>
          <li><span class="hero__pill-ic">{% icon "gauge" 22 %}</span>Powerful<br>Performance</li>
          <li><span class="hero__pill-ic">{% icon "shield" 22 %}</span>Reliable<br>&amp; Safe</li>
        </ul>
        <div class="hero__cta">
          <a href="{% url 'website:models' %}" class="btn btn--orange btn--pill btn--lg">Explore Models {% icon "arrow" 18 %}</a>
          <a href="{% url 'website:test_ride' %}{% if s.ev_model %}?model={{ s.ev_model.slug }}{% endif %}" class="btn btn--ghost btn--pill btn--lg">{% icon "scooter" 20 %} Book a Test Ride</a>
        </div>
      </div>
      {% if s.ev_model %}{% with m=s.ev_model %}
      <ul class="hero__specs" aria-label="{{ m.name }} highlights">
        <li>{% icon "battery" 30 %}<span><b>Long Range</b>Up to {{ m.range_km_max|default:m.range_km_min }} Km</span></li>
        {% if m.top_speed_kmph %}<li>{% icon "gauge" 30 %}<span><b>Top Speed</b>{{ m.top_speed_kmph }} Km/h</span></li>{% endif %}
        {% if m.motor_power_w %}<li>{% icon "bolt" 30 %}<span><b>Motor Power</b>Up to {{ m.motor_power_w }} W</span></li>{% endif %}
        {% if m.warranty %}<li>{% icon "shield" 30 %}<span><b>Warranty</b>{{ m.warranty }}</span></li>{% endif %}
      </ul>
      {% endwith %}{% endif %}
    </div>
  </div>
  {% endfor %}
  {% if slides|length > 1 %}
  <button class="hero__nav hero__nav--prev" type="button" data-prev aria-label="Previous slide">{% icon "chev-l" 22 %}</button>
  <button class="hero__nav hero__nav--next" type="button" data-next aria-label="Next slide">{% icon "chev-r" 22 %}</button>
  <div class="hero__dots" data-dots></div>
  {% endif %}
</section>