{{ define "title" }}
  {{ $title := "Where Am I? :: adriano.fyi" }}
  {{ $desc := "" }}
  {{ $r := try (resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami") }}
  {{ if not $r.Err }}
    {{ $d := $r.Value | transform.Unmarshal }}
    {{ with $d.location.name }}{{ $title = printf "Adriano is in %s :: adriano.fyi" . }}{{ end }}
    {{ with $d.weather }}
      {{ $parts := slice }}
      {{ with .tempf }}{{ $parts = $parts | append (printf "%.0f°F" .) }}{{ end }}
      {{ with .humidity }}{{ $parts = $parts | append (printf "%.0f%% humidity" .) }}{{ end }}
      {{ with .windspeedmph }}{{ $parts = $parts | append (printf "wind %.1f mph" .) }}{{ end }}
      {{ $desc = delimit $parts ", " }}
    {{ end }}
    {{ with $d.conditions }}
      {{ $desc = printf "%s %s · %s" .emoji .label $desc }}
    {{ end }}
  {{ end }}
  <title>{{ $title }}</title>
  <meta property="og:title" content="{{ $title }}">
  {{ with $desc }}<meta property="og:description" content="{{ . }}">{{ end }}
  <meta property="og:url" content="https://adriano.fyi/whereami">
  <meta property="og:type" content="website">
{{ end }}

{{ define "main" }}
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" crossorigin=""/>
  <script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js" crossorigin=""></script>
  <style>
    .container { max-width: 1200px; width: 95%; }
    #page-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 1.5rem;
      align-items: start;
    }
    @media (max-width: 700px) {
      #page-grid { grid-template-columns: 1fr; }
    }
    #map { height: 520px; }
    #sidebar { display: flex; flex-direction: column; gap: 0; }
    #location-name { margin: 0 0 0.15rem 0; min-height: 1.4em; }
    #wx-conditions { font-size: 1.4em; margin: 0 0 0.25rem 0; }
    #wx-meta { font-size: 0.75em; color: #888; margin: 0 0 1rem 0; }
    #weather-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.5rem 1rem;
    }
    .wx-card {
      border-left: 2px solid #444;
      padding: 0.2rem 0 0.2rem 0.6rem;
    }
    .wx-label { font-size: 0.7em; color: #888; margin: 0; line-height: 1.2; text-transform: uppercase; letter-spacing: 0.04em; }
    .wx-value { font-size: 1.05em; margin: 0; line-height: 1.4; }
  </style>

  <div class="container" role="main">
    <div id="page-grid">
      <div id="map"></div>
      <div id="sidebar">
        <h2 id="location-name">Fetching location&hellip;</h2>
        <p id="wx-conditions"></p>
        <p id="wx-meta"></p>
        <div id="weather-grid"></div>
      </div>
    </div>

    <script>
      var map = L.map('map').setView([0, 0], 2);
      L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://openstreetmap.org/copyright">OpenStreetMap contributors</a>'
      }).addTo(map);
      L.control.scale().addTo(map);

      fetch('https://jellybee.bison-lizard.ts.net/whereami')
        .then(function(r) { if (!r.ok) throw new Error(r.status); return r.json(); })
        .then(function(data) {
          var loc = data.location;
          var w = data.weather;

          if (loc) {
            map.setView([loc.lat, loc.lon], 10);
            L.circle([loc.lat, loc.lon], {
              radius: 5000,
              color: 'red',
              fillColor: '#f03',
              fillOpacity: 0.25
            }).addTo(map);
            if (loc.name) {
              document.getElementById('location-name').textContent = loc.name;
            } else {
              fetch('https://nominatim.openstreetmap.org/reverse?lat=' + loc.lat + '&lon=' + loc.lon + '&format=json')
                .then(function(r) { return r.json(); })
                .then(function(geo) {
                  var a = geo.address;
                  var place = a.city || a.town || a.village || a.county || '';
                  var state = a.state || '';
                  document.getElementById('location-name').textContent = [place, state].filter(Boolean).join(', ');
                });
            }
          } else {
            document.getElementById('location-name').textContent = 'Location unavailable';
          }

          if (w) {
            function fmt1(v) { return v !== undefined && v !== null ? Math.round(v * 10) / 10 : null; }
            function fmt0(v) { return v !== undefined && v !== null ? Math.round(v) : null; }
            var cards = [
              { label: 'Outdoor temp',    value: fmt1(w.tempf),          unit: '°F' },
              { label: 'Indoor temp',     value: fmt1(w.tempinf),        unit: '°F' },
              { label: 'Feels like',      value: fmt1(w.feelsLike),      unit: '°F' },
              { label: 'Dew point',       value: fmt1(w.dewPoint),       unit: '°F' },
              { label: 'Humidity',        value: fmt0(w.humidity),       unit: '%' },
              { label: 'Indoor humidity', value: fmt0(w.humidityin),     unit: '%' },
              { label: 'Wind speed',      value: fmt1(w.windspeedmph),   unit: 'mph' },
              { label: 'Wind gust',       value: fmt1(w.windgustmph),    unit: 'mph' },
              { label: 'Pressure',        value: fmt1(w.baromrelin),     unit: 'inHg' },
              { label: 'Rain (hourly)',   value: w.hourlyrainin,         unit: 'in' },
              { label: 'Rain (daily)',    value: w.dailyrainin,          unit: 'in' },
              { label: 'Rain (weekly)',   value: w.weeklyrainin,         unit: 'in' },
              { label: 'Solar',           value: fmt0(w.solarradiation), unit: 'W/m²' },
              { label: 'UV index',        value: fmt0(w.uv),             unit: '' },
            ].filter(function(c) { return c.value !== null && c.value !== undefined; });

            if (data.conditions) {
            document.getElementById('wx-conditions').textContent = data.conditions.emoji + ' ' + data.conditions.label;
          }

          var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
            var meta = 'My Weather Station';
            if (updated) meta += ' · updated ' + updated;
            document.getElementById('wx-meta').textContent = meta;

            var grid = document.getElementById('weather-grid');
            cards.forEach(function(c) {
              var div = document.createElement('div');
              div.className = 'wx-card';
              div.innerHTML = '<p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p>';
              grid.appendChild(div);
            });
          }
        })
        .catch(function() {
          document.getElementById('location-name').textContent = 'Location unavailable';
        });
    </script>
  </div>
{{ end }}