<template>
    <v-container fluid>
        <v-row v-for="(module, index) in modules" :key="index" :class="`module-item section-bordered theme-${module.color} ma-0 mb-2`">
            <v-col :xl="(type == 'purchased') ? '9' : '6'" class="flex-justified-right">
                <v-icon class="ml-2 text--32" :color="module.color">WMi-{{ module.icon }}</v-icon>
                <name-block class="ltr-3 en-mt-3" :name_fa="module.title_fa" :name_en="module.title_en" />
            </v-col>
            <v-col v-if="(type != 'purchased' && module.remain_days)"  xl="4" class="flex-justified-space-between">
                <price-block :price="module.price" :original_price="((module.old_price) ? module.old_price : '')" label="تومان - خرید یک باره" />
                <div :class="`En Bold text--32 ml-2 ${module.color}--text `"> OR </div>
                <price-block class="bg-light-gray" :price="module.monthly_price" :original_price="((module.old_monthly_price) ? module.old_monthly_price : '')" label="تومان - ماهانه" />
            </v-col>
            <v-col v-else-if="(type == 'purchased' || module.remain_days)" xl="3" class="flex-justified-left">
                <number-block :class="`lg label-left theme-${(module.remain_days < 100) ? 'red' : 'cyan'}`" label="روز  باقی <br> مــــــــــانده" :number="module.remain_days"/>
            </v-col>

            <v-col xl="2" v-if="(type != 'purchased' && !module.remain_days)" class="flex-justified-left">
                <v-tooltip top transition="fade-transition" color="black">
                    <template v-slot:activator="{ on }">
                        <v-btn v-on="on" small dark fab slot="activator" :color="$_color('black')" @click.native="$store.state.TrialConfirmation = true">
                            <v-icon dark>WMi-clock</v-icon>
                        </v-btn>
                    </template>
                    <span>فعالسازی نسخه ی 15 روزه، آزمایشی</span>
                </v-tooltip>
                <v-tooltip top transition="fade-transition" color="black">
                    <template v-slot:activator="{ on }">
                        <v-btn v-on="on" small dark fab slot="activator" :color="module.color" @click.native="$store.state.PaymentConfirmation = true">
                            <v-icon dark>WMi-plus</v-icon>
                        </v-btn>
                    </template>
                    <span> افزودن به سیستم </span>
                </v-tooltip>
            </v-col>
        </v-row>


        <!-- --------------------------------------------------------------------
                                    Modals :: BEGIN
        ---------------------------------------------------------------------->
        <template>
            <div class="text-xs-center">
                <payment-confirmation />
                <trial-confirmation />
            </div>
        </template>

        <!-- --------------------------------------------------------------------
                                    Modals :: END
        ---------------------------------------------------------------------->
    </v-container>
</template>
<script>
    import PaymentConfirmation from "@Home/components/Modules/PaymentConfirmation";
    import TrialConfirmation from "@Home/components/Modules/TrialConfirmation";

    export default {
        components: {
            PaymentConfirmation,
            TrialConfirmation,
        },
        props: {
            modules: {default: []},
            type: {default: ''},
        },
        data() {},

    };
</script>

<style scoped lang="scss">
    .module-item {
        position: relative;
        padding: 2px 10px;
        margin-bottom: 10px;
    }
</style>
