{% extends "area_base.html" %}

{% block title %}{{ page.title if page else 'Botanical Drawing' }} | TheOrganist24{% endblock %}

{% block extra_head %}
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
<style>
  /* Drawings carousel — reuses the shared cs- engine (carousel.css/js);
     only the slide body and image fit are overridden here. */
  .bd-carousel { margin: 1.5rem auto 2.5rem; }

  .cs-carousel.bd-carousel .cs-slide { cursor: default; }

  .cs-carousel.bd-carousel .cs-slide img {
    aspect-ratio: 3 / 4;
    object-fit: contain;   /* drawings: never crop the artwork */
    background: #fff;
    cursor: zoom-in;
  }

  .cs-carousel.bd-carousel .cs-slide figcaption.bd-meta {
    font-style: normal;
    font-size: 0.95rem;
    color: inherit;
    text-align: left;
    margin-top: 0.8rem;
  }

  .bd-meta__latin {
    display: block;
    font-size: 1.15rem;
    line-height: 1.25;
  }

  .bd-meta__common {
    display: block;
    color: var(--muted, #6b6259);
    margin: 0.1rem 0 0.65rem;
  }

  .bd-meta dl {
    display: grid;
    grid-template-columns: repeat(2, auto);
    gap: 0.4rem 1.5rem;
    margin: 0;
  }

  .bd-meta dl > div {
    border-top: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
    padding-top: 0.3rem;
  }

  .bd-meta dt {
    margin: 0;
    font-size: 0.68rem;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--muted, #6b6259);
  }

  .bd-meta dd {
    margin: 0.1rem 0 0;
    font-weight: 600;
  }

  /* Plant map — deliberately no tile layer (privacy); paper-toned void. */
  .bd-map {
    height: 460px;
    margin: 1.5rem 0 2rem;
    border: 1px solid var(--rule, rgba(0, 0, 0, 0.14));
    border-radius: 6px;
  }

  .bd-map.leaflet-container { background: #f4f1ea; }

  .bd-garden-label {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #2f6b3c;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 0.02em;
  }
  .bd-garden-label::before { display: none; }  /* drop the tooltip pointer */

  @media (max-width: 860px) {
    .bd-map { height: 320px; }
  }
</style>
{% endblock %}

{% block area_content %}
{#
  Botanical name, correctly styled: genus / species / infraspecific epithets
  italic; rank abbreviations roman; cultivar roman in single quotes. `crossed`
  is placed as a hybrid marker between genus and species (the common nothospecies
  case, e.g. Salix × fragilis) — adjust if it carries a fuller formula.
#}
{% macro latin_name(p) -%}
  {%- if p.genus %}<em>{{ p.genus }}</em>{% endif -%}
  {%- if p.crossed %} {{ p.crossed }}{% endif -%}
  {%- if p.species %} <em>{{ p.species }}</em>{% endif -%}
  {%- if p.subspecies %} subsp. <em>{{ p.subspecies }}</em>{% endif -%}
  {%- if p.variety %} var. <em>{{ p.variety }}</em>{% endif -%}
  {%- if p.forma %} f. <em>{{ p.forma }}</em>{% endif -%}
  {%- if p.cultivar %} &lsquo;{{ p.cultivar }}&rsquo;{% endif -%}
{%- endmacro %}

<h1>{{ page.title if page else 'Botanical Drawing' }}</h1>
{% if page and page.body %}
  <p>{{ page.body }}</p>
{% endif %}

{% if drawings %}
<div class="cs-carousel cs-carousel--large bd-carousel" style="--cs-slide-w: 420px;">
  <div class="cs-carousel-wrap">
    <div class="cs-track">
      {% for d in drawings %}
        {% set src = url_for('assets.serve', asset_path=d.filepath) %}
        <figure class="cs-slide"
                data-src="{{ src }}"
                data-alt="{{ latin_name(d.plant) | striptags }}">
          <img src="{{ src }}"
               alt="{{ latin_name(d.plant) | striptags }}"
               loading="lazy">
          <figcaption class="bd-meta">
            <span class="bd-meta__latin">{{ latin_name(d.plant) }}</span>
            {% if d.plant.common_names %}
              <span class="bd-meta__common">{{ d.plant.common_names | join(', ') }}</span>
            {% endif %}
            <dl>
              <div><dt>Part</dt><dd>{{ d.part.value }}</dd></div>
              <div><dt>Medium</dt><dd>{{ d.medium.value }}</dd></div>
              <div><dt>Created</dt><dd>{{ d.created.strftime('%-d %B %Y') }}</dd></div>
            </dl>
          </figcaption>
        </figure>
      {% endfor %}
    </div>
    {% if drawings | length > 1 %}
      <button class="cs-arrow cs-arrow--prev" aria-label="Previous">&#8249;</button>
      <button class="cs-arrow cs-arrow--next" aria-label="Next">&#8250;</button>
    {% endif %}
  </div>
</div>
{% else %}
<p>No botanical drawings are currently catalogued.</p>
{% endif %}

<h2>Where these plants grow</h2>
{% if plant_locations or gardens %}
<div id="bd-map" class="bd-map"></div>

<script>
  const bdPlants = [
    {% for loc in plant_locations %}
    {
      key: {{ latin_name(loc.plant) | striptags | trim | tojson }},
      latin: {{ latin_name(loc.plant) | trim | tojson }},
      common: {{ loc.plant.common_names | join(', ') | tojson }},
      geojson: {{ loc.geojson | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  const bdGardens = [
    {% for g in gardens %}
    {
      name: {{ g.name | tojson }},
      geojson: {{ g.geojson | tojson }}
    }{% if not loop.last %},{% endif %}
    {% endfor %}
  ];

  // Latest carousel slide per illustrated plant, keyed by botanical name.
  // Drawings render in created order; the most recent created date wins.
  const bdLatestSlide = {};
  {% for d in drawings %}
  {
    const key = {{ latin_name(d.plant) | striptags | trim | tojson }};
    const created = {{ d.created.isoformat() | tojson }};
    if (!(key in bdLatestSlide) || created >= bdLatestSlide[key].created) {
      bdLatestSlide[key] = { index: {{ loop.index0 }}, created: created };
    }
  }
  {% endfor %}

  function bdGoToSlide(index) {
    const carousel = document.querySelector(".bd-carousel");
    if (carousel && carousel.csCarousel) {
      carousel.csCarousel.goTo(index);
      carousel.scrollIntoView({ behavior: "smooth", block: "center" });
    }
  }

  // No tile layer: the map is intentionally basemap-free so the location
  // isn't advertised. attributionControl off as there is nothing to credit.
  const bdMap = L.map("bd-map", { attributionControl: false });
  const bdBounds = L.latLngBounds([]);

  const gardenStyle = {
    color: "#2f6b3c", weight: 2,
    fillColor: "#2f6b3c", fillOpacity: 0.06
  };

  bdGardens.forEach(function (garden) {
    if (!garden.geojson) { return; }
    const layer = L.geoJSON(JSON.parse(garden.geojson), { style: gardenStyle });
    if (garden.name) {
      layer.bindTooltip(garden.name + " Garden", {
        permanent: true, direction: "center", className: "bd-garden-label"
      });
    }
    layer.addTo(bdMap);
    bdBounds.extend(layer.getBounds());
  });

  bdPlants.forEach(function (plant) {
    if (!plant.geojson) { return; }

    const illustrated = plant.key in bdLatestSlide;
    const colour = illustrated ? "#2f6b3c" : "#c0532f";

    const layer = L.geoJSON(JSON.parse(plant.geojson), {
      pointToLayer: function (feature, latlng) {
        return L.circleMarker(latlng, {
          radius: 6, color: colour, weight: 2,
          fillColor: colour, fillOpacity: 0.85
        });
      }
    });

    const popup = plant.latin +
      (plant.common
        ? '<br><span style="color:#6b6259">' + plant.common + "</span>"
        : "");
    layer.bindPopup(popup);

    if (illustrated) {
      layer.on("click", function () {
        bdGoToSlide(bdLatestSlide[plant.key].index);
      });
    }

    layer.addTo(bdMap);
    bdBounds.extend(layer.getBounds());
  });

  if (bdBounds.isValid()) {
    bdMap.fitBounds(bdBounds, { padding: [30, 30] });
  } else {
    bdMap.setView([54.5, -3.0], 13);
  }
</script>
{% else %}
<p>No plant locations are currently recorded.</p>
{% endif %}

{% include "_offerings.html" %}

{% endblock %}