{{#
    @name Advanced Card
    @desc An Advanced Card
#}}

<!-- /components/_advanced_card.antlers.html -->
<div class="max-w-sm mx-auto bg-white rounded-lg shadow-lg overflow-hidden">
    <!-- Image Section -->
    <div class="relative">
        {{accommodation}}
      <img
        class="w-full h-48 object-cover"
        src="{{featured_image}}"
        alt="Card Image"
      />
      {{/accommodation}}
      <div class="absolute bottom-2 right-2 bg-beige-ecru bg-opacity-50 text-white text-xs px-2 py-1 rounded">
        Day: {{day}}
      </div>
    </div>
  
    <!-- Text Content -->
    <div class="p-4">
      <p class="text-sm text-gray-600 mb-2">{{accommodation['location']}}</p>
      <h2 class="text-lg font-bold text-gray-800 mb-2">{{accommodation['title']}}</h2>
      <p class="text-gray-700 text-sm">
        {{accommodation_stay}}
      </p>
    </div>
  </div>
<!-- End: /components/_advanced_card.antlers.html -->