neiam /fieri-forever

{% extends "root.html" %}
{% from "_macros.html" import rank_badge %}

{% block content %}
<div class="space-y-4">
  <a href="/areas/{{ area.id }}" class="btn btn-ghost btn-sm">&larr; {{ area.name }}</a>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <div class="card bg-base-200 p-5 space-y-3">
      <div class="flex items-start justify-between gap-2">
        <h2 class="text-2xl font-bold">{{ restaurant.name }}</h2>
        {% if restaurant.archived %}<span class="badge badge-ghost">archived</span>{% endif %}
      </div>
      <dl class="text-sm space-y-1">
        {% if restaurant.cuisine %}<div><dt class="inline opacity-70">Cuisine</dt> <dd class="inline">{{ restaurant.cuisine }}</dd></div>{% endif %}
        {% if restaurant.address %}<div><dt class="inline opacity-70">Address</dt> <dd class="inline">{{ restaurant.address }}</dd></div>{% endif %}
        {% if restaurant.website %}<div><dt class="inline opacity-70">Web</dt> <dd class="inline"><a class="link" href="{{ restaurant.website }}" rel="noopener noreferrer" target="_blank">{{ restaurant.website }}</a></dd></div>{% endif %}
        {% if restaurant.osm_ref %}
        <div><dt class="inline opacity-70">OSM</dt>
          <dd class="inline">
            {% set kinds = {"N": "node", "W": "way", "R": "relation"} %}
            <a class="link font-mono" target="_blank" rel="noopener noreferrer"
               href="https://www.openstreetmap.org/{{ kinds[restaurant.osm_ref[0]] }}/{{ restaurant.osm_ref[1:] }}">{{ restaurant.osm_ref }}</a>
          </dd>
        </div>
        {% endif %}
      </dl>
      {% if restaurant.notes %}<p class="whitespace-pre-wrap text-base-content/80">{{ restaurant.notes }}</p>{% endif %}
      <div>
        <p class="text-xs opacity-70 mb-1">Your rank</p>
        {% with restaurant_id = restaurant.id %}{% include "restaurants/_rank.html" %}{% endwith %}
      </div>
    </div>
    <div class="h-72 md:h-auto min-h-64 rounded-box border border-base-300"
         data-map
         data-tiles="{{ map_config.tiles }}" data-lat="{{ restaurant.lat }}" data-lon="{{ restaurant.lon }}" data-zoom="17"
         data-markers='{{ [{"name": restaurant.name, "lat": restaurant.lat, "lon": restaurant.lon, "rank": my_rank}] | tojson }}'></div>
  </div>

  <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
    <section class="card bg-base-200 p-5 space-y-2">
      <h3 class="font-semibold">Everyone's take</h3>
      <ul class="space-y-1">
        {% for p in everyone %}
        <li class="flex items-center justify-between gap-2 text-sm"><span>{{ p.username }}</span>{{ rank_badge(p.rank, p.since) }}</li>
        {% endfor %}
      </ul>
    </section>

    <section class="card bg-base-200 p-5 space-y-3">
      <h3 class="font-semibold">Visits</h3>
      <form method="post" action="/lunches" class="join">
        <input type="hidden" name="restaurant_id" value="{{ restaurant.id }}"/>
        <input type="hidden" name="attendee" value="{{ user.id }}"/>
        <input class="input input-bordered input-sm join-item" type="date" name="went_on"/>
        <button class="btn btn-sm join-item" type="submit"><i class="fas fa-check"></i> I went</button>
      </form>
      {% if visits | length == 0 %}
        <p class="text-sm opacity-70">Nobody's been yet.</p>
      {% else %}
      <ul class="text-sm space-y-1">
        {% for v in visits %}
        <li><span class="font-mono">{{ v.went_on }}</span> <span class="opacity-70">· {{ v.attendees | join(", ") }}</span></li>
        {% endfor %}
      </ul>
      {% endif %}
    </section>
  </div>

  <details class="collapse collapse-arrow bg-base-200 border border-base-300">
    <summary class="collapse-title text-sm font-semibold">Edit details</summary>
    <div class="collapse-content space-y-3">
      <form method="post" action="/restaurants/{{ restaurant.id }}" class="grid grid-cols-1 sm:grid-cols-2 gap-3">
        <label class="form-control">
          <span class="label-text text-xs">Cuisine</span>
          <input class="input input-bordered input-sm" type="text" name="cuisine" value="{{ restaurant.cuisine or '' }}" 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" value="{{ restaurant.website or '' }}" maxlength="512"/>
        </label>
        <label class="form-control sm:col-span-2">
          <span class="label-text text-xs">Notes</span>
          <textarea class="textarea textarea-bordered" name="notes" rows="3">{{ restaurant.notes }}</textarea>
        </label>
        <div><button class="btn btn-sm" type="submit">Save</button></div>
      </form>
      <form method="post" action="/restaurants/{{ restaurant.id }}/archive">
        {% if restaurant.archived %}
          <button class="btn btn-sm btn-ghost" type="submit"><i class="fas fa-box-open"></i> Put back in rotation</button>
        {% else %}
          <button class="btn btn-sm btn-ghost text-error" type="submit"
                  hx-confirm="Archive {{ restaurant.name }}? It stays in the history but won't be suggested.">
            <i class="fas fa-box-archive"></i> Archive (closed, or off the rotation)
          </button>
        {% endif %}
      </form>
    </div>
  </details>
</div>
{% endblock %}