{% extends '_types/root/_index.html' %}

{% block content %}
<div class="max-w-3xl mx-auto py-8 px-4">
  <h1 class="text-2xl font-bold mb-6">Markets</h1>

  {% if markets %}
  <div class="grid gap-4">
    {% for m in markets %}
    <a href="/{{ m.page.slug }}/{{ m.slug }}/"
       class="block p-6 bg-white border border-stone-200 rounded-lg hover:border-stone-400 transition-colors">
      <h2 class="text-lg font-semibold">{{ m.name }}</h2>
      {% if m.description %}
      <p class="text-stone-600 mt-1">{{ m.description }}</p>
      {% endif %}
    </a>
    {% endfor %}
  </div>
  {% else %}
  <p class="text-stone-500">No markets available.</p>
  {% endif %}
</div>
{% endblock %}