{% 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 }}">
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.min.css') }}">
{% 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>

  <div id="markets-map" style="height:420px; border-radius:12px;" class="mb-4"></div>

  <!-- Map legend -->
  <div class="mb-6" style="display:flex; flex-wrap:wrap; gap:1rem 1.5rem; align-items:center; font-size:0.82rem; color:#64748B;">
    <span style="display:flex; align-items:center; gap:0.3rem;">
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#15803D;"></span>≥60
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#D97706;margin-left:4px;"></span>≥30
      <span style="display:inline-block;width:10px;height:10px;border-radius:50%;background:#DC2626;margin-left:4px;"></span>&lt;30
    </span>
    <span style="display:flex; align-items:center; gap:0.35rem;">
      <span style="display:inline-block; width:12px; height:12px; border-radius:50%; background:#64748B; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
      <span style="display:inline-block; width:18px; height:18px; border-radius:50%; background:#64748B; border:2px solid white; box-shadow:0 1px 3px rgba(0,0,0,0.2);"></span>
      {{ t.mkt_legend_size }}
    </span>
  </div>

  <!-- 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 %}

{% block scripts %}
<script src="{{ url_for('static', filename='vendor/leaflet/leaflet.min.js') }}"></script>
<script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
<script>
window.__MAP_T = {score_label:"{{ t.map_score_label }}",venues:"{{ t.map_venues }}",cities:"{{ t.map_cities }}"};
(function() {
  var sc = PNMarkers.scoreColor;
  var T = window.__MAP_T;
  var map = L.map('markets-map', {scrollWheelZoom: false}).setView([48.5, 10], 4);
  L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}{r}.png', {
    attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OSM</a> &copy; <a href="https://carto.com/">CARTO</a>',
    maxZoom: 18
  }).addTo(map);

  var data = {{ map_countries | tojson }};
  if (data.length) {
    var maxV = Math.max.apply(null, data.map(function(d) { return d.total_venues; }));
    var lang = document.documentElement.lang || 'en';
    data.forEach(function(c) {
      if (!c.lat || !c.lon) return;
      var size = 12 + 44 * Math.sqrt(c.total_venues / maxV);
      var score = c.avg_opportunity_score || 0;
      var hex = sc(score);
      var tip = '<strong>' + c.country_name + '</strong><br>'
        + '<span style="display:inline-block;width:8px;height:8px;border-radius:50%;background:' + hex + ';vertical-align:middle;margin-right:4px;"></span>'
        + '<span style="color:' + hex + ';font-weight:600;">' + T.score_label + ': ' + score + '/100</span><br>'
        + '<span style="color:#94A3B8;font-size:0.75rem;">' + c.total_venues + ' ' + T.venues + ' · ' + c.city_count + ' ' + T.cities + '</span>';
      L.marker([c.lat, c.lon], { icon: PNMarkers.makeIcon({ size: size, color: hex }) })
        .bindTooltip(tip, { className: 'map-tooltip', direction: 'top', offset: [0, -Math.round(size / 2)] })
        .on('click', function() { window.location = '/' + lang + '/markets/' + c.country_slug; })
        .addTo(map);
    });
  }
})();
</script>
{% endblock %}
