<template>
  <reco-modal 
    v-on:backButtonClicked="backButtonClicked" 
    :withBackButton="true" 
    :withDoneButton="false"  
    :isNextButton="false" 
    :title="title"
    :background="color">

    <ion-content slot="content">
      <div class="document-container" v-html="documentHTML"></div>
      <div class="button-container" v-if="hasToAccept">
        <div class="accept-button" @click="acceptButtonClicked" :style="'background-color:' + color">
          Accept <i>{{ title }}</i>
        </div>
      </div>
    </ion-content>

  </reco-modal>
</template>

<script>
import RecoModal from '@/components/complex/RecoModal.vue';

export default {
  name: 'RecoDocumentConsent',
  components: {
    RecoModal
  },
  props: {
    title: {
      type: String,
      default: "Contract"
    },
    documentHTML: {
      type: String
    },
    color: {
      type: String,
      default: "#ED1556"
    },
    hasToAccept: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      
    } 
  },
  watch: {
    
  },
}
</script>

<style scoped lang="css">
.document-container {
  padding:18px;
}

.button-container {
	width:100%;
	padding-left:20px;
	padding-right:20px;
	margin-top:10px;
}

.accept-button {
  width: 100%;
  color: #fff;
  line-height: 36px;
  font-size: 16px;
  border-radius: 10px;
  text-align: center;
  margin-bottom:15px;
}
</style>