<template>
    <v-card
        tile
        flat
        :outlined="Contactpage.outlined"
        :height="Contactpage.height"
        :width="Contactpage.width"
        :color="Contactpage.color"
        class="mx-auto d-flex align-center"
    >

        <v-card
            v-for="(card, index) in cards"
            :key="'card-' + index"
            width="33.33%"
            :height="0.4 * Contactpage.height"
            class="mx-2 bg-dark-blue white--text"
        >
            <v-card-title>
                {{ __(card.title) }}
            </v-card-title>

            <v-card-text class="mt-1">
                <v-img
                    :src="$url + 'imgs/layout/' + card.icon + '.png'"
                    :width="62"
                    :height="57"
                    contain
                    class="mx-auto"
                >
                </v-img>
            </v-card-text>

            <v-card-text class="white--text text-center mt-3">
                {{app.config.sysconfig[card.code]}}
            </v-card-text>

        </v-card>

    </v-card>

</template>


<script>
    export default {

        props: {
            app: {required: true},
        },

        data: () => ({

            cards: [
                {
                    title: 'Adresa',
                    icon: 'adress',
                    code: 'adresa',
                },
                {
                    title: 'Telefon',
                    icon: 'phone',
                    code: 'telefon-fix',
                },
                {
                    title: 'Email',
                    icon: 'email',
                    code: 'email-office',
                },
            ],
        }),

        computed: {
            Contactpage() {
                return this.app.classes.Contactpage;
            }
        },

        components: {
			
		},

        name: 'ContactPage',
    }
</script>