EducationBlock: With Show Only Set Initially

import { BulmaAccordion, BulmaAccordionItem } from "vue-bulma-accordion";

Vue.component("searchprogramcomponent", {
  props: [
    "titleText",
    "educationType",
    "nohitsText",
    "loadingText",
    "moreFilterText",
    "studyformText",
    "studypaceText",
    "progressionText",
    "levelText",
    "termstartText",
    "studylocationText",
    "areaPickText",
    "areaAllPickText",
    "inputPlaceholderText",
    "programButtonText",
    "coursesButtonText",

    "searchHitShowText",
    "searchHitsText",
    "applicationOpenText",
    "applicationClosedText",
    "applicationLateText",
    "applicationCanceledText",
    "hitCourseText",
    "hitProgramText",

    "statusText",
    "statusBadgeText",

    "educationOccasionText",
    "educationOccasionsText"
  ],
  data() {
    return {
      isDisabled: false,
      areas: "",
      hits: "",
      filters: "",
      filtersAreOpen: false,
      userHasSearched: false,
      hasDefaultArea: "",
      hasDefaultQueryText: "",
      url: "",
      currentDate: Date.now(),
      initialRequest: {
        query: {}
      },
      searchHitCount: 0,
      activeFilters: [],
      showProgramsOnly: false,
      showCoursesOnly: false,
      strings: {
        educationType: JSON.parse(JSON.stringify(this.educationType)),
        titleText: JSON.parse(JSON.stringify(this.titleText)),
        nohitsText: JSON.parse(JSON.stringify(this.nohitsText)),
        loadingText: JSON.parse(JSON.stringify(this.loadingText)),
        moreFilterText: JSON.parse(JSON.stringify(this.moreFilterText)),
        studyFormText: JSON.parse(JSON.stringify(this.studyformText)),
        studyPaceText: JSON.parse(JSON.stringify(this.studypaceText)),
        progressionText: JSON.parse(JSON.stringify(this.progressionText)),
        statusText: this.statusText,
        statusBadgeText: this.statusBadgeText,
        levelText: JSON.parse(JSON.stringify(this.levelText)),
        termStartText: JSON.parse(JSON.stringify(this.termstartText)),
        studyLocationText: JSON.parse(JSON.stringify(this.studylocationText)),
        areaPickText: JSON.parse(JSON.stringify(this.areaPickText)),
        areaAllPickText: JSON.parse(JSON.stringify(this.areaAllPickText)),
        inputPlaceholderText: JSON.parse(
          JSON.stringify(this.inputPlaceholderText)
        ),
        programButtonText: JSON.parse(JSON.stringify(this.programButtonText)),
        coursesButtonText: JSON.parse(JSON.stringify(this.coursesButtonText)),

        searchHitShowText: JSON.parse(JSON.stringify(this.searchHitShowText)),
        searchHitsText: JSON.parse(JSON.stringify(this.searchHitsText)),
        applicationOpenText: JSON.parse(
          JSON.stringify(this.applicationOpenText)
        ),
        applicationClosedText: JSON.parse(
          JSON.stringify(this.applicationClosedText)
        ),
        applicationLateText: JSON.parse(
          JSON.stringify(this.applicationLateText)
        ),
        applicationCanceledText: JSON.parse(
          JSON.stringify(this.applicationCanceledText)
        ),
        hitCourseText: JSON.parse(JSON.stringify(this.hitCourseText)),
        hitProgramText: JSON.parse(JSON.stringify(this.hitProgramText)),
        educationOccasionText: JSON.parse(
          JSON.stringify(this.educationOccasionText)
        ),
        educationOccasionsText: JSON.parse(
          JSON.stringify(this.educationOccasionsText)
        )
      }
    };
  },
  mounted() {
    this.atInit();
  },
  components: {
    BulmaAccordionItem,
    BulmaAccordion
  },
  methods: {
    updateQuery(value) {
      this.initialRequest.query.querytext = value;
    },
    atInit() {
      if (document.getElementById("searchprogramcomponent")) {
        let page = document.getElementById("searchprogramcomponent");
        let url = page.getAttribute("fetch-url");
        let request = JSON.parse(page.getAttribute("json"));

        if (page && url && request) {
          this.initialRequest = request;
          console.log({ iit: this.initialRequest })
          if(request.query.metafacets.length > 0) {
            console.log("contains metafacets!", request.query.metafacets)
            request.query.metafacets.map(meta => {
              this.activeFilters.push(meta)
            })
          }
          if (request.defaults) {

            console.log(request.defaults)
            let { DefaultArea, DefaultLocation, DefaultMainFacet, DefaultProgression, DefaultSearchTerm, DefaultStudyForm, DefaultStudyPace, DefaultTerm } = request.defaults;
            let arrayToBeAddedToMainfacets = [];
            if (DefaultArea || DefaultLocation || DefaultMainFacet || DefaultProgression || DefaultStudyForm || DefaultStudyPace || DefaultTerm) {
              this.userHasSearched = true;
            }
            if (DefaultArea) {
              arrayToBeAddedToMainfacets.push(DefaultArea)
              this.hasDefaultArea = DefaultArea;
            }
            if (DefaultLocation) {
              arrayToBeAddedToMainfacets.push(DefaultLocation)
              this.activeFilters.push(DefaultLocation)
            }
            if (DefaultProgression) {
              arrayToBeAddedToMainfacets.push(DefaultProgression)
              this.activeFilters.push(DefaultProgression)
            }
            if (DefaultStudyForm) {
              arrayToBeAddedToMainfacets.push(DefaultStudyForm)
              this.activeFilters.push(DefaultStudyForm)
            }
            if (DefaultStudyPace) {
              arrayToBeAddedToMainfacets.push(DefaultStudyPace)
              this.activeFilters.push(DefaultStudyPace)
            }
            if (DefaultTerm) {
              arrayToBeAddedToMainfacets.push(this.fixTerm(DefaultTerm))
              this.activeFilters.push(this.fixTerm(DefaultTerm))
            }
            if (DefaultMainFacet) {
              this.initialRequest.query.mainfacet = DefaultMainFacet;
              let emptyArr = [];
              emptyArr.push(DefaultMainFacet);
              this.initialRequest.query.mainfacets = emptyArr;

              if (DefaultMainFacet == "65227|Program|1|False") {
                this.showProgramsOnly = true;
              }
              if (DefaultMainFacet == "65227|Kurser|1|False") {
                this.showCoursesOnly = true;
              }
            }
            if (DefaultSearchTerm) {
              this.initialRequest.query.querytext = DefaultSearchTerm;
              this.hasDefaultQueryText = DefaultSearchTerm;
            }
            if (arrayToBeAddedToMainfacets.length > 0) {
              if (this.activeFilters.length > 0) {
                this.filtersAreOpen = true;
              }
              this.initialRequest.query.metafacets = arrayToBeAddedToMainfacets;
            }
          }
          this.url = url;
          this.initialFetch(url, request);
        }
      }
    },
    fixTerm(value) {
      let newVal = value.replace("Vårterminen", "Våren");
      return newVal.replace("Höstterminen", "Hösten");
    },
    userSubmit(value) {
      //Disable Search/Filter View
      console.log("Query again", value)
      this.fetchAgain(this.url, this.initialRequest);
    },
    userPickedFilter(value) {
      //Disable Search/Filter View
      if (
        
        this.activeFilters.includes(value)
      ) {
        let index = this.activeFilters.indexOf(value);
        this.activeFilters.splice(index, 1);
        let reqIndex = this.initialRequest.query.metafacets.indexOf(value);
        this.initialRequest.query.metafacets.splice(reqIndex, 1);
        this.fetchAgain(this.url, this.initialRequest);
      } else {
        this.activeFilters.push(value);
        this.initialRequest.query.metafacets.push(value);
        this.fetchAgain(this.url, this.initialRequest);
      }
    },
    userpickedCourses(value) {
      this.showCoursesOnly = !this.showCoursesOnly;
      if (this.showCoursesOnly) {
        this.showProgramsOnly = false;
        let arr = ["65227|Kurser|1|False"];
        this.initialRequest.query.mainfacet = "65227|Kurser|1|False";

        this.initialRequest.query.mainfacets = arr;
        this.fetchAgain(this.url, this.initialRequest);
      }
      if (!this.showProgramsOnly && !this.showCoursesOnly) {
        let arr = ["65227|Program|1|False", "65227|Kurser|1|False"];
        this.initialRequest.query.mainfacet = "All";
        this.initialRequest.query.mainfacets = arr;
        this.fetchAgain(this.url, this.initialRequest);
      }
    },
    userPickedPrograms(value) {
      this.showProgramsOnly = !this.showProgramsOnly;
      if (this.showProgramsOnly) {
        this.showCoursesOnly = false;
        let arr = ["65227|Program|1|False"];
        this.initialRequest.query.mainfacet = "65227|Program|1|False";
        this.initialRequest.query.mainfacets = arr;
        this.fetchAgain(this.url, this.initialRequest);
      }
      if (!this.showProgramsOnly && !this.showCoursesOnly) {
        let arr = ["65227|Program|1|False", "65227|Kurser|1|False"];
        this.initialRequest.query.mainfacet = "All";
        this.initialRequest.query.mainfacets = arr;
        this.fetchAgain(this.url, this.initialRequest);
      }
    },
    userPickedArea(value) {
      if (value === "All") {
        this.cleanArrayFromAreas(this.initialRequest.query.metafacets);
        this.fetchAgain(this.url, this.initialRequest);
      } else {
        this.cleanArrayFromAreas(this.initialRequest.query.metafacets);
        this.activeFilters.push(value);
        this.initialRequest.query.metafacets.push(value);

        this.fetchAgain(this.url, this.initialRequest);
      }
    },
    cleanArrayFromAreas(arr) {
      for (var i = arr.length - 1; i >= 0; i--) {
        if (arr[i].includes("Area|")) {
          arr.splice(i, 1);
        }
      }
    },
    async fetchAgain(url, request) {
      try {
        this.disableView(true);
        let res = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=UTF-8"
          },
          body: JSON.stringify(request)
        });
        let data = await res.json();
        this.hits = data.d.SearchHits;
        if (this.hits.length > 0) {
          this.convertApplicationDeadLineDates(this.hits);
          this.checkIfCourseIsAvailable(this.hits);
        }
        this.searchHitCount = data.d.SearchHits.length;
        this.disableView(false);
        this.userHasSearched = true;
      } catch (error) {
        this.disableView(false);
      }
    },
    convertApplicationDeadLineDates(items) {
      items.forEach(element => {
        if (element._source !== null) {
          if (element._source.ProgramOccasions.length > 0) {
            element._source.ProgramOccasions.map(occasion => {
              if (typeof occasion.ApplicationDeadLine === "string") {
                let closedDate = moment(occasion.ApplicationClosed).toDate();
                let deadLineDate = moment(
                  occasion.ApplicationDeadLine
                ).toDate();
                occasion.ApplicationClosed = closedDate;
                occasion.ApplicationDeadLine = deadLineDate;
              } else {
              }
            });
          }
        }
      });
    },
    checkIfCourseIsAvailable(items) {
      items.map(x => {
        if (x._source && x._source.ProgramOccasions.length > 0) {
          x._source.ProgramOccasions.map(occasion => {
            if (
              this.currentDate < occasion.ApplicationDeadLine &&
              this.currentDate < occasion.ApplicationClosed &&
              !occasion.Canceled
            ) {
              x.HasOpenCourses = true;
            }
            if (
              this.currentDate > occasion.ApplicationDeadLine &&
              this.currentDate < occasion.ApplicationClosed &&
              !occasion.Canceled
            ) {
              x.HasOpenCourses = true;
            }
            if (
              this.currentDate > occasion.ApplicationClosed &&
              !occasion.Canceled
            ) {
              x.HasClosedCourses = true;
            }
            if (occasion.Canceled) {
              x.HasClosedCourses = true;
            }
          });
        }
      });
    },
    async initialFetch(url, request) {
      try {
        let res = await fetch(url, {
          method: "post",
          headers: {
            Accept: "application/json, text/plain, */*",
            "Content-Type": "application/json;charset=UTF-8"
          },
          body: JSON.stringify(request)
        });
        let data = await res.json();
        if (data.d) {
          console.log({ request: request })
          console.log({ datad: data.d })
          this.areas = data.d.MetaDataFacets.Area;
          this.hits = data.d.SearchHits;
          this.searchHitCount = data.d.SearchHits.length;
          if (this.hits.length > 0) {
            this.convertApplicationDeadLineDates(this.hits);
            this.checkIfCourseIsAvailable(this.hits);
          }
          const obj = data.d.MetaDataFacets;
          const { Area, Subject, ...filters } = obj;
          this.filters = filters;
        }
      } catch (error) { }
    },
    disableView(bool) {
      this.isDisabled = bool;
    },
    expandFilters() {
      this.filtersAreOpen = !this.filtersAreOpen;
    },
    clearAreasFromMeta() {
      let metafacetsNoAreas = this.initialRequest.query.metafacets.filter(x => !x.includes("Area|"))
      console.log({ metafacetsNoAreas: metafacetsNoAreas })
      this.initialRequest.query.metafacets = metafacetsNoAreas;
      delete this.initialRequest.defaults;

      this.fetchAgain(this.url, this.initialRequest);
    }
  },
  watch: {
    initialRequest: {
      handler(val, oldVal) { },
      deep: true
    }
  },
  template: `
<div class="search--container">

  <div class="search--title">
    <div class="row title-container">
      <div class="col-12 text-center">
        <h2 class="heading-level-2">
          {{strings.titleText}}
        </h2>
      </div>
    </div>
  </div>

      <loadingcomponent v-if="!this.filters" :text="strings.loadingText" ></loadingcomponent>

  <div class="search--search" :class="[this.isDisabled ? 'disabled-view' : '']">
    <div class="row">
      <div class="col-12 col-md-6">
        <areas @clearAreasFromMetafacets="clearAreasFromMeta" :initWithDefaultArea="hasDefaultArea ? hasDefaultArea : ''" :pickText="strings.areaPickText" :allText="strings.areaAllPickText" class="areas" v-if="this.areas" @pickedArea="this.userPickedArea" :areas="this.areas" />
      </div>
      <div class="col-12 col-md-6">
        <searchinput :initWithDefaultSearchTerm="hasDefaultQueryText" :text="strings.inputPlaceholderText" v-if="this.areas" class="search" @userQuery="updateQuery" @userSubmit="userSubmit" />
      </div>
    </div>
  </div>



  <div class="search--filters d-flex flex-column" :class="[this.isDisabled ? 'disabled-view' : '']">
    <div class="d-flex flex-row flex-wrap">
      <programorcourse :educationType="strings.educationType" :programButtonText="strings.programButtonText"
        :coursesButtonText="strings.coursesButtonText"
      :coursesOnly="this.showCoursesOnly" :programsOnly="this.showProgramsOnly" v-if="this.filters" @pickedPrograms="this.userPickedPrograms" @pickedCourses="this.userpickedCourses" />
      <filters class="mr-auto" v-if="this.filters.Studyform && this.activeFilters" :text="strings.studyFormText"
        @pickedFilter="this.userPickedFilter" :filters="this.filters.Studyform" :activeFilters="this.activeFilters" />
        <button type="button" v-if="this.filters" @click="expandFilters" class="d-flex flex-row button--filters align-items-center">
            <transition name="fade" mode="out-in">
                <span v-if="filtersAreOpen" class="material-icons mr-1">keyboard_arrow_up</span>
                <span v-else class="material-icons mr-1">keyboard_arrow_down</span>
            </transition>
            <p class="button--text mb-0">{{strings.moreFilterText}}</p>
        </button>
    </div>

    <transition mode="out-in" name="fade">
      <div class="search--filters--expanded d-flex flex-wrap" v-if="this.filtersAreOpen">

        <filters  v-if="this.filters.StudyPace && this.activeFilters" :affix="'%'" :text="strings.studyPaceText"
        @pickedFilter="this.userPickedFilter" :filters="this.filters.StudyPace" :activeFilters="this.activeFilters" />

        <filters  v-if="this.filters.Progression && this.activeFilters" :text="strings.progressionText"
          @pickedFilter="this.userPickedFilter" :filters="this.filters.Progression"
          :activeFilters="this.activeFilters" />

        <filters  v-if="this.filters.Level && this.activeFilters"  :text="strings.levelText" @pickedFilter="this.userPickedFilter"
          :filters="this.filters.Level" :activeFilters="this.activeFilters" />

        <filters  v-if="this.filters.TermStart && this.activeFilters" :text="strings.termStartText"
          @pickedFilter="this.userPickedFilter" :filters="this.filters.TermStart" :activeFilters="this.activeFilters" />

        <filters  v-if="this.filters.StudyLocation && this.activeFilters" :text="strings.studyLocationText"
          @pickedFilter="this.userPickedFilter" :filters="this.filters.StudyLocation"
          :activeFilters="this.activeFilters" />

        <filters :statusBadgeText="strings.statusBadgeText"  v-if="this.filters.Status && this.activeFilters" :text="strings.statusText"
          @pickedFilter="this.userPickedFilter" :filters="this.filters.Status"
          :activeFilters="this.activeFilters" />

      </div>
    </transition>
    
  </div>

  <div class="search--hits">
    <transition mode="out-in" name="fade">
      <hits :searchHitsCount="this.searchHitCount" :showPrograms="this.showProgramsOnly" :showCourses="this.showCoursesOnly" v-if="this.hits && this.userHasSearched" :hits="this.hits"
      
      :searchHitShowText="strings.searchHitShowText"
      :searchHitsText="strings.searchHitsText"
      :applicationOpenText="strings.applicationOpenText"
      :applicationClosedText="strings.applicationClosedText"
      :applicationLateText="strings.applicationLateText"
      :applicationCanceledText="strings.applicationCanceledText"
      :educationOccasionText="strings.educationOccasionText"
      :educationOccasionsText="strings.educationOccasionsText"
      :hitCourseText="strings.hitCourseText"
      :hitProgramText="strings.hitProgramText"

      />
      
    </transition>
    <transition mode="out-in" name="fade">
    <div class="nohits--container" v-if="this.filters && this.searchHitCount == 0 && !this.isDisabled">
      <p :class="{'animated shake': this.searchHitCount === 0}">{{strings.nohitsText}}</p>
    </div>
    </transition>
  </div>
</div>
  `
});

