<script>
  export let baseurl = 'https://demo.gancio.org'
  export let id

  let event

  function update (id) {

    fetch(`${baseurl}/api/event/${id}`)
    .then(res => res.json())
    .then(e => event = e)
  }

  function when (event) {
    return new Date(event.start_datetime*1000)
            .toLocaleDateString(undefined,
              {
                weekday: 'long',
                month: 'short',
                day: 'numeric',
                hour: '2-digit',
                minute: '2-digit'
              })    
  }

  function thumbnail(event) {
    return `${baseurl}/media/thumb/${event.media[0].url}`
  }

  function position(event) {
    if (event.media[0].focalpoint) {
        const focalpoint = event.media[0].focalpoint
        return `${(focalpoint[0] + 1) * 50}% ${(focalpoint[1] + 1) * 50}%`
      }
      return 'center center'    
  }

  $: update(id)

</script>
<svelte:options tag="gancio-event"/>
{#if event}
<a href='{baseurl}/event/{event.slug || event.id}' class="card">
  {#if event.media.length}
  <img src="{thumbnail(event)}" alt="{event.media[0].name}" style="background-position: {position(event)}; aspect-ratio=1.7778;">
  {/if}
  <div class="container">
    <strong>{event.title}</strong>
    <div>{when(event)}</div>
    <div class='place'>@{event.place.name}</div>
  </div>
</a>
{/if}
<style>
.card {
  display: block;
  font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
  box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
  transition: 0.3s;
  border-radius: 5px; /* 5px rounded corners */
  max-width: 500px;
  text-decoration: none;
  color: white;
  background-color: #1e1e1e;
  overflow: hidden;
}

/* Add rounded corners to the top left and the top right corner of the image */
img {
  border-radius: 5px 5px 0 0;
  max-height: 250px;
  min-height: 160px;
  width: 100%;
  object-fit: cover;
  object-position: top;
}

.card:hover .container {
  padding-left: 20px;
}

/* On mouse-over, add a deeper shadow */
.card:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);
}

/* Add some padding inside the card container */
.container {
  transition: padding-left .2s;
  padding: 16px;
}

.place {
  font-weight: 600;
  color: #ff6e40;
}
</style>
