<template>
    <div style="">
        <v-container grid-list-md>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>E-Mail Address</h1>
                    <v-simple-table>
                        <thead>
                        <tr>
                            <th class="text-left">Mail</th>
                            <th class="text-left">Status</th>
                            <th class="text-left">Primary</th>
                            <th class="text-left">Actions</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="mail in mails">
                            <td>{{ mail.mail }}</td>
                            <td>{{ mail.status }}</td>
                            <td>{{ mail.primary }}</td>
                            <td>-</td>
                        </tr>
                        </tbody>
                    </v-simple-table>


                </v-flex>


            </v-layout>
        </v-container>


    </div>

</template>

<script>
    import ServerService from '../services/Server'
    import UserService from '../services/User'
    import AppService from '../services/Apps'

    export default {
        data () {
            return {
                nameBig: '',
                nameSmall: '',
                mails: []
            }
        },
        methods: {
            'getMails': function () {
                UserService.getMails().then((res) => {
                   this.mails = res.data.data
                });
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            this.getMails();
        }
    }
</script>

<style>
    .header {
        background-image: url('~@/assets/manhattan-407703_1920.jpg');
        background-repeat: no-repeat;
        margin-top: -100px;
        height: 30vh;
        text-align: center;
    }
    .header h1{
        padding-top: 200px;
        font-size: 56px !important;
        font-weight: 400;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    .header h1 .small{
        font-weight: 300 !important;
    }
    .header h2{
        padding-top: 30px;
        font-size: 34px !important;
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h1{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
    h2{
        font-weight: 300;
        line-height: 32px !important;
        letter-spacing: normal !important;
    }
</style>
