{{ define "title" }}
  {{ $title := "Where Am I? :: adriano.fyi" }}
  {{ $desc := "" }}
  {{ with resources.GetRemote "https://jellybee.bison-lizard.ts.net/whereami" }}
    {{ with .Err }}
    {{ else }}
      {{ with (. | transform.Unmarshal) }}
        {{ with .location.name }}{{ $title = printf "Adriano is in %s :: adriano.fyi" . }}{{ end }}
      {{ end }}
    {{ end }}
  {{ end }}
  <title>{{ $title }}</title>
  <meta property="og:title" content="{{ $title }}">
  <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>
    #location-name { min-height: 1.5em; }
    .container { max-width: 1200px; width: 95%; }
    #page-grid {
      display: grid;
      grid-template-columns: 3fr 2fr;
      gap: 1rem;
      align-items: start;
    }
    @media (max-width: 700px) {
      #page-grid { grid-template-columns: 1fr; }
    }
    #map { height: 520px; }
    #weather-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0.4rem 1rem;
    }
    .wx-card {
      border-left: 2px solid #ddd;
      padding: 0.2rem 0 0.2rem 0.5rem;
    }
    .wx-label { font-size: 0.72em; color: #888; margin: 0; line-height: 1.2; }
    .wx-value { font-size: 1.05em; margin: 0; line-height: 1.3; }
    #weather-updated { font-size: 0.75em; color: #888; margin-bottom: 0.6rem; }
  </style>

  <div class="container" role="main">
    <h2 id="location-name">Fetching location&hellip;</h2>

    <div id="page-grid">
      <div id="map"></div>
      <div id="weather"></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: 'Temperature',     value: fmt1(w.tempf),          unit: '°F' },
              { label: 'Feels like',      value: fmt1(w.feelsLike),      unit: '°F' },
              { label: 'Humidity',        value: fmt0(w.humidity),       unit: '%' },
              { label: 'Dew point',       value: fmt1(w.dewPoint),       unit: '°F' },
              { 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: 'UV index',        value: fmt0(w.uv),             unit: '' },
              { label: 'Solar',           value: fmt0(w.solarradiation), unit: 'W/m²' },
              { label: 'Rain (hourly)',   value: w.hourlyrainin,         unit: 'in' },
              { label: 'Rain (daily)',    value: w.dailyrainin,          unit: 'in' },
              { label: 'Indoor temp',     value: fmt1(w.tempinf),        unit: '°F' },
              { label: 'Indoor humidity', value: fmt0(w.humidityin),     unit: '%' },
            ].filter(function(c) { return c.value !== null && c.value !== undefined; });

            if (cards.length > 0) {
              var updated = w.lastUpdated ? new Date(w.lastUpdated).toLocaleTimeString() : '';
              var html = '<h3 style="margin-bottom:0.3rem">My Weather Station</h3>';
              if (updated) html += '<div id="weather-updated">updated ' + updated + '</div>';
              html += '<div id="weather-grid">';
              cards.forEach(function(c) {
                html += '<div class="wx-card"><p class="wx-label">' + c.label + '</p><p class="wx-value">' + c.value + (c.unit ? ' ' + c.unit : '') + '</p></div>';
              });
              html += '</div>';
              document.getElementById('weather').innerHTML = html;
            }
          }
        })
        .catch(function() {
          document.getElementById('location-name').textContent = 'Location unavailable';
        });
    </script>
  </div>
{{ end }}