neiam /fieri-forever

{% extends "root.html" %}

{% block content %}
<div class="space-y-4">
  <a href="/areas" class="btn btn-ghost btn-sm">&larr; Areas</a>
  <h2 class="text-2xl font-bold text-accent">New area</h2>
  <p class="text-sm opacity-70">Search for a city or address, or click the map, to set where this area's map opens.</p>

  <form class="join w-full"
        hx-get="/places/search" hx-target="#candidates" hx-select="#candidates" hx-swap="outerHTML">
    <input type="hidden" name="food" value="0"/>
    <input class="input input-bordered input-sm join-item flex-1" type="search" name="q" placeholder="Austin, TX · 1 Main St, Somerville · an OSM id" required/>
    <button class="btn btn-sm join-item" type="submit"><i class="fas fa-magnifying-glass"></i> Search</button>
  </form>
  <div id="candidates"></div>

  <div class="h-80 rounded-box border border-base-300"
       data-map data-pick="point"
       data-tiles="{{ map_config.tiles }}" data-lat="{{ map_config.lat }}" data-lon="{{ map_config.lon }}" data-zoom="11"></div>

  <form id="place-form" method="post" action="/areas" class="card bg-base-200 p-4 grid grid-cols-1 sm:grid-cols-4 gap-3">
    <label class="form-control sm:col-span-2">
      <span class="label-text text-xs">Name</span>
      <input class="input input-bordered input-sm" type="text" name="name" placeholder="Boston office" maxlength="100" required/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Latitude</span>
      <input class="input input-bordered input-sm font-mono" type="text" name="lat" inputmode="decimal" required readonly placeholder="click the map"/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Longitude</span>
      <input class="input input-bordered input-sm font-mono" type="text" name="lon" inputmode="decimal" required readonly placeholder="click the map"/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Map zoom</span>
      <select class="select select-bordered select-sm py-0" name="zoom">
        <option value="13">13 · a city</option>
        <option value="15" selected>15 · a neighbourhood</option>
        <option value="17">17 · a few blocks</option>
      </select>
    </label>
    <div class="sm:col-span-4">
      <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-plus"></i> Create area</button>
    </div>
  </form>
</div>
{% endblock %}