<script type="text/x-template" id="stat-detail">
<div v-if="isLink" class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <a :href="detail.Link">
        <div class="info-box-4 hover-zoom-effect">
            <div class="icon">
                <i :class="detail.IconClass"></i>
            </div>
            <div class="content">
                <div class="text">
                    {{ detail.Label }} 
                </div>
                <div class="number">
                    {{detail.Value}}
                </div>
            </div>
        </div>
    </a>
</div>
<div v-else class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
    <div class="info-box-4 hover-zoom-effect">
        <div class="icon">
            <i :class="detail.IconClass"></i>
        </div>
        <div class="content">
            <div class="text">
                {{ detail.Label }} 
            </div>
            <div class="number">
                {{detail.Value}}
            </div>
        </div>
    </div>
</div>
</script>

<script>
    Vue.component('stat-detail', {
        props: ['detail'],
        template: '#stat-detail',
        computed: {
            isLink: {
                get: function () {
                    if (this.detail.Link == '')
                        return false;
                    else
                        return true;
                },
                set: function (newValue) {
                    //dummy statement
                }
            }
        }
    })

</script>

