<template>
    <div style="">

        <v-container grid-list-md>
            <v-layout row wrap>
                <v-flex md12>
                    <h1>App {{ app.name }}</h1>
                    <v-card class="mx-auto" flat style="margin-top: 10px;">
                        <v-tabs
                                background-color="white"
                                color="fff"
                                left

                        >
                            <v-tab>Overview</v-tab>
                            <v-tab>API Access</v-tab>
                            <v-tab>Settings</v-tab>
                            <v-tab disabled>Users</v-tab>

                            <v-tab-item :key="1" :transition="false"  :reverse-transition="false" >
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <img :src="imageUrl" style="float: right;width: 100px;">
                                    <b>Description</b><br>
                                    {{ app.description }}<br><br>
                                    <a :href="app.url">{{ app.url }}</a>
                                </v-container>

                            </v-tab-item>
                            <v-tab-item :key="2" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <h2>oAuth Token</h2>
                                    <p>
                                        Here are the oAuth API-Keys. You use this Keys to start the oAuth authorization work flow.
                                    </p>
                                    <v-text-field
                                            label="API Key"
                                            :value="app.apiKey"
                                            hint="You can't edit this"
                                    ></v-text-field>
                                    <v-text-field
                                            label="API Secret"
                                            :value="app.apiSecret"
                                            hint="You can't edit this"
                                    ></v-text-field>
                                    <br>
                                    <h2>API Access</h2>
                                    <p>
                                        You can access the API to get informations about this APP with the following API Credentials:
                                        <v-text-field
                                                label="API Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                        <v-text-field
                                                label="Refresh Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                    <h2>Development Access</h2>
                                    <p>
                                        To test the App you can use the following Developer Access and Refresh token, they are connected to your user.
                                        <v-text-field
                                                label="Access Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                        <v-text-field
                                                label="Refresh Token"
                                                value=""
                                                disabled
                                        ></v-text-field>
                                    </p>
                                </v-container>
                            </v-tab-item>
                            <v-tab-item :key="3" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">
                                    <v-layout>
                                        <v-flex md8>
                                            <v-text-field
                                                    label="App Name"
                                                    :value="app.name"
                                            ></v-text-field>
                                            <v-text-field
                                                    label="URL"
                                                    :value="app.url"
                                            ></v-text-field>
                                            <v-textarea
                                                    label="Description"
                                                    :value="app.description"

                                            ></v-textarea>
                                            <v-text-field
                                                    label="Direct Login URL"
                                                    :value="app.directUrl"
                                                    hint="URL to login with this oAuth Provider"
                                            ></v-text-field>
                                            <v-checkbox
                                                    v-model="app.properties.testingWarning"
                                                    label="Testing Warning"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.untrustedWarning"
                                                    label="Untrusted Warning"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.autoAccept"
                                                    label="Auto Accept"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.showOnWebpage"
                                                    label="Show on Webpage"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.stopAutoRedirect"
                                                    label="Stop Auto Redirect"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.hideInAppList"
                                                    label="Hide in App List"
                                                    disabled
                                            ></v-checkbox>
                                            <v-checkbox
                                                    v-model="app.properties.userCantRemoveApp"
                                                    label="Disabled user possible to remove App-Access"
                                                    disabled
                                            ></v-checkbox>



                                        </v-flex>
                                        <v-flex md4>
                                            IMAGE
                                        </v-flex>
                                    </v-layout>
                                </v-container>
                            </v-tab-item>
                            <v-tab-item :key="4" :transition="false"  :reverse-transition="false">
                                <v-container style="padding-right: 0px; padding-left:0px;">

                                </v-container>
                            </v-tab-item>

                        </v-tabs>
                    </v-card>
                </v-flex>



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


    </div>

</template>

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

    export default {
        data () {
            return {
                app: null,
                imageUrl: ''
            }
        },
        components: {
            "Login": LoginComponent
        },
        methods: {

        },
        mounted: function() {
            AppService.getApp(this.$route.params.id).then((res) => {
                this.app = res.data.data;
            })
            this.imageUrl = AppService.getAppImage(this.$route.params.id);
        }
    }
</script>

<style>

</style>
