{{define "dir_entry"}}
{{$v := .View}}
{{$e := .Entry}}
<article class="dir-card dir-entry group{{if $e.Logo}} dir-card--logo{{end}}{{if .Hidden}} hidden{{end}}"
         data-zone="{{.Zone}}"
         data-kind="{{$e.Category}}"
         data-search="{{dirSearchText $e}}"
         data-id="{{$e.ID}}"
         data-name="{{$e.Name}}"
         data-category="{{categoryLabel $v $e}}"
         data-description="{{$e.Description}}"
         data-location="{{$e.Location}}"
         data-hours="{{$e.Hours}}"
         data-phone="{{$e.Phone}}"
         data-website="{{$e.Website}}"
         data-image="{{$e.Image}}"
         {{if $e.Logo}}data-logo="true"{{end}}>
  {{if $e.Logo}}
  <div class="dir-card__media dir-card__media--logo dir-card__media--logo-light">
    {{if $e.Image}}
    <img src="{{$e.Image}}" alt="{{$e.Name}}" class="dir-card__logo dir-card__logo--lg" loading="lazy" decoding="async" />
    {{else}}
    <img src="/images/placeholder-shop.svg" alt="{{$e.Name}}" class="dir-card__logo dir-card__logo--lg" loading="lazy" decoding="async" />
    {{end}}
  {{else}}
  <div class="dir-card__media">
    {{if $e.Image}}
    <img src="{{$e.Image}}" alt="{{$e.Name}}" class="h-full w-full object-cover transition-transform duration-500 group-hover:scale-105" loading="lazy" decoding="async" />
    {{else}}
    <img src="/images/placeholder-shop.svg" alt="{{$e.Name}}" class="h-full w-full object-cover" loading="lazy" decoding="async" />
    {{end}}
  {{end}}
    <span class="dir-card__badge">
      {{if eq $e.Category "restaurant"}}
      <span class="cat-badge cat-badge--food">{{categoryLabel $v $e}}</span>
      {{else}}
      <span class="cat-badge cat-badge--shop">{{categoryLabel $v $e}}</span>
      {{end}}
    </span>
    <div class="dir-card__cta">
      <span class="inline-flex items-center rounded-full bg-white/95 px-3 py-1.5 text-xs font-semibold text-brand-700 shadow-lg">
        {{t $v "directoryContent.viewDetails"}} →
      </span>
    </div>
  </div>
  <div class="dir-card__body">
    <h3 class="dir-card__title">{{$e.Name}}</h3>
    {{if $e.Description}}
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400 line-clamp-2">{{$e.Description}}</p>
    {{end}}
    <div class="dir-card__meta">
      {{if $e.Hours}}
      <div class="dir-card__meta-row">
        <svg class="h-3.5 w-3.5 shrink-0 text-accent" 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>
        <span>{{$e.Hours}}</span>
      </div>
      {{end}}
      {{if $e.Phone}}
      <div class="dir-card__meta-row">
        <svg class="h-3.5 w-3.5 shrink-0 text-brand-500" 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>
        <span>{{$e.Phone}}</span>
      </div>
      {{end}}
    </div>
  </div>
</article>
{{end}}