{% extends "admin/base_admin.html" %}
{% set admin_page = "templates" %}

{% block title %}Preview - {{ preview.title }} - Admin{% endblock %}

{% block head %}{{ super() }}
<link rel="stylesheet" href="{{ url_for('static', filename='vendor/leaflet/leaflet.min.css') }}">
{% endblock %}

{% block admin_content %}
  <a href="{{ url_for('admin.template_detail', slug=config.slug) }}" class="text-sm text-slate">&larr; Back to template</a>

  <header class="mt-4 mb-6">
    <h1 class="text-2xl">Article Preview</h1>
    <p class="text-slate text-sm">Language: {{ lang }} | URL: <code>{{ preview.url_path }}</code></p>
  </header>

  {# Meta preview #}
  <div class="card mb-6">
    <h2 class="text-lg mb-2">SEO Preview</h2>
    <div style="font-family: Arial, sans-serif; max-width: 600px;">
      <div style="color: #1a0dab; font-size: 20px; line-height: 1.3;">{{ preview.title }}</div>
      <div style="color: #006621; font-size: 14px; margin: 2px 0;">{{ preview.url_path }}</div>
      <div style="color: #545454; font-size: 14px; line-height: 1.58;">{{ preview.meta_description }}</div>
    </div>
  </div>

  {# Rendered article — overflow:visible needed so Leaflet tile layers render #}
  <div class="card" style="overflow: visible;">
    <h2 class="text-lg mb-4">Rendered HTML</h2>
    <div class="article-body" style="max-width: none;">
      {{ preview.html | safe }}
    </div>
  </div>

  <script>
  window.LEAFLET_JS_URL = '{{ url_for("static", filename="vendor/leaflet/leaflet.min.js") }}';
  window.__MAP_T = {score_label:"Padelnomics Score",venues:"venues",pop:"pop",click_explore:"Click to explore →",coming_soon:"Coming soon",courts:"courts",indoor:"indoor",outdoor:"outdoor"};
  </script>
  <script src="{{ url_for('static', filename='js/map-markers.js') }}"></script>
  <script src="{{ url_for('static', filename='js/article-maps.js') }}"></script>
{% endblock %}
