{% extends "base.html" %} {% import "partials/icons.html" as icons %} {% block title %}Brewlog · Cafe · {{ cafe.name }}{% endblock %} {%
block content %}
<header class="flex flex-col gap-2">
  <h1 class="text-3xl font-semibold">{{ cafe.name }}</h1>
  <p class="max-w-2xl text-sm text-stone-600">Detailed view for {{ cafe.name }}.</p>
</header>
<section class="grid gap-4 rounded-lg border border-amber-300 bg-amber-100/80 p-5 shadow-sm">
  <dl class="grid gap-2 text-sm text-stone-700">
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">City</dt>
      <dd class="text-right">{{ cafe.city }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Country</dt>
      <dd class="text-right">{{ cafe.country }}</dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Coordinates</dt>
      <dd class="text-right">{{ cafe.latitude }}, {{ cafe.longitude }}</dd>
    </div>
    <div class="flex items-center justify-between gap-2">
      <dt class="font-medium text-stone-500">Map</dt>
      <dd class="flex justify-end">
        <a
          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-200/60 px-3 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-500 hover:bg-amber-200 hover:text-amber-900"
          href="{{ cafe.map_url }}"
          target="_blank"
          rel="noreferrer noopener"
          aria-label="Open {{ cafe.name }} in Google Maps"
        >
          {% call icons::location("h-4 w-4") %}
          <span>Open in Maps</span>
        </a>
      </dd>
    </div>
    <div class="flex items-center justify-between gap-2">
      <dt class="font-medium text-stone-500">Website</dt>
      <dd class="flex justify-end">
        {% if cafe.has_website %}
        <a
          class="inline-flex items-center gap-2 rounded-md border border-amber-400 bg-amber-200/60 px-3 py-1 text-xs font-semibold text-amber-800 transition hover:border-amber-500 hover:bg-amber-200 hover:text-amber-900"
          href="{{ cafe.website_url }}"
          target="_blank"
          rel="noreferrer noopener"
          aria-label="Visit {{ cafe.name }} website"
        >
          {% call icons::external_link("h-4 w-4") %}
          <span>Visit</span>
        </a>
        {% else %}
        <span>&mdash;</span>
        {% endif %}
      </dd>
    </div>
    <div class="flex justify-between gap-2">
      <dt class="font-medium text-stone-500">Created</dt>
      <dd class="text-right">{{ cafe.created_at }}</dd>
    </div>
  </dl>
</section>
{% endblock %}