<template>
  <div>
    <section class="row">
      <div class="col-12 col-md-12 q-px-md bg-grey-1">
        <div class="text-h4 text-bold text-center text-grey-8 q-mx-lg q-py-xl">FAQs</div>
        <div class="row q-mx-xs q-mb-xl flex flex-center">
          <div class="col-12 col-md-12 q-px-xs">
            <q-list>
              <q-expansion-item
                class="q-mb-sm shadow-1 grn-v-bar"
                group="somegroup"
                v-for="f in faqs" :key="f.id"
                :label="f.faq.question"
              >
                <q-card>
                  <q-card-section>
                     <p v-html="f.faq.answer"></p>
                  </q-card-section>
                </q-card>
              </q-expansion-item>
            </q-list>
          </div>
          <div class="q-pa-xl q-gutter-sm">
            <q-btn to="/faqs" label="More FAQs" outline color="primary" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>

<script>
export default {
  props:['faqs']
};
</script>

<style lang="scss" scoped>
.grn-v-bar {
  border-left: 3px solid transparent;
}

.grn-v-bar:hover {
  border-left: 3px solid green;
}
</style>