{{template "head" .View}}
{{template "header" .View}}

<main id="main-content" class="page-canvas flex-1">
  {{template "page_header" (pageHeader .View "pages.directory.title" "pages.directory.description" "/static/images/pages/directory.jpg")}}

  <div class="page-container py-8 pb-16">
    <div id="directory-app" class="reveal" data-summary="{{t .View "directoryContent.listingsSummary"}}">

      <div class="toolbar-panel">
        <div class="relative">
          <svg class="absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-slate-400" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="11" cy="11" r="8"/><path d="m21 21-4.35-4.35"/></svg>
          <input type="search" id="dir-search" class="input-field pl-10" placeholder="{{t .View "directoryContent.searchPlaceholder"}}" value="{{.SearchQuery}}" />
        </div>
      </div>

      <div id="dir-filters" class="reveal-stagger mt-6 grid grid-cols-2 gap-2 sm:grid-cols-3 lg:grid-cols-6" role="group" aria-label="{{t .View "directoryContent.filterLabel"}}">
        <button type="button" class="category-card category-card--filter category-card--compact category-card--warm category-card--active" data-filter="all">
          <span class="category-card__icon category-card__icon--warm" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 6h16"/><path d="M4 12h16"/><path d="M4 18h16"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.filterAll"}}</h3>
        </button>
        <button type="button" class="category-card category-card--filter category-card--compact category-card--brand" data-filter="shop">
          <span class="category-card__icon category-card__icon--brand" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="m2 7 4.41-4.41A2 2 0 0 1 7.83 2h8.34a2 2 0 0 1 1.42.59L22 7"/><path d="M4 12v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-8"/><path d="M15 22v-4a2 2 0 0 0-2-2h-2a2 2 0 0 0-2 2v4"/><path d="M2 7h20"/><path d="M22 7v3a2 2 0 0 1-2 2a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 16 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 12 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 8 12a2.7 2.7 0 0 1-1.59-.63.7.7 0 0 0-.82 0A2.7 2.7 0 0 1 4 12a2 2 0 0 1-2-2V7"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.filterShops"}}</h3>
        </button>
        <button type="button" class="category-card category-card--filter category-card--compact category-card--accent" data-filter="restaurant">
          <span class="category-card__icon category-card__icon--accent" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 2v7c0 1.1.9 2 2 2h4a2 2 0 0 0 2-2V2"/><path d="M7 2v20"/><path d="M21 15V2v0a5 5 0 0 0-5 5v6c0 1.1.9 2 2 2h3Zm0 0v7"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.filterDining"}}</h3>
        </button>
        <button type="button" class="category-card category-card--filter category-card--compact category-card--brand" data-filter="before-security">
          <span class="category-card__icon category-card__icon--brand" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10"/><path d="m9 12 2 2 4-4"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.beforeSecurity"}}</h3>
        </button>
        <button type="button" class="category-card category-card--filter category-card--compact category-card--accent" data-filter="after-security">
          <span class="category-card__icon category-card__icon--accent" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="18" height="11" x="3" y="11" rx="2" ry="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.afterSecurity"}}</h3>
        </button>
        <button type="button" class="category-card category-card--filter category-card--compact category-card--emerald" data-filter="car-rental">
          <span class="category-card__icon category-card__icon--emerald" aria-hidden="true">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M19 17h2c.6 0 1-.4 1-1v-3c0-.9-.7-1.7-1.5-1.9C18.7 10.6 16 10 16 10s-1.3-1.4-2.2-2.3c-.5-.4-1.1-.7-1.8-.7H5c-.6 0-1.1.4-1.4.9l-1.4 2.9A3.7 3.7 0 0 0 2 12v4c0 .6.4 1 1 1h2"/><circle cx="7" cy="17" r="2"/><path d="M9 17h6"/><circle cx="17" cy="17" r="2"/></svg>
          </span>
          <h3 class="font-display font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.filterCarRentals"}}</h3>
        </button>
      </div>

      <p id="dir-summary" class="mt-4 text-sm text-slate-500 dark:text-slate-400"></p>

      <section class="dir-zone mt-8" data-zone-section="before-security" aria-labelledby="dir-before-heading">
        <h2 id="dir-before-heading" class="font-display text-lg font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.beforeSecurity"}}</h2>
        <div class="reveal-stagger mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {{range .BeforeSecurity}}{{template "dir_entry" (dirEntry $.View . "before-security" false)}}{{end}}
        </div>
        <p class="dir-zone__empty mt-4 hidden text-sm text-slate-500 dark:text-slate-400">{{t .View "directoryContent.noZoneResults"}}</p>
      </section>

      <section class="dir-zone mt-10" data-zone-section="after-security" aria-labelledby="dir-after-heading">
        <h2 id="dir-after-heading" class="font-display text-lg font-bold text-slate-900 dark:text-white">{{t .View "directoryContent.afterSecurity"}}</h2>
        <div class="reveal-stagger mt-4 grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {{range .AfterSecurity}}{{template "dir_entry" (dirEntry $.View . "after-security" false)}}{{end}}
        </div>
        <p class="dir-zone__empty mt-4 hidden text-sm text-slate-500 dark:text-slate-400">{{t .View "directoryContent.noZoneResults"}}</p>
      </section>

      {{if .CarRentals}}
      <section class="mt-12" id="car-rentals" aria-labelledby="car-rentals-heading">
        {{template "section_heading" (sectionHeading .View "" "directoryContent.carRentalsTitle" "directoryContent.carRentalsDescription")}}
        <div class="reveal-stagger grid gap-6 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4">
          {{range .CarRentals}}{{template "car_rental_card" (carRentalCard $.View .)}}{{end}}
        </div>
      </section>
      {{end}}
    </div>
  </div>
</main>

<div id="dir-modal" class="modal-backdrop fixed inset-0 z-50 hidden items-center justify-center bg-black/60 p-4 backdrop-blur-sm" role="dialog" aria-modal="true" aria-labelledby="dir-modal-title">
  <div class="modal-panel relative w-full max-w-lg overflow-hidden rounded-2xl bg-white shadow-2xl dark:bg-slate-900" role="document">
    <button type="button" id="dir-modal-close" class="absolute right-3 top-3 z-10 inline-flex h-8 w-8 items-center justify-center rounded-full bg-white/90 text-slate-600 shadow-sm transition-colors hover:bg-white hover:text-slate-900 dark:bg-slate-800/90 dark:text-slate-400 dark:hover:bg-slate-800 dark:hover:text-white" aria-label="{{t .View "common.close"}}">
      <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 6 6 18"/><path d="m6 6 12 12"/></svg>
    </button>
    <div id="dir-modal-media" class="aspect-[16/9] bg-slate-100 dark:bg-slate-800">
      <img id="dir-modal-image" src="" alt="" class="h-full w-full object-cover" />
    </div>
    <div class="p-6">
      <span id="dir-modal-category" class="cat-badge cat-badge--shop"></span>
      <h2 id="dir-modal-title" class="mt-2 font-display text-xl font-bold text-slate-900 dark:text-white"></h2>
      <p id="dir-modal-description" class="mt-2 text-sm text-slate-600 dark:text-slate-300"></p>
      <div class="mt-6 grid gap-4 border-t border-slate-100 pt-6 dark:border-slate-800">
        <div class="modal-detail-row">
          <div class="modal-detail-row__icon">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><circle cx="12" cy="12" r="10"/><path d="M12 6v6l4 2"/></svg>
          </div>
          <div>
            <p class="text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">{{t .View "directoryContent.hours"}}</p>
            <p id="dir-modal-hours" class="text-sm font-medium text-slate-900 dark:text-white"></p>
            <p id="dir-modal-status" class="mt-0.5 text-xs"></p>
          </div>
        </div>
        <div class="modal-detail-row">
          <div class="modal-detail-row__icon">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z"/><circle cx="12" cy="10" r="3"/></svg>
          </div>
          <div>
            <p class="text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">{{t .View "directoryContent.location"}}</p>
            <p id="dir-modal-location" class="text-sm font-medium text-slate-900 dark:text-white"></p>
          </div>
        </div>
        <div id="dir-modal-phone-wrap" class="modal-detail-row">
          <div class="modal-detail-row__icon">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6 19.79 19.79 0 0 1-3.07-8.67A2 2 0 0 1 4.11 2h3a2 2 0 0 1 2 1.72 12.84 12.84 0 0 0 .7 2.81 2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.27-1.27a2 2 0 0 1 2.11-.45 12.84 12.84 0 0 0 2.81.7A2 2 0 0 1 22 16.92z"/></svg>
          </div>
          <div>
            <p class="text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">{{t .View "directoryContent.phone"}}</p>
            <a id="dir-modal-phone" href="" class="text-sm font-medium text-brand-600 hover:underline dark:text-brand-400"></a>
          </div>
        </div>
        <div id="dir-modal-email-wrap" class="modal-detail-row hidden">
          <div class="modal-detail-row__icon">
            <svg class="h-5 w-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect width="20" height="16" x="2" y="4" rx="2"/><path d="m22 7-8.97 5.7a1.94 1.94 0 0 1-2.06 0L2 7"/></svg>
          </div>
          <div>
            <p class="text-xs font-bold uppercase tracking-wide text-slate-500 dark:text-slate-400">{{t .View "directoryContent.email"}}</p>
            <a id="dir-modal-email" href="" class="text-sm font-medium text-brand-600 hover:underline dark:text-brand-400"></a>
          </div>
        </div>
      </div>
      <div id="dir-modal-website-wrap" class="mt-6 hidden">
        <a id="dir-modal-website" href="" target="_blank" rel="noopener noreferrer" class="btn-primary w-full justify-center">
          {{t .View "directoryContent.visitWebsite"}}
          <svg class="h-4 w-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><path d="m15 3 3 3-9 9"/></svg>
        </a>
      </div>
    </div>
  </div>
</div>

{{template "footer" .View}}
{{template "scripts" .View}}