neiam /fieri-forever

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

{% block content %}
<div class="space-y-4">
  <div class="flex items-center justify-between gap-3 flex-wrap">
    <div>
      <a href="/areas" class="text-xs link link-hover opacity-70">Areas</a>
      <h2 class="text-2xl font-bold text-accent">{{ area.name }}</h2>
    </div>
    <div class="flex gap-2 flex-wrap">
      <a href="/areas/{{ area.id }}/plan" class="btn btn-primary btn-sm"><i class="fas fa-utensils"></i> Where to?</a>
      <a href="/areas/{{ area.id }}/restaurants/new" class="btn btn-sm"><i class="fas fa-plus"></i> Add restaurant</a>
      <a href="/areas/{{ area.id }}/history" class="btn btn-ghost btn-sm"><i class="fas fa-clock-rotate-left"></i> History</a>
    </div>
  </div>

  {% if open_outings %}
  <div class="space-y-2">
    {% for o in open_outings %}
    <a href="/outings/{{ o.id }}" class="alert alert-info flex justify-between gap-3 hover:brightness-95">
      <span><i class="fas fa-utensils"></i> Lunch being decided · <span class="font-mono">{{ o.on_date }}</span></span>
      <span class="text-sm">{{ o.going | length }} going{% if o.going %}: {{ o.going | join(", ") }}{% endif %} · vote &rarr;</span>
    </a>
    {% endfor %}
  </div>
  {% endif %}

  <div class="h-96 rounded-box border border-base-300"
       data-map data-fit
       data-tiles="{{ map_config.tiles }}" data-lat="{{ area.lat }}" data-lon="{{ area.lon }}" data-zoom="{{ area.zoom }}"
       data-markers='{{ markers | tojson }}'></div>
  {{ map_legend() }}

  {% if restaurants | length == 0 %}
    <div class="border border-dashed border-base-300 rounded-box p-8 text-center space-y-3">
      <p class="opacity-70">No restaurants in {{ area.name }} yet.</p>
      <a href="/areas/{{ area.id }}/restaurants/new" class="btn btn-primary btn-sm"><i class="fas fa-plus"></i> Add the first one</a>
    </div>
  {% else %}
  <div class="overflow-x-auto border border-base-300 rounded-box">
    <table class="table table-sm">
      <thead>
        <tr><th>Restaurant</th><th>Your rank</th><th class="text-right">Visits</th><th>Last</th></tr>
      </thead>
      <tbody>
        {% for r in restaurants %}
        <tr class="{{ 'opacity-50' if r.archived else '' }}">
          <td>
            <a href="/restaurants/{{ r.id }}" class="font-semibold link link-hover">{{ r.name }}</a>
            {% if r.archived %}<span class="badge badge-ghost badge-sm">archived</span>{% endif %}
            {% if r.cuisine %}<span class="block text-xs opacity-70">{{ r.cuisine }}</span>{% endif %}
          </td>
          <td>{% with restaurant_id = r.id, my_rank = r.my_rank, my_since = r.my_since %}{% include "restaurants/_rank.html" %}{% endwith %}</td>
          <td class="text-right font-mono">{{ r.visits }}</td>
          <td class="font-mono text-xs whitespace-nowrap">{{ r.last_visit or "—" }}</td>
        </tr>
        {% endfor %}
      </tbody>
    </table>
  </div>
  {% endif %}
</div>
{% endblock %}