---
layout: layouts/base.njk
withSidebar: true
---
{% set checkins = whereCheckins.checkins or [] %}

<div class="where-page">
  <header class="mb-6 sm:mb-8">
    <h1 class="text-2xl sm:text-3xl md:text-4xl font-bold text-surface-900 dark:text-surface-100 mb-2">{{ title or "Where" }}</h1>
    <p class="text-surface-600 dark:text-surface-400">
      Recent check-ins captured by this site via Micropub.
    </p>
      <p class="mt-2 text-sm">
        <a href="/been/" class="text-accent-600 hover:underline">See all past check-ins →</a>
      </p>
    {% if content %}
    <div class="prose prose-surface dark:prose-invert max-w-none mt-3">
      {{ content | safe }}
    </div>
    {% endif %}
  </header>

  {% if checkins.length %}
  <section class="space-y-4" aria-label="Recent check-ins">
    {% for checkin in checkins %}
    <article class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
      <div class="flex items-start gap-3 sm:gap-4">
        <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
          <svg class="w-5 h-5 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
          </svg>
        </div>

        <div class="flex-1 min-w-0">
          <h2 class="text-base sm:text-lg font-semibold text-surface-900 dark:text-surface-100">
            {{ checkin.name }}
          </h2>

          {% if checkin.locationText or checkin.postalCode %}
          <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">
            {{ checkin.locationText }}{% if checkin.locationText and checkin.postalCode %}, {% endif %}{{ checkin.postalCode }}
          </p>
          {% endif %}

          <div class="text-xs text-surface-600 dark:text-surface-400 mt-2 flex flex-wrap items-center gap-2">
            {% if checkin.published %}
            <time class="font-mono" datetime="{{ checkin.published }}">{{ checkin.published | date("MMM d, yyyy") }}</time>
            {% endif %}
            {% if checkin.coordinatesText %}
            <span class="px-2 py-0.5 rounded-full bg-surface-100 dark:bg-surface-700">{{ checkin.coordinatesText }}</span>
            {% endif %}
            {% if checkin.isPrivate %}
              <section class="space-y-4" aria-label="Recent check-ins">
                {% if checkins.length %}
                  {% set checkin = checkins[0] %}
                  <article class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm">
                    <div class="flex items-start gap-3 sm:gap-4">
                      <div class="w-10 h-10 rounded-full bg-emerald-100 dark:bg-emerald-900/40 flex items-center justify-center flex-shrink-0 mt-0.5">
                        <svg class="w-5 h-5 text-emerald-700 dark:text-emerald-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M17.657 16.657L13.414 20.9a2 2 0 01-2.828 0l-4.243-4.243a8 8 0 1111.314 0z"/>
                          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"/>
                        </svg>
                      </div>

                      <div class="flex-1 min-w-0">
                        <h2 class="text-base sm:text-lg font-semibold text-surface-900 dark:text-surface-100">
                          {{ checkin.name }}
                        </h2>

                        {% if checkin.locationText or checkin.postalCode %}
                        <p class="text-sm text-surface-600 dark:text-surface-400 mt-1">
                          {{ checkin.locationText }}{% if checkin.locationText and checkin.postalCode %}, {% endif %}{{ checkin.postalCode }}
                        </p>
                        {% endif %}

                        <div class="text-xs text-surface-600 dark:text-surface-400 mt-2 flex flex-wrap items-center gap-2">
            <span class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300">{{ person.name }}</span>
            {% endif %}
            {% endfor %}
          </div>
          {% endif %}

          <div class="mt-3 flex flex-wrap gap-2 text-xs">
            {% if checkin.mapUrl %}
            <a href="{{ checkin.mapUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-emerald-100/70 dark:bg-emerald-900/30 text-emerald-800 dark:text-emerald-300 hover:bg-emerald-200/70 dark:hover:bg-emerald-900/50" target="_blank" rel="noopener">Map</a>
            {% endif %}
            {% if checkin.venueWebsiteUrl %}
            <a href="{{ checkin.venueWebsiteUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Website</a>
            {% endif %}
            {% if checkin.venueSocialUrl %}
            <a href="{{ checkin.venueSocialUrl }}" class="inline-flex items-center px-2.5 py-1 rounded-full bg-surface-100 dark:bg-surface-700 text-surface-700 dark:text-surface-300 hover:bg-surface-200 dark:hover:bg-surface-600" target="_blank" rel="noopener">Social</a>
            {% endif %}
          </div>

          {% if checkin.photos and checkin.photos.length %}
          <div class="mt-3 flex flex-wrap gap-2">
            {% for photo in checkin.photos | head(3) %}
            <a href="{{ photo }}" target="_blank" rel="noopener" class="block">
              <img src="{{ photo }}" alt="Check-in photo" class="w-16 h-16 sm:w-20 sm:h-20 rounded-lg object-cover border border-surface-200 dark:border-surface-700" loading="lazy" eleventy:ignore>
            </a>
            {% endfor %}
          </div>
          {% endif %}
        </div>
      </div>
    </article>
    {% endfor %}
  </section>
  {% else %}
  <section class="p-4 sm:p-5 bg-surface-50 dark:bg-surface-800 rounded-lg border border-surface-200 dark:border-surface-700 shadow-sm" aria-live="polite">
    <h2 class="text-lg font-semibold text-surface-900 dark:text-surface-100 mb-2">No check-ins available yet</h2>
    <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
      This page reads local content created by your Micropub endpoint. Check-ins appear here when posts include fields like <code>checkin</code>, <code>location</code>, or coordinates.
    </p>
    <p class="text-sm text-surface-600 dark:text-surface-400 mb-2">
      Scanned <code>{{ whereCheckins.scannedFiles or 0 }}</code> content files{% if whereCheckins.errors and whereCheckins.errors.length %} with {{ whereCheckins.errors.length }} parse warning(s){% endif %}.
    </p>
  </section>
  {% endif %}
</div>