<div class="container mx-auto my-12">
  <div class="leading-normal w-3/4 mx-auto">
    <h1 class="text-5xl font-light text-center mb-4">TA-Foodtrucks Example</h1>
    <h2 class="text-xl font-light text-center">
      TA-Foodtrucks uses the Craftplaces Api demo data to show the next food truck and street food dates in your area. You can customize the endpoints to get all dates for a specific vendor, for a specific city or just for a location you are interested in.
    </h2>
  </div>
  <div class="ta-foodtrucks rounded-lg border-2 border-gray-200 shadow-xl px-4 py-4 mb-8" x-data="taFoodtrucks()" x-init="init()" x-cloak data-endpoint="https://api.craftplaces.com/api/v1/dip/location/twodays" data-locale="de-DE" data-min-height="10rem" data-duration="1000" data-today="Heute" data-tomorrow="Morgen" data-seperator=" - " data-suffix=" Uhr">

    <div class="absolute flex items-center justify-center inset-0 w-full h-full text-gray-400 z-5" x-show="!initialized">
      <svg xmlns="http://www.w3.org/2000/svg" class="fill-current h-24 w-24" viewBox="0 0 100 100">
        <path d="M27.136 52.495c1.377 12.625 12.734 21.747 25.359 20.37s21.747-12.735 20.37-25.36m-3.878.423c1.14 10.438-6.378 19.91-16.915 21.06s-19.92-6.478-21.06-16.916">
          <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" from="0 50 50" to="360 50 50" repeatCount="indefinite" />
        </path>
      </svg>
    </div>
    <div class="absolute flex-center inset-0 w-full h-full z-5" x-show="initialized && empty">
      Sorry, no dates available at the moment...
    </div>
    <template x-for="(item, index) in dates" :key="item.id" x-if="initialized && !empty">
      <div class="grid gap-4 grid-col-1 sm:grid-cols-4 items-center py-8">
        <div class="relative rounded-full w-32 h-32 overflow-hidden bg-white border-2 border-solid border-gray-400 mx-auto">
          <img :src="item.logo.url.local" alt="asdas" class="absolute inset-0 h-full w-full object-cover" />
        </div>
        <div class="sm:col-span-3 leading-tight">
          <h4 class="text-md text-blue-600 font-bold border-b-2 border-dashed border-cool-gray-300 -ml-2 pl-2 pb-2 mb-1">
            <span x-text="getWeekday(index, true)"></span>,
            <span x-text="getDay(index)"></span>
          </h4>
          <h3 class="text-5xl font-light -ml-1">
            <span x-text="getTime(index, ' - ', 'Uhr')"></span>
          </h3>
          <p class="text-base font-light mb-2">
            <span x-text="item.name"></span>
            : <span x-text="item.location.address.street"></span>
            <span x-text="item.location.address.number"></span>,
            <span x-text="item.location.address.city"></span>
          </p>
          <p class="text-base font-light mb-4">
            <span class="font-normal" x-text="item.vendor.name.long"></span>:
            <span x-text="item.vendor.offer"></span>
          </p>
          <div class="w-full flex flex-wrap justify-between font-normal text-sm">
            <div class="flex flex-wrap items-center my-2">
              <a :href="getWhat3WordsLink(index)" class="inline-flex text-sm text-pink-800 font-bold items-center" target="_blank">
                <svg class="fill-current h-4" viewBox="0 0 576 512">
                  <path d="M288 0c-69.59 0-126 56.41-126 126 0 56.26 82.35 158.8 113.9 196.02 6.39 7.54 17.82 7.54 24.2 0C331.65 284.8 414 182.26 414 126 414 56.41 357.59 0 288 0zm0 168c-23.2 0-42-18.8-42-42s18.8-42 42-42 42 18.8 42 42-18.8 42-42 42zM20.12 215.95A32.006 32.006 0 0 0 0 245.66v250.32c0 11.32 11.43 19.06 21.94 14.86L160 448V214.92c-8.84-15.98-16.07-31.54-21.25-46.42L20.12 215.95zM288 359.67c-14.07 0-27.38-6.18-36.51-16.96-19.66-23.2-40.57-49.62-59.49-76.72v182l192 64V266c-18.92 27.09-39.82 53.52-59.49 76.72-9.13 10.77-22.44 16.95-36.51 16.95zm266.06-198.51L416 224v288l139.88-55.95A31.996 31.996 0 0 0 576 426.34V176.02c0-11.32-11.43-19.06-21.94-14.86z" />
                </svg>
                <span class="ml-1"> What3Words </span></a>
              <span class="ml-2"> (<span x-text="item.location.position.what3words"></span>) </span>
            </div>
            <a :href="getGoogleMapsLink(index)" class="inline-flex text-sm text-pink-800 font-bold items-center my-2" target="_blank">
              <svg class="fill-current h-4" viewBox="0 0 384 512">
                <path d="M172.268 501.67C26.97 291.031 0 269.413 0 192 0 85.961 85.961 0 192 0s192 85.961 192 192c0 77.413-26.97 99.031-172.268 309.67-9.535 13.774-29.93 13.773-39.464 0zM192 272c44.183 0 80-35.817 80-80s-35.817-80-80-80-80 35.817-80 80 35.817 80 80 80z" />
              </svg>
              <span class="ml-1"> Google Maps </span>
            </a>
          </div>
        </div>
      </div>
    </template>
  </div>
  <div class="leading-normal w-3/4 mx-auto">
    <p class="text-xl font-bold text-center my-4">Links: <a href="https://github.com/markusantonwolf/ta-foodtrucks" class="text-pink-800 underline hover:text-black" target="_blank">GitHub Repo</a>, <a href="https://ta-gallery.markusantonwolf.com/city/" class="text-pink-800 underline font-bold hover:text-black" target="_blank">Demo</a>, <a href="https://ta-gallery.markusantonwolf.com/" class="text-pink-800 underline font-bold hover:text-black" target="_blank">Doku</a> and <a href="https://www.markusantonwolf.com/" class="text-pink-800 underline font-bold hover:text-black" target="_blank">Author</a></p>
  </div>
</div>

.font-sans {
  font-family: Raleway, Helvetica, Arial, sans-serif !important;
}

.min-h-64 {
  min-height: 16rem !important;
}

[x-cloak] {
  display: none !important;
}