<template>
    <div class="dash-unit col-lg-3" style="margin-top: 15px; margin-bottom: 15px">
        <div class="hpanel">
            <div class="panel-body text-center h-150">
                <i :class="icon" :style="styleIcon"></i>

                <h1 class="m-xs" :style="styleIcon">{{titleIcon}}</h1>

                <h3 v-if="title" class="no-margins jarch__dashboardunit-title" :style="styleTitle">
                    {{ title }}
                </h3>

                <label v-if="description" class="no-margins jarch__dashboardunit-description" :style="styleDescription">
                    {{ description }}
                </label>

            </div>
            <div class="panel-footer">
                <router-link v-if="link" :to="link">
                    <div class="panel-footer">
                        <span class="pull-left">{{ $t('label.accessPage') }}</span>
                        <span class="pull-right"><i class="fa fa-arrow-circle-right"></i></span>
                        <div class="clearfix"></div>
                    </div>
                </router-link>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: "DashUnity",
        components: {

        },
        props: {
            icon: { type: String, required: true },
            titleIcon: { type: String, required: false },
            styleIcon: { type: String, required: false, default: 'color: #6a6c6f'},
            title: { type: String, required: false },
            styleTitle: { type: String, required: false },
            description: { type: String, required: false },
            styleDescription: { type: String, required: false },

            descriptionLink: { type: String, required: false },
            labelButtonLink: { type: String, required: false },
            link: { type: String, required: false },
        },
        computed: {
            getBackgroundColor() {
                return 'background-color: ' + this.backgroundColor
            },
            getFontColor() {
                return 'color: ' + this.fontColor
            },
            getIconColor() {
                return 'color: ' + this.iconColor
            },
            getLinkColor() {
                return 'color: ' + this.linkColor
            },
        }
    }
</script>

<style scoped lang="scss">
    .dash-unit .hpanel {
        background: #fff;
        border: 1px solid #e4e5e7;
        border-radius: 2px;
        position: relative;
    }

    .dash-unit .panel-body {
        padding: 10px 15px;
        border-bottom: 1px solid transparent;
        border-top-left-radius: 3px;
        border-top-right-radius: 3px;
        color: #6a6c6f;
    }

    .dash-unit .panel-footer {
        color: inherit;
        border-top: none;
        font-size: 90%;
        background: #f7f9fa;
        padding: 5px 15px;
    }

    .dash-unit .col-xs-3 {
        width: 25%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .dash-unit .col-xs-9 {
        width: 75%;
        padding-right: 15px;
        padding-left: 15px;
    }

    .text-right {
        text-align: right;
    }

    .info {
        font-size: 1.5rem;
    }

</style>