Vue.component("programorcourse", {
  props: [
    "coursesOnly",
    "programsOnly",
    "programButtonText",
    "coursesButtonText",
    "educationType"
  ],
  data() {
    return {
      programsButton: false,
      coursesButton: false
    };
  },
  methods: {
    filterBy(value) {
      if (value === "65227|Program|1|False") {
        this.$emit("pickedPrograms", value);
      }
      if (value === "65227|Kurser|1|False") {
        this.$emit("pickedCourses", value);
      }
    }
  },
  template: `
<div class="filter--container">
  <label>{{this.educationType}}</label>
  <div class="d-flex flex-row flex-wrap filter--wrapper">
    <ul class="d-flex flex-wrap list-unstyled">
      <li>
        <button type="button" :class="{'selected': programsOnly}" :disabled="coursesOnly" @click="filterBy('65227|Program|1|False')" class="button-small">{{this.programButtonText}}</button>
      </li>
      <li>
        <button type="button" :class="{'selected': coursesOnly}" :disabled="programsOnly" @click="filterBy('65227|Kurser|1|False')" class="button-small">{{this.coursesButtonText}}</button>
      </li>
    </ul>
  </div>
</div>
  `
});

Vue.component("areas", {
  props: ["areas", "pickText", "allText", "initWithDefaultArea"],
  data() {
    return {
      selected: "",
      defaultArea: ""
    };
  },
  methods: {
    onChange(event) {
      this.$emit("pickedArea", this.defaultArea ? this.defaultArea : this.selected);
      if (event.target.value == "All") {
        this.$emit("clearAreasFromMetafacets")
      }
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.defaultArea = this.initWithDefaultArea
    })
  },
  template: `
  <select :id="this.pickText" :title="this.pickText"  class="select-css form-control" v-model="defaultArea ? defaultArea : selected" @change="onChange($event)">
    <option disabled value="">{{this.pickText}}</option>
    <option value="All">{{this.allText}}</option>
    <option v-for="(item, index) in this.areas" :value="item.Term" :key="index">{{item.Text}}</option>
  </select>
  `
});
Vue.component("searchinput", {
  props: ["text", "initWithDefaultSearchTerm"],
  data() {
    return {
      query: "",
      isFocus: false,
      defaultQuery: ""
    };
  },
  methods: {
    submitQuery(e) {
      e.preventDefault();
      this.$emit("userSubmit", this.query);
    }
  },
  watch: {
    query: function (newVal, oldVal) {
      this.$emit("userQuery", this.query);
    }
  },
  mounted() {
    this.$nextTick(function () {
      this.query = this.initWithDefaultSearchTerm
    })
  },
  template: `
<form :title="this.text" @submit.prevent(submitQuery) :class="{'is--focused': isFocus}" class="search--input--container form-control" ref="search">
    <input type="text" :alt="this.text" :title="this.text"
    :name="this.text" v-model="query" @focus="isFocus = true" @blur="isFocus = false"
        :placeholder="this.text" />
    <transition name="fade" mode="in-out">
        <button  @click="this.submitQuery" type="submit" v-if="!isFocus "
            class="d-flex align-items-center justify-content-center search--btn">
            <span class="material-icons ">search</span>
        </button>
        <button  type="submit" @click="this.submitQuery" v-else
            class="d-flex search--btn align-items-center active justify-content-center">
            <span class="material-icons blue">search</span>
        </button>
    </transition>
</form>
  `
});
Vue.component("filters", {
  props: ["filters", "activeFilters", "text", "affix", "statusBadgeText"],
  data() {
    return {
      active: "",
      statusBadge: this.statusBadgeText
    };
  },
  methods: {
    submitFilter(value) {
      this.$emit("pickedFilter", value);
    }
  },
  mounted() {
    if (this.activeFilters) {
      this.active = this.activeFilters;
    }
  },
  template: `
<div class="filter--container">
  <label v-if="this.text">{{this.text}}</label>
  <div class="d-flex flex-row flex-wrap filter--wrapper">
    <ul class="d-flex flex-wrap list-unstyled">
      <li v-for="(filter, index) in this.filters" :key="index">
        <button type="button" :class="{'selected': active.includes(filter.Term)}" class="button-small" @click="submitFilter(filter.Term)">
          
          <template v-if="filter && !filter.Term.includes('Status|')">
          
            <template v-if="filter.Text && filter.Text == 'Normal'">
            Campus
            </template>
            <template v-else>
            {{filter.Text}}
            </template>
          </template>


          <template v-if="filter && filter.Term.includes('Status|')">{{statusBadge}}</template>
              <template v-if="affix">
          <span v-if="active.includes(filter.Term)" class="text-white">{{affix}}</span>
          <span v-else>{{affix}}</span>
        </template>
        </button>
      </li>
    </ul>
  </div>
</div>
  `
});

