<template>

    <div :id="rowId" :class="rowClasses" :style="backgroundImageStyle">

        <div class="quote" :class="{'long-quote': properties['Quote'].value.length > 100}">
            <div class="container">

                <div v-if="properties['Quote'].value" class="top">
                    <div class="icon-container left">
                        <i class="far fa-quote-left"></i>
                    </div>
                    <div class="q">
                        {{properties['Quote'].value}}
                    </div>

                    <div v-if="!properties['Name / Source'].value && !properties['Reference'].value" class="icon-container right">
                        <i class="far fa-quote-right"></i>
                    </div>
                </div>

                <div v-if="properties['Name / Source'].value || properties['Reference'].value" class="bottom">
                    <span class="dash">&mdash; &nbsp;</span>
                    <span v-if="properties['Name / Source'].value && properties['Reference'].value" class="name">{{properties['Name / Source'].value}}, &nbsp;</span><span class="reference">{{properties['Reference'].value}}</span>
                    <span v-if="properties['Name / Source'].value && !properties['Reference'].value" class="name">{{properties['Name / Source'].value}}</span>
                    <span v-if="!properties['Name / Source'].value && properties['Reference'].value" class="reference">{{properties['Reference'].value}}</span>
                </div>
            </div>

        </div>
    </div>

</template>

<script>
    export default {
        name: "BuildableQuote",
        props: ['componentData', 'rowClasses', 'rowIndex', 'rowId', 'backgroundImageStyle'],
        data() {
            return JSON.parse(this.componentData);
        }
    }
</script>

<style scoped>

</style>