{% extends "base.html" %}
{% block title %}{{ T.page_title_home }}{% endblock %}

{% block content %}
<div class="home-wrap">
  <div class="home-bg-text" aria-hidden="true">WETTER</div>

  <div class="home-center">
    <p class="home-eyebrow">{{ T.home_eyebrow }}</p>
    <h1 class="home-title">{{ T.home_headline|safe }}</h1>

    <form class="home-form" action="/wetter" method="get" autocomplete="off">
      <div class="home-input-wrap">
        <svg class="home-search-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
          <circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/>
        </svg>
        <input type="hidden" name="lang" value="{{ lang }}">
        <input type="text" name="ort" id="home-ort" placeholder="{{ T.home_placeholder }}" required autofocus/>
        <ul class="ac-list" id="home-ac"></ul>
      </div>
      <button type="submit" class="home-btn">
        {{ T.home_btn }}
        <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><path d="M5 12h14M12 5l7 7-7 7"/></svg>
      </button>
    </form>

    {% if error %}<p class="home-error">{{ error }}</p>{% endif %}

    <div class="home-chips" id="home-chips">
      {% for city in ["Berlin","Hamburg","München","Köln","Frankfurt","Dresden","Düsseldorf","Stuttgart"] %}
      <a href="/wetter?ort={{ city }}" class="chip">{{ city }}</a>
      {% endfor %}
    </div>
    <button class="btn-location" id="btn-location" title="{{ T.btn_location }}">
      <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M12 2v3M12 19v3M2 12h3M19 12h3"/><circle cx="12" cy="12" r="9" opacity=".3"/></svg>
      {{ T.btn_location }}
    </button>
  </div>

  <div class="home-deco" aria-hidden="true">
    <div class="deco-sun"></div>
    <div class="deco-cloud c1"></div>
    <div class="deco-cloud c2"></div>
    <div class="deco-rain">
      {% for i in range(18) %}<span></span>{% endfor %}
    </div>
  </div>
</div>
{% endblock %}

{% block scripts %}
<script>
const _i18n = {
  locating:            {{ T.locating | tojson }},
  locationUnavailable: {{ T.location_unavailable | tojson }},
  geoUnsupported:      {{ T.geolocation_unsupported | tojson }},
  recentlySearched:    {{ T.recently_searched | tojson }},
};
// Standort-Button
document.getElementById("btn-location").addEventListener("click", function() {
  if (!navigator.geolocation) { alert(_i18n.geoUnsupported); return; }
  this.textContent = _i18n.locating;
  this.disabled = true;
  navigator.geolocation.getCurrentPosition(
    pos => { window.location = `/wetter?lat=${pos.coords.latitude}&lon=${pos.coords.longitude}&ort=Mein+Standort&lang={{ lang }}`; },
    () => { this.textContent = _i18n.locationUnavailable; this.disabled = false; }
  );
});

// Letzte Suchen aus localStorage als Chips anzeigen
(function(){
  const recent = JSON.parse(localStorage.getItem("sw_recent") || "[]");
  if (!recent.length) return;
  const wrap = document.getElementById("home-chips");
  const div = document.createElement("div");
  div.className = "recent-label";
  div.textContent = _i18n.recentlySearched;
  wrap.before(div);
  const strip = document.createElement("div");
  strip.className = "home-chips home-chips--recent";
  recent.forEach(name => {
    const a = document.createElement("a");
    a.href = `/wetter?ort=${encodeURIComponent(name)}`;
    a.className = "chip chip--recent";
    a.textContent = name;
    strip.appendChild(a);
  });
  wrap.before(strip);
})();
</script>
<script>setupAC(document.getElementById("home-ort"), document.getElementById("home-ac"));</script>
{% endblock %}