<template>

    <div class="c-training-card  js-training-card  u-spacing-mb3">

        <a class="c-training-card__datetime" v-bind:href="link ">
          <template v-if="!trainingCard.in_consulation">
            <div class="c-training-card__date">
                <span class="c-training-card__start-date">{{ trainingCard.formatted_start_date }}</span>
<!--                <span class="c-training-card__end-date">{{endDate}}</span>-->
            </div>

            <div class="c-training-card__time">
                <span class="c-training-card__start-time">{{ trainingCard.start_time }}</span>
                <span class="c-training-card__duration">{{ __('duration') }}: {{ trainingCard.duration }} {{ __('hour') }}</span>
            </div>
          </template>
          <template v-else>
            <div class="c-training-card__date">
              <span class="c-training-card__start-date" v-html="__('in_consultation')"></span>
            </div>
          </template>
        </a>
        <div class="c-training-card__body">
            <div class="c-training-card__main">

                <a class="c-training-card__heading" v-bind:href="link">
                    <h3 class="c-training-card__title">{{ title }}</h3>
                    <div class="c-training-card__location">
                        <i><slot name="pin-icon"></slot></i>
                        <span v-if="trainingCard.location_id !== 12">{{ trainingCard.location.name }}, {{ trainingCard.location.city }}</span>
                        <span v-else>{{ trainingCard.location.name }}</span>
                    </div>
                </a>

                <div class="c-training-card__price" :class="{ 'is-empty' : (trainingCard.price == null) }">
                  <template v-if="trainingCard.price != null">
                    <div class="c-training-card__price-label">{{ trainingCard.price }}</div>
                    <div class="c-training-card__btw-label">{{__('trainings_ex_vat')}}</div>
                  </template>
                </div>

                <div class="c-training-card__week-wrapper">
                  <template v-if="!trainingCard.in_consulation">
                    <div class="c-training-card__week-amount">{{ trainingCard.amount_of_weeks }} {{ __('weeks')}}</div>
                    <div class="c-training-card__week-days">
                        <span>{{ trainingCard.lessons_each_week}}</span>
<!--                        <span class="u-nowrap">- {{  daysOfWeek.join(' & ') }}</span>-->
                    </div>
                  </template>
                </div>
            </div>

            <div class="c-training-card__actions">
                <div class="c-training-card__apply">
                    <a class="c-button  c-button--secondary" v-bind:href="subscribeLink">
                        <span class="c-button__text">{{__('apply')}}</span>
                    </a>
                </div>
                <a class="c-training-card__more" v-bind:href="link">
                    <span>{{ __('moreInfo') }}</span>
                    <i><slot name="arrowheadRight-icon"></slot></i>
                </a>
            </div>
        </div>

    </div>

</template>

<script>
    import {store} from "../main";
    import ResizeHandler from "./../../../global/resizeHandler"

    export default {
        name: "trainingCard",

        props: {
            trainingCard: null,
            resourcePath: null,
        },

      mounted() {

          this.languageTranslation = this.trainingCard.language.translations.find(languageTranslation => {
            return languageTranslation.language_id == this.$root.activeLanguage;
          });

          ResizeHandler.trainingCardTypeSet();

          // debugger;
      },

      data: function () {
            return {
              languageTranslation: null,
                // daysOfWeek: ['MA', 'DO'],
            }
        },

        computed: {
            link(){
                return this.resourcePath + '/' + this.trainingCard.c4_id;
            },
            subscribeLink(){
                return this.resourcePath + '/' + this.trainingCard.c4_id + '/' + this.__('subscribe_route');
            },
            title(){

              return this.trainingCard.api_response.catalogus_naam;

              // debugger;
                if(isset(this.languageTranslation)) return this.languageTranslation.name + ' ' + this.trainingCard.level;
                return this.trainingCard.language.iso_2.toUpperCase() + ' | ' + this.trainingCard.level;
            },
        }
    }
</script>