{% extends "base.html" %}
{% block title %}{{ photographer.display_name }} — Photo Đà Nẵng & Hội An{% endblock %}
{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="">
<style>
  .wrap { max-width: 960px; margin: 0 auto; padding: 1.25rem; }
  .hero { display: grid; gap: 1rem; grid-template-columns: 1fr; }
  @media (min-width: 720px) {
    .hero { grid-template-columns: 1fr 280px; align-items: start; }
  }
  #mini-map { height: 220px; border-radius: 12px; overflow: hidden; border: 1px solid #2a3542; }
  .gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.65rem;
    margin-top: 1.25rem;
  }
  .gallery img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
    border: 1px solid #2a3542;
  }
  .bio { line-height: 1.55; color: #c5d0de; }
  h1 { margin: 0 0 0.35rem; font-size: 1.5rem; }
  .contact { margin-top: 0.75rem; font-size: 0.95rem; }
</style>
{% endblock %}
{% block content %}
<div class="wrap">
  <p class="muted"><a href="{% url 'map' %}">← Về bản đồ</a></p>
  <div class="hero">
    <div>
      <h1>{{ photographer.display_name }}</h1>
      <p>
        {% if photographer.plan == "pro" %}
          <span class="badge badge-pro">Pro</span>
        {% else %}
          <span class="badge">Free</span>
        {% endif %}
        <span class="muted">Portfolio tối đa {{ portfolio_limit }} ảnh theo gói.</span>
      </p>
      {% if photographer.bio %}
        <p class="bio">{{ photographer.bio|linebreaksbr }}</p>
      {% endif %}
      {% if photographer.contact_phone %}
        <p class="contact">Liên hệ: <strong>{{ photographer.contact_phone }}</strong></p>
      {% endif %}
    </div>
    <div>
      <p class="muted" style="margin:0 0 0.35rem;">Khu vực (đã làm mờ)</p>
      <div id="mini-map" aria-label="Bản đồ khu vực ước lượng"></div>
    </div>
  </div>

  <h2 style="margin-top:1.75rem;font-size:1.1rem;">Ảnh đã chụp</h2>
  {% if photographer.portfolio_images.all %}
    <div class="gallery">
      {% for img in photographer.portfolio_images.all %}
        <figure style="margin:0;">
          <a href="{{ img.image.url }}" target="_blank" rel="noopener">
            <img src="{{ img.image.url }}" alt="{{ img.caption|default:photographer.display_name }}" loading="lazy">
          </a>
          {% if img.caption %}<figcaption class="muted" style="font-size:0.8rem;margin-top:0.25rem;">{{ img.caption }}</figcaption>{% endif %}
        </figure>
      {% endfor %}
    </div>
  {% else %}
    <p class="muted">Chưa có ảnh portfolio.</p>
  {% endif %}
</div>
{{ map_coords|json_script:"map-coords" }}
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script>
(function () {
  const c = JSON.parse(document.getElementById("map-coords").textContent);
  const lat = c.lat;
  const lng = c.lng;
  const map = L.map("mini-map", { zoomControl: true, scrollWheelZoom: false });
  L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    maxZoom: 18,
    attribution: "&copy; OSM",
  }).addTo(map);
  L.marker([lat, lng]).addTo(map);
  map.setView([lat, lng], 14);
})();
</script>
{% endblock %}