{{define "car_rental_card"}}
{{$v := .View}}
{{$r := .Rental}}
<article class="dir-card dir-card--logo dir-entry group"
         data-zone="car-rental"
         data-search="{{$r.Name}} {{$r.Description}} {{$r.Phone}} {{$r.Email}} car rental"
         data-id="car-{{$r.ID}}"
         data-name="{{$r.Name}}"
         data-category="{{t $v "directoryContent.categoryCarRental"}}"
         data-description="{{$r.Description}}"
         data-location="{{t $v "directoryContent.carRentalsLocation"}}"
         data-hours="{{$r.Hours}}"
         data-phone="{{$r.Phone}}"
         data-email="{{$r.Email}}"
         data-website="{{$r.Website}}"
         data-image="{{$r.Image}}"
         data-logo="true">
  <div class="dir-card__media dir-card__media--logo dir-card__media--logo-light">
    {{if $r.Image}}
    <img src="{{$r.Image}}" alt="{{$r.Name}}" class="dir-card__logo" loading="lazy" decoding="async" />
    {{else}}
    <img src="/images/placeholder-car.svg" alt="{{$r.Name}}" class="dir-card__logo" loading="lazy" decoding="async" />
    {{end}}
    <span class="dir-card__badge">
      <span class="cat-badge cat-badge--rental">{{t $v "directoryContent.categoryCarRental"}}</span>
    </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">{{$r.Name}}</h3>
    {{if $r.Description}}
    <p class="mt-1 text-sm text-slate-500 dark:text-slate-400 line-clamp-3">{{$r.Description}}</p>
    {{end}}
    <div class="dir-card__meta">
      {{if $r.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>{{$r.Hours}}</span>
      </div>
      {{end}}
      {{if $r.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>{{$r.Phone}}</span>
      </div>
      {{end}}
    </div>
  </div>
</article>
{{end}}