neiam /fieri-forever

{% extends "root.html" %}
{% from "_macros.html" import rank_icon, rank_label %}

{% block content %}
<div class="space-y-4">
  <a href="/areas/{{ area.id }}" class="btn btn-ghost btn-sm">&larr; {{ area.name }}</a>
  <h2 class="text-2xl font-bold text-accent">Add a restaurant</h2>
  <p class="text-sm opacity-70">
    Search by name or OSM id (or paste an openstreetmap.org link), or click a spot on the map to see what's there. Pick one to fill in the
    details, or drop a pin and type them yourself for somewhere OSM doesn't know about.
  </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="1"/>
    <input type="hidden" name="area" value="{{ area.id }}"/>
    <input type="hidden" name="lat" value="{{ area.lat }}"/>
    <input type="hidden" name="lon" value="{{ area.lon }}"/>
    <input class="input input-bordered input-sm join-item flex-1" type="search" name="q" placeholder="Tandoor, burrito, or an OSM id like w29632970" required/>
    <button class="btn btn-sm join-item" type="submit">
      <i class="fas fa-magnifying-glass"></i> Search
      <span class="loading loading-spinner loading-xs htmx-indicator"></span>
    </button>
  </form>

  <div class="grid grid-cols-1 lg:grid-cols-5 gap-4">
    <div class="lg:col-span-3 h-96 rounded-box border border-base-300"
         data-map data-pick="nearby" data-nearby-url="/places/nearby?area={{ area.id }}"
         data-tiles="{{ map_config.tiles }}" data-lat="{{ area.lat }}" data-lon="{{ area.lon }}" data-zoom="{{ area.zoom }}"
         data-markers='{{ markers | tojson }}'></div>
    <div class="lg:col-span-2">
      <div id="candidates"><p class="text-sm opacity-70">Results show up here.</p></div>
    </div>
  </div>

  <form id="place-form" method="post" action="/restaurants" class="card bg-base-200 p-4 grid grid-cols-1 sm:grid-cols-2 gap-3">
    <input type="hidden" name="area_id" value="{{ area.id }}"/>
    <input type="hidden" name="osm_ref" value=""/>
    <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" maxlength="255" required/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Cuisine</span>
      <input class="input input-bordered input-sm" type="text" name="cuisine" maxlength="255" placeholder="indian, burritos…"/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Address</span>
      <input class="input input-bordered input-sm" type="text" name="address" maxlength="255"/>
    </label>
    <label class="form-control">
      <span class="label-text text-xs">Website</span>
      <input class="input input-bordered input-sm" type="url" name="website" maxlength="512"/>
    </label>
    <label class="form-control sm:col-span-2">
      <span class="label-text text-xs">Opening hours <span class="opacity-70">(from OSM when it has them; used to skip places closed at lunch)</span></span>
      <input class="input input-bordered input-sm font-mono" type="text" name="opening_hours" maxlength="512" placeholder="Mo-Fr 11:00-15:00"/>
    </label>
    <div class="grid grid-cols-2 gap-3">
      <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" required readonly placeholder="pick or click"/>
      </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" required readonly placeholder="pick or click"/>
      </label>
    </div>
    <label class="form-control sm:col-span-2">
      <span class="label-text text-xs">Notes</span>
      <textarea class="textarea textarea-bordered" name="notes" rows="2" placeholder="Cash only; get the lamb"></textarea>
    </label>
    <fieldset class="sm:col-span-2">
      <legend class="label-text text-xs mb-1">Your rank</legend>
      {# Real radios, visually hidden inside button-styled labels: arrow keys,
         form posting and screen readers behave as with plain radios. #}
      <div class="join flex-wrap">
        {% for r in ranks %}
        <label class="join-item btn btn-sm btn-ghost border-base-300 rank-pick rank-pick-{{ r }}">
          <input type="radio" class="sr-only" name="rank" value="{{ r }}" {% if r == "positive" %}checked{% endif %}/>
          <i class="fas {{ rank_icon(r) }}"></i><span>{{ rank_label(r) }}</span>
        </label>
        {% endfor %}
      </div>
    </fieldset>
    <div class="sm:col-span-2">
      <button class="btn btn-primary btn-sm" type="submit"><i class="fas fa-plus"></i> Add restaurant</button>
    </div>
  </form>
</div>
{% endblock %}