{% extends "_base.html" %}

{% block content %}
<div class="row row-cards">
  <div class="col-12">
    <div class="card">
      <div class="card-header">
        <h3 class="card-title">Official Worlds</h3>
        <div class="card-actions">
          <span class="text-muted">{{ tracks_info | length }} worlds</span>
        </div>
      </div>
      <div class="card-body">
        <div class="row g-3">
          {% for track_id, track_info in tracks_info.items() %}
          <div class="col-6 col-sm-4 col-md-3 col-lg-2">
            <div class="card card-sm">
              <div class="card-body p-2">
                <div style="width:100%;height:100px;overflow:hidden;" class="d-flex align-items-center justify-content-center bg-light rounded mb-2">
                  <img src="/static/tracks/thumbnail/{{ track_id }}.svg"
                    alt="{{ track_id }}"
                    style="max-width:100%;max-height:100%;object-fit:contain;"
                    onerror="this.style.display='none'">
                </div>
                <div class="text-truncate fw-bold small" title="{{ track_id }}">{{ track_id }}</div>
                <div class="text-muted small">
                  Length: {{ "%.1f" | format(track_info.track_length) }}m<br>
                  Width: {{ "%.2f" | format(track_info.track_width) }}m
                </div>
                <a href="/api/tracks/{{ track_id }}/waypoints" class="btn btn-outline-primary btn-sm w-100 mt-1" download>
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon icon-sm" width="16" height="16" viewBox="0 0 24 24"
                    stroke-width="2" stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round">
                    <path d="M4 17v2a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-2"/>
                    <path d="M7 11l5 5 5-5"/><path d="M12 4v12"/>
                  </svg>
                  Waypoints
                </a>
              </div>
            </div>
          </div>
          {% endfor %}
        </div>
      </div>
    </div>
  </div>
</div>
{% endblock %}