{% extends "base.html" %}

{% block title %}{{ article.title }} - {{ config.APP_NAME }}{% endblock %}

{% block head %}
{% if article.noindex %}<meta name="robots" content="noindex, follow">{% endif %}
<meta name="description" content="{{ article.meta_description or '' }}">
{% if article.og_image_url %}
<meta property="og:image" content="{{ article.og_image_url }}">
{% endif %}
{% if article.seo_head %}
{{ article.seo_head | safe }}
{% else %}
<meta property="og:title" content="{{ article.title }}">
<meta property="og:description" content="{{ article.meta_description or '' }}">
<meta property="og:type" content="article">
<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": {{ article.title | tojson }},
  "description": {{ (article.meta_description or '') | tojson }},
  {% if article.og_image_url %}"image": {{ article.og_image_url | tojson }},{% endif %}
  "datePublished": "{{ article.published_at[:10] if article.published_at else '' }}",
  "author": {"@type": "Organization", "name": "Padelnomics"},
  "publisher": {
    "@type": "Organization",
    "name": "Padelnomics",
    "logo": {"@type": "ImageObject", "url": "{{ url_for('static', filename='images/logo.png', _external=True) }}"}
  }
}
</script>
{% endif %}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.min.css') }}">
{% endblock %}

{% block content %}
<main class="container-page py-12">
  <article class="article-content" style="max-width: 48rem; margin: 0 auto;">
    <header class="mb-8">
      <h1 class="text-3xl mb-2">{{ article.title }}</h1>
      <p class="text-sm text-slate">
        {% if article.published_at %}{{ t.article_detail_published_label }} {{ article.published_at[:10] }} · {% endif %}{{ t.article_detail_research_label }}
      </p>
    </header>

    <div class="article-body">
      {{ body_html }}
    </div>

    <footer class="mt-12 pt-8 border-t border-light-gray">
      <div class="card" style="text-align: center; padding: 2rem;">
        <h3 class="text-xl mb-2">{{ t.art_run_numbers_h2 }}</h3>
        <p class="text-slate text-sm mb-4">{{ t.art_run_numbers_text }}</p>
        <a href="{{ url_for('planner.index') }}" class="btn">{{ t.art_open_planner_btn }}</a>
      </div>
    </footer>
  </article>
</main>
{% endblock %}

{% block scripts %}
<script>
window.LEAFLET_JS_URL = '{{ url_for("static", filename="vendor/leaflet/leaflet.min.js") }}';
window.__MAP_T = {score_label:"{{ t.map_score_label }}",venues:"{{ t.map_venues }}",pop:"{{ t.map_pop }}",click_explore:"{{ t.map_click_explore }}",coming_soon:"{{ t.map_coming_soon }}",courts:"{{ t.map_courts }}",indoor:"{{ t.map_indoor }}",outdoor:"{{ t.map_outdoor }}",km_nearest:"{{ t.map_km_nearest }}",no_nearby:"{{ t.map_no_nearby }}"};
</script>
{% if map_locations %}
<script id="country-map-data" type="application/json">{{ map_locations | tojson }}</script>
{% endif %}
<script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
<script src="{{ url_for('static', filename='js/article-maps.js') }}"></script>
{% endblock %}