Vue.component("loadingcomponent", {
  props: ["text"],
  template: `
 <div class="d-flex flex-row w-100 pb-5 pt-5">
   <button disabled class="d-flex align-items-center button-small ml-auto mr-auto ">
   <i class="material-icons">cached</i> <span class="ml-2 filter--button--text" v-if="text">{{text}}</span>
   </button>
 </div>
   `
});
Vue.component("hits", {
  props: [
    "hits",
    "showPrograms",
    "showCourses",
    "searchHitsCount",

    "searchHitShowText",
    "searchHitsText",
    "applicationOpenText",
    "applicationClosedText",
    "applicationLateText",
    "applicationCanceledText",
    "hitCourseText",
    "hitProgramText",

    "educationOccasionText",
    "educationOccasionsText"
  ],
  data() {
    return {
      currentDate: "",
      items: "",
      searchHitShow: this.searchHitShowText,
      searchHits: this.searchHitsText,
      applicationOpen: this.applicationOpenText,
      applicationClosed: this.applicationClosedText,
      applicationLate: this.applicationLateText,
      applicationCanceled: this.applicationCanceledText,
      hitCourse: this.hitCourseText,
      hitProgram: this.hitProgramText,
      educationOccasion: this.educationOccasionText,
      educationOccasions: this.educationOccasionsText
    };
  },
  methods: {
    convertApplicationDeadLineDates(items) {
      items.forEach(element => {
        if (element._source !== null) {
          if (element._source.ProgramOccasions.length > 0) {
            element._source.ProgramOccasions.map(occasion => {
              if (typeof occasion.ApplicationDeadLine === "string") {
                let closedDate = moment(occasion.ApplicationClosed).toDate();
                let deadLineDate = moment(
                  occasion.ApplicationDeadLine
                ).toDate();
                occasion.ApplicationClosed = closedDate;
                occasion.ApplicationDeadLine = deadLineDate;
              } else {
              }
            });
          }
        }
      });
    }
  },
  mounted() {
    this.currentDate = moment()._d;
    this.items = this.hits;
    if (!this.showPrograms && !this.showCourses) {
      this.convertApplicationDeadLineDates(this.hits);
    }
  },
  watch: {
    items: function () {
      if (!this.showPrograms && !this.showCourses) {
        this.convertApplicationDeadLineDates(this.hits);
      }
    }
  },
  template: `
  <div class="hitsarea">
  <div v-if="this.searchHitsCount" class="hits--count d-flex flex-row flex-wrap align-items-center">
      <p>{{this.searchHitShowText}} <strong>{{this.searchHitsCount}}</strong>
      {{this.searchHitsText}}</p>
  </div>
  <ul class="list-unstyled mb-0" v-for="(item, index) in hits">
      <template   v-if="item.Section.includes('Program')" class="hits--inner"  :icon="'custom'">
          <bulma-accordion  :key="item.UniqueId">
              <bulma-accordion-item>
                  <div class="d-flex flex-column" slot="title">
                      <a :href="item.Url">
                          <h2 v-html="item.Title" class="heading-level-3">
                        </h2>
                      </a>
                      <div class="d-flex flex-row flex-wrap">
                          <div class="hits-block d-flex flex-row align-items-center">
                              <p>{{hitProgram}}</p>
                          </div>
                          <div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Points && item.MetaData.Points.StringValue">
                              <p>{{ item.MetaData.Points.StringValue }} hp</p>
                          </div>
                          <div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Level && item.MetaData.Level.StringValue">
                              <p>{{ item.MetaData.Level.StringValue }}</p>
                          </div>
                          <div class="hits-block d-flex flex-row flex-wrap align-items-center" v-if="item._source && item._source.ProgramOccasions.length > 0">
                              <p class="d-flex flex-row flex-wrap align-items-center" v-if="item._source.ProgramOccasions.length == 1">

                              <span class="circle--green" v-if="item.HasOpenCourses"></span>
                              <span class="circle--grey" v-else-if="item.HasClosedCourses"></span>
      
                            {{item._source.ProgramOccasions.length}} {{educationOccasion}}
                            
                            </p>
                            <p class="d-flex flex-row flex-wrap align-items-center" v-else>
                              <span class="circle--green" v-if="item.HasOpenCourses"></span>
                              <span class="circle--grey" v-else-if="item.HasClosedCourses"></span>
                            {{item._source.ProgramOccasions.length}} {{educationOccasions}}</p>
                          </div>
                      </div>
                  </div>
                  <i slot="icon-closed" class="material-icons">keyboard_arrow_down</i>
                  <i slot="icon-open" class="material-icons">keyboard_arrow_up</i>
                  <div class="high d-flex flex-column" slot="content">
                      <div v-if="item._source && item._source.ProgramOccasions && item._source.ProgramOccasions.length > 0" class="hits-occasions d-flex flex-column flex-wrap" v-for="occasion in item._source.ProgramOccasions">
                          <div class="d-flex flex-row flex-wrap aling-items-center w-100">
                            <strong v-if="occasion.Orientations && occasion.Orientations.length > 0">{{occasion.Orientations[0].Name}}</strong>
                          </div>

                          <div class="d-flex flex-row flex-wrap w-100">
                            <p>{{occasion.TermStart}}</p>
                            <p>{{occasion.StudyLocation}}</p>
                            <p>{{occasion.StudyPace}}</p>

                            <a :href="item.Url" class="status-link d-flex flex-row align-items-center" v-if="currentDate < occasion.ApplicationDeadLine && currentDate < occasion.ApplicationClosed && !occasion.Canceled">
                                <span class="circle--green"></span> {{applicationOpen}}
                            </a>
                            <a :href="item.Url" class="status-link d-flex flex-row align-items-center" v-if="currentDate > occasion.ApplicationDeadLine && currentDate < occasion.ApplicationClosed && !occasion.Canceled">
                                <span class="circle--orange"></span> {{applicationLate}}
                            </a>
                            <a :href="'https://www.antagning.se/se/search?period=' + occasion.TermStartAbbreviation.slice(0,2) + '+' + occasion.TermStartAbbreviation.slice(2, 6) + '&freeText=' + occasion.RegistrationCode" class="status-link d-flex flex-row align-items-center" v-if="currentDate > occasion.ApplicationClosed && !occasion.Canceled">
                                <span class="circle--grey"></span> {{applicationClosed}}
                            </a>
                            <a :href="'https://www.antagning.se/se/search?period=' + occasion.TermStartAbbreviation.slice(0,2) + '+' + occasion.TermStartAbbreviation.slice(2, 6) + '&freeText=' + occasion.RegistrationCode" class="status-link d-flex flex-row align-items-center" v-if="occasion.Canceled">
                                <span class="circle--grey"></span> {{applicationCanceled}}
                            </a>
                          </div>
                      </div>
                  </div>
              </bulma-accordion-item>
          </bulma-accordion>
      </template>
      <template v-if="item.Section.includes('Kurs')">
        <li :key="item.UniqueId">
            <div class="d-flex flex-column hits-inner">
                <a :href="item.Url">
                    <h2 class="heading-level-3" v-html="item.Title"></h2>
                </a>

                <div class="d-flex flex-row flex-wrap">
                    <div class="d-flex flex-row flex-wrap">
                        <div class="hits-block d-flex flex-row align-items-center">
                            <p>{{hitCourse}}</p>
                        </div>
                        <div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Points && item.MetaData.Points.StringValue">
                            <p>{{ item.MetaData.Points.StringValue }} hp</p>
                        </div>
                        <div class="hits-block d-flex flex-row align-items-center" v-if="item.MetaData && item.MetaData.Level && item.MetaData.Level.StringValue">
                            <p>{{ item.MetaData.Level.StringValue }}</p>
                        </div>
                    </div>
                </div>
            </div>
        </li>
      </template>
  </ul>
</div>
  `
});