<template>
  <div>
    <div class="fix-top q-mx-none">
      <div class="q-ma-md" v-if="qbank">
        <q-card class="info-card q-ma-sm" elevated bordered>
          <q-card-section horizontal>
            <q-img class="col-5 col-sm-5" :src="storageUrl+'qbank/m/'+qbank.image" />
            <q-card-actions vertical>
              <div class="text-h5">Qbank</div>
              <div class="text-weight-bold">{{qbank.name}}</div>
              <div class="text-weight-light">
                {{truncateHtml(qbank.description,10)}}
              </div>
              <q-btn flat color="primary" :to="{name:'qbank-details',params:{slug:qbank.slug}}"
                >View Details</q-btn
              >
            </q-card-actions>
          </q-card-section>
        </q-card>
      </div>
      <div v-html="right_content.content" class="ul-style"></div>
      <ul class="ul-style" v-if="right_content.video_link">
         <li>
          <a :href="right_content.video_link" target="_blank">
            <img
              :src="storageUrl+'rightpage/'+right_content.video_thumbnail"
              alt="video thumbnail"
              style="border: 1px solid #d1d1d1;"
            />
          </a>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  props:['right_content','qbank'],
  methods:{
    truncate(str, no_words) {
            let result= str
                .split(" ")
                .splice(0, no_words)
                .join(" ");
            result+="...";
            return result;
        },
    truncateHtml(str,no_words)
    {
        if ((str===null) || (str===''))
            return "N/A";
      else
        str = str.toString();
      str= str.replace(/<[^>]*>/g, '');
      return this.truncate(str,no_words);
    },
  }
};
</script>
<style lang="css" scoped>
.borders {
  border: 1px solid red;
}

.links-blue a {
  text-decoration: none;
  color: #0059ff;
  font-weight: bold;
}
.links-blue a:hover {
  color: #000bac;
  text-decoration: underline;
}

.ul-style {
  list-style-type: none;
  margin-left: 0px;
}
.ul-style li {
  padding: 2px 0px;
}
.ul-style a {
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #29589e;
}
.ul-style a:hover {
  text-decoration: underline;
}
.font-size {
  font-size: 18px;
}

.line-height .q-skeleton {
  margin: 12px 0;
}

.fix-top {
  position: fixed;
}
.width {
  width: 60%;
}
.skeleton .q-skeleton {
  padding: 5px 0px;
  margin: 0 10px;
}
@media only screen and (min-width: 0px) and (max-width: 900px) {
  .font-size {
    font-size: 14px;
  }

  .fix-top {
    position: relative !important;
  }
  .width {
    width: 90%;
  }
}
</style>
