{% load ev_tags %}
{% if models_json %}
<section class="section section--specs" id="specifications">
  <div class="wrap">
    <header class="sec-head">
      <span class="eyebrow">Compare</span>
      <h2 class="sec-title">Detailed Model <em class="t-orange">Specifications</em></h2>
    </header>
    <div class="spec-tabs" role="tablist" data-spec-tabs>
      {% for m in models_json %}<button type="button" role="tab" class="spec-tab{% if forloop.first %} is-active{% endif %}" data-slug="{{ m.slug }}" aria-selected="{% if forloop.first %}true{% else %}false{% endif %}">{{ m.name }}</button>{% endfor %}
    </div>
    <div class="spec-panel" data-spec-panel>
      <div class="spec-panel__img"><img data-spec-img src="" alt=""></div>
      <div class="spec-panel__body">
        <span class="badge badge--orange" data-spec-flag hidden>Flagship Model</span>
        <h3 class="spec-panel__name" data-spec-name></h3>
        <p class="spec-panel__tag" data-spec-tag></p>
        <dl class="spec-grid" data-spec-grid></dl>
        <div class="spec-extra">
          <div><h4>Extra Features</h4><ul class="ticks" data-spec-extras></ul></div>
          <div><h4>Available Colours</h4><ul class="swatches" data-spec-colours></ul></div>
        </div>
        <div class="spec-panel__foot">
          <div class="spec-price" data-spec-price></div>
          <div class="spec-panel__cta">
            <a class="btn btn--blue btn--pill" data-spec-link href="#">View Full Specifications {% icon "arrow" 16 %}</a>
            <a class="btn btn--orange btn--pill" data-spec-ride href="#">Book a Test Ride {% icon "arrow" 16 %}</a>
          </div>
        </div>
      </div>
    </div>
  </div>
  {{ models_json|json_script:"models-data" }}
  <script>window.TEST_RIDE_URL = "{% url 'website:test_ride' %}";</script>
</section>
{% endif %}