<template>
    <v-container>
        <v-row class="reverse">
            <v-col xl="8" lg="8" offset-xl="2" offset-lg="2" class="fade-in fast delay-01">
                <big-section-title title_fa="سیستم مدیریت یک پارچه" title_en="Integrated Management System" desc="هر آنچه مربوط به مدیریت مجموعه ی شما می باشد." />
            </v-col>
        </v-row>
        <v-row>
            <a
                :href="module.href"
                :class="'flex fade-in fast ' + module.main_class"
                v-for="( module ,key ) in getModules"
                :key="key"
                :style="`animation-delay: ${key * 0.1}s;`"
            >

                <icon-tile
                    :theme="module.title_class +' Shadowed'"
                    :TitleEn="module.title_en"
                    :TitleFa="module.title_fa"
                    :GradientBegin="module.gradient_begin"
                    :GradientEnd="module.gradient_end"
                    :icon="module.img_url"
                    :height="module.img_height"
                    :Desc="module.description"
                />
            </a>
        </v-row>
        <router-link v-if="getAuthUser.is_owner == 'true' || hostname == originHostName" :to="{name: 'AddModule'}">
            <v-btn large fab color="cyan" fixed bottom left dark style="left:5%">
                <v-icon dark>WMi-plus</v-icon>
            </v-btn>
        </router-link>
    </v-container>
</template>



<script>
import Tile from "@Global/components/Tiles/Tile";
import IconTile from '@Global/components/Tiles/Icon-Tile';
import { mapGetters, mapActions } from "vuex";
import routes from '@Global/utils/common/routes';
import BigSectionTitle from '@Global/components/Dividers/Section-Title-Big';


export default {
    data: () => ({
        hostname : window.location.hostname,
        originHostName : routes.originHostName()
    }),
    components: {
        IconTile,
        BigSectionTitle
    },
    computed: {
        ...mapGetters("rolePermission", ["getModules"]),
        ...mapGetters("auth", ["getAuthUser"]),
    },
    methods: {
        ...mapActions("rolePermission", ["loadModules"]),
    },
    created() {
        this.loadModules({ home_page: true });
    }
};
</script>

<style scoped lang="scss">
    .container {
        max-width: 1785px;
    }
</style>
