{% extends 'base.html' %}
{% block content %}
<section class="section">
  <div class="container section-head">
    <h1>Safety support demo</h1>
    <p>Use the same API logic that the Flutter app will use. Select an origin in Salla and trigger health or bike repair support.</p>
  </div>
</section>

<section class="section muted-bg">
  <div class="container two-col">
    <div class="card">
      <h2>Trigger assistance</h2>
      <form id="supportForm" class="form-stack">
        <label>Your name
          <input type="text" name="user_name" value="Demo Tourist">
        </label>
        <label>Latitude
          <input type="number" name="lat" step="0.000001" value="66.8420">
        </label>
        <label>Longitude
          <input type="number" name="lng" step="0.000001" value="28.6900">
        </label>
        <div class="button-row">
          <button type="button" class="btn primary trigger-btn" data-alert-type="bike_repair">I need bike repair</button>
          <button type="button" class="btn danger trigger-btn" data-alert-type="health">I need health support</button>
        </div>
      </form>
      <div class="logic-box">
        <strong>Demo logic:</strong>
        <p>The backend receives the trigger, finds the nearest matching service by geodesic distance, returns the destination and route polyline, and the frontend renders it on the map.</p>
      </div>
    </div>
    <div class="card">
      <h2>Response</h2>
      <div id="supportResult">No request sent yet.</div>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div id="supportMap" class="map large-map" data-mode="support"></div>
  </div>
</section>
{% endblock %}