<template>
    <div style="margin-top:50px;">
        <v-container grid-list-md pa-10 >
            <v-layout row wrap>
                <v-flex md12>
                    <h1>App Access</h1>
                    <br>
                    <p>The following Apps have Access to your Account, if you revoke the Access the app will get a notifcation about it an may will delete your data.</p>

                    <v-simple-table>
                        <template v-slot:default>
                            <thead>
                            <tr>
                                <th></th>
                                <th class="text-left">Name</th>
                                <th class="text-left"></th>

                                <th class="text-left">Description</th>
                                <th class="text-left">Created at</th>

                                <th class="text-right" style="max-width: 200px;">Actions</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr v-for="item in access" :key="item.name">
                                <td style="width:30px;">
                                    <img :src="getImageUrl(item.app.id)" style="max-width: 30px;">
                                </td>
                                <td>{{ item.app.name }}</td>
                                <td>
                                    <v-tooltip v-if="item.app.properties.untrustedWarning" bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-icon v-on="on">warning</v-icon>
                                        </template>
                                        <span>App is untrusted!</span>
                                    </v-tooltip>
                                    <v-tooltip v-if="item.app.properties.testingWarning" bottom>
                                        <template v-slot:activator="{ on }">
                                            <v-icon v-on="on">warning</v-icon>
                                        </template>
                                        <span>App is in testing modus!</span>
                                    </v-tooltip>
                                </td>

                                <td>{{ item.app.description }}</td>
                                <td>{{ item.created }}</td>

                                <td class="text-right">
                                    <v-btn target="_blank" :href="item.app.url" depressed x-small :disabled="!item.app.url" color="primary" style="margin-right: 10px;">Go to Webpage</v-btn>
                                    <v-btn target="_blank" :href="item.app.directUrl" depressed x-small :disabled="!item.app.directUrl" color="primary" style="margin-right: 10px;">Login to</v-btn>
                                    <v-btn @click="removeAppAccess(item.id)" depressed x-small :disabled="item.app.properties.userCantRemoveApp" color="error">Remove Access</v-btn>
                                </td>
                            </tr>
                            </tbody>
                        </template>
                    </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'
    import LoginComponent from '../components/Login'

    export default {
        data () {
            return {
                access: []
            }
        },
        components: {
            "Login": LoginComponent
        },
        methods: {
            'getImageUrl' : function (id) {
                return AppService.getAppImage(id);
            },
            removeAppAccess: function(accessId) {
                AppService.removeAccess(accessId).then((res) => {
                    AppService.getAccessList().then((res) => {
                        this.access = res.data.data
                    });
                });
            }
        },
        mounted: function() {
            this.nameBig = this.$store.getters.getSettingValue("name_big");
            this.nameSmall = this.$store.getters.getSettingValue("name_small");
            AppService.getAccessList().then((res) => {
               this.access = res.data.data
            });
        }
    }
</script>

<style>
    .bg {
        background-image: url('~@/assets/texture-1485529_1920.jpg');
    }
    .header2 {
        background-image: url('~@/assets/texture-1485529_1920.jpg');
        background-repeat: no-repeat;
        margin-top: -100px;
        height: 50vh;
        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>
