<template>
  <b-collapse :open.sync="FooterisOpen">
    <div slot="trigger" class="card-footer-header">
      <div class="card-footer-item footerSource">
        <span class="flink" v-html="source"></span>
        <span class="flink" v-if="summary">
          <a><b-icon :icon="FooterisOpen ? 'minus-square' : 'plus-square'" pack="fa" type="is-info" size="is-small"></b-icon>Note</a>
        </span>
        <span class="flink" v-if="faq != null">
          <faq-link :lang="toggleLang" :faq="faq" />
        </span>
      </div>
    </div>
    <div v-if="summary" class="card-footer-content">
      <p v-html="summaryContent"></p>
    </div>
  </b-collapse>
</template>

<script>
import FAQ from "./FAQ.vue";

export default {
  props: [
    'lang',
	'summary',
	'source',
	'summaryContent',
	'faq'
  ],
  components: {
	'faq-link': FAQ
  },
  data: function() {
	return {
      FooterisOpen: false
	}
  }, // data
  computed: {
    toggleLang: function() {
      return this.lang;
    }
  } // end computed
} // default
</script>

<style>
.footerSource a {
  color: #3273dc !important;
}
</style>
