{% extends "base.html" %}

{% block title %}{{ t.markets_page_title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
<meta name="description" content="{{ t.markets_page_description }}">
<meta property="og:title" content="{{ t.markets_page_og_title }} - {{ config.APP_NAME }}">
<meta property="og:description" content="{{ t.markets_page_og_description }}">
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <header class="mb-8">
    <h1 class="text-3xl mb-2">{{ t.mkt_heading }}</h1>
    <p class="text-slate">{{ t.mkt_subheading }}</p>
  </header>

  <!-- Filters -->
  <div class="card mb-8">
    <div style="display: grid; grid-template-columns: 1fr auto auto; gap: 1rem; align-items: end;">
      <div>
        <label class="form-label" for="market-q">{{ t.markets_search_label }}</label>
        <input type="text" id="market-q" name="q" value="{{ current_q }}" placeholder="{{ t.mkt_search_placeholder }}"
               class="form-input"
               hx-get="{{ url_for('content.market_results') }}"
               hx-target="#market-results"
               hx-trigger="input changed delay:300ms"
               hx-include="#market-country, #market-region">
      </div>
      <div>
        <label class="form-label" for="market-country">{{ t.markets_country_label }}</label>
        <select id="market-country" name="country" class="form-input"
                hx-get="{{ url_for('content.market_results') }}"
                hx-target="#market-results"
                hx-trigger="change"
                hx-include="#market-q, #market-region">
          <option value="">{{ t.mkt_all_countries }}</option>
          {% for c in countries %}
          <option value="{{ c }}" {% if c == current_country %}selected{% endif %}>{{ c }}</option>
          {% endfor %}
        </select>
      </div>
      <div>
        <label class="form-label" for="market-region">Region</label>
        <select id="market-region" name="region" class="form-input"
                hx-get="{{ url_for('content.market_results') }}"
                hx-target="#market-results"
                hx-trigger="change"
                hx-include="#market-q, #market-country">
          <option value="">{{ t.mkt_all_regions }}</option>
          {% for r in regions %}
          <option value="{{ r }}" {% if r == current_region %}selected{% endif %}>{{ r }}</option>
          {% endfor %}
        </select>
      </div>
    </div>
  </div>

  <!-- Results -->
  <div id="market-results">
    {% include "partials/market_results.html" %}
  </div>
</main>
{% endblock %}
