<template>
  <div class="calendar grid grid-cols-4">
    <div v-if="showBanner" class="col-span-4 xl:col-span-1">
      <aside class="banner bg-orange-300 text-white h-full">
        <i class="ico--calendar banner__icon"></i>
        <div class="banner__body">
          <h1 class="head-alt-md banner__cta">{{ name }}</h1>
          <button class="btn btn--white btn--fullwidth sm:btn--autowidth mt-8" v-if="onShowMore && hasMore" @click="onShowMore()">
            <div class="btn__body">Zobrazit další</div>
          </button>
        </div>
      </aside>
    </div>
    <div :class="{'col-span-4 xl:col-span-3': showBanner, 'col-span-4': !showBanner}">
      <div class="grid grid-cols-12 items-center calendar-table-row" v-for="event in events" v-bind:key="event.id" :class="{'calendar-table-row--standalone': !showBanner}">
        <div class="col-span-2 text-orange-300 head-alt-md calendar-table-row__col"><span>{{ event.startTimestamp | dateDay }}</span></div>
        <div class="col-span-8 grid grid-cols-3 col-gap-4 calendar-table-row__col" :class="{'calendar-table-row__col--norborder': !event.mapLink}">
          <div class="col-span-3 md:col-span-1">
            <strong class="block">{{ event.startDateVerbose }}</strong>
            <p class="font-light text-sm mt-1">{{ event.allDay ? "Celý den" : event.startTimeVerbose }}</p>
          </div>
          <div class="col-span-3 md:col-span-2 mt-4 md:mt-0">
            <a v-if="event.link" v-bind:href="event.link" class="font-bold block" target="_blank" rel="noreferrer noopener">{{ event.title }}</a>
            <strong v-if="!event.link" class="block">{{ event.title }}</strong>
            <p class="font-light text-sm mt-1" v-if="event.description">{{ event.description }}</p>
          </div>
        </div>
        <div class="col-span-2 text-center font-light calendar-table-row__col">
          <a :href="event.mapLink" v-if="event.mapLink" class="icon-link">
            <i class="ico--location text-violet-300 mr-1" aria-hidden="true"></i>
            <span>Mapa</span>
          </a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: {
      name: {
        type: String,
        default: "Kalendář"
      },
      events: {
        type: Array,
        required: true,
      },
      onShowMore: {
        type: Function,
        required: false,
      },
      hasMore: {
        type: Boolean,
        default: true,
      },
      showBanner: {
        type: Boolean,
        default: true,
      },
    },
    filters: {
      dateDay: (val) => {
        return `${new Date(val).getDate()}.`;
      }
    }
  };
</script>
