<template>
  <section
    v-loading="isLoading"
    class="terms-container"
    :class="{ 'has-error' : hasError }"
  >
    <ElAlert
      v-if="hasError"
      :closable="false"
      title="There was a problem retrieving the terms of use."
      type="error"
    />
    <!-- eslint-disable vue/no-v-html -->
    <span
      v-else
      v-html="termsOfUseContent"
    />
    <!-- eslint-enable vue/no-v-html -->
  </section>
</template>

<script>
  import axios from 'axios';

  /**
   * Terms of Use
   *
   * @vuedoc
   * @exports AppTermsOfUse
   * @category Components
   */
  export default {
    name: 'AppTermsOfUse',
    props: {
      termsId: {
        type: String,
        default: '11825817',
      },
    },
    data: () => ({
      hasError: false,
      isLoading: true,
      termsOfUseContent: '',
    }),
    // On create we hit the iubenda api and grab the terms from there.
    // We can pass in an id incase we need different calls for different sites.
    created() {
      axios.get(`https://www.iubenda.com/api/terms-and-conditions/${this.termsId}`)
        .then((response) => {
          this.termsOfUseContent = response.data.content;
          this.isLoading = false;
        })
        .catch(() => {
          this.isLoading = false;
          this.hasError = true;
        });
    },
  };
</script>

<style lang="scss" scoped>
  .terms-container {
    width: 100%;
    max-width: 725px;
    padding: 30px 20px;

    &.has-error {
      max-width: none;
    }
  }
</style>
