{% extends "base.html" %}

{% block page_title %}{{ title | default(value="Create account") }}{% endblock %}

{% block content %}
<div class="login-container mx-auto w-full max-w-md px-4 py-8 sm:px-6">
    <h1>{{ title | default(value="Create account") }}</h1>
    {% if error %}
    <div class="error-alert"><div class="error-message">{{ error }}</div></div>
    {% endif %}
    {% if allow_register %}
    <form class="auth-password-form" method="post" action="/plugins/password-login/register" data-json-form="1">
        {% if username_required %}
        <label class="auth-field mb-4 block">
            <span>Username</span>
            <input class="blocks-input mt-1 w-full" type="text" name="username" autocomplete="username" required>
        </label>
        {% endif %}
        <label class="auth-field mb-4 block">
            <span>Email</span>
            <input class="blocks-input mt-1 w-full" type="email" name="email" autocomplete="email" required>
        </label>
        <label class="auth-field mb-4 block">
            <span>Password</span>
            <input class="blocks-input mt-1 w-full" type="password" name="password" autocomplete="new-password" required minlength="{{ min_password_length | default(value=8) }}">
        </label>
        <button type="submit" class="blocks-button blocks-button-primary min-h-11 w-full">Create account</button>
    </form>
    {% else %}
    <p>Registration is currently closed.</p>
    {% endif %}
    <p class="auth-links"><a href="/auth/login">Back to sign in</a></p>
    <p class="auth-links text-muted small" id="location-status" role="status"></p>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/location-utils.js?v={{ asset_version | default(value='1') }}"></script>
<script>
(function () {
  function getCookie(name) {
    var m = document.cookie.match(new RegExp('(?:^|;\\s*)' + name + '=([^;]*)'));
    return m ? decodeURIComponent(m[1]) : null;
  }
  function setLocationCookie(lat, lng) {
    document.cookie = 'client_location=' + encodeURIComponent(lat + ',' + lng) + '; path=/; max-age=3600; SameSite=Lax';
    return lat + ',' + lng;
  }
  function status(msg) {
    var el = document.getElementById('location-status');
    if (el) el.textContent = msg;
  }
  function requestLocation() {
    return new Promise(function (resolve, reject) {
      fetchUserLocation({ enableHighAccuracy: true, timeout: 15000, maximumAge: 60000 }).then(function (point) {
        status((point.address || 'Location captured.') + ' Accuracy ±' + Math.round(point.accuracy) + ' m.');
        resolve(setLocationCookie(point.latitude, point.longitude));
      }).catch(reject);
    });
  }
  // If this store enforces location-based registration, capture it upfront so
  // the signup doesn't bounce to /auth/login?error=location_required.
  // Harmless when enforcement is off (server ignores the cookie).
  if (!getCookie('client_location')) {
    var params = new URLSearchParams(window.location.search || '');
    if (params.get('error') === 'location_required' || params.get('error') === 'location_invalid') {
      status('Please allow location access so we can verify your proximity to the store, then submit again.');
    }
    requestLocation().then(function () {
      status('Location saved.');
    }).catch(function () {});
  }
  document.querySelectorAll('form[data-json-form]').forEach(function (form) {
    form.addEventListener('submit', function (ev) {
      ev.preventDefault();
      function doSubmit() {
        var action = form.getAttribute('action');
        var body = {};
        new FormData(form).forEach(function (v, k) { body[k] = v; });
        fetch(action, {
          method: 'POST',
          headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
          credentials: 'same-origin',
          body: JSON.stringify(body)
        }).then(function (r) { return r.json(); })
          .then(function (j) {
            if (j && j.redirect) { window.location.href = j.redirect; return; }
            if (j && j.error) { window.location.href = '/plugins/password-login/register?error=' + encodeURIComponent(j.error); return; }
            window.location.href = '/auth/login';
          })
          .catch(function () { window.location.href = '/plugins/password-login/register?error=register_failed'; });
      }
      if (!getCookie('client_location')) {
        status('Requesting your location…');
        requestLocation().then(doSubmit).catch(doSubmit);
      } else {
        doSubmit();
      }
    });
  });
})();
</script>
{% endblock %}