<template>
    <div style="">
        <v-container grid-list-md pa-10>
            <v-layout row wrap>
                <v-flex md12>
                    <v-btn color="success" style="float:right;" @click="$router.push({name: 'newApp'})">Add App</v-btn>
                    <h1>Apps</h1>
                    <br><br>
                    <p>Here you can Administrate your apps</p>
                </v-flex>
            </v-layout>
            <v-layout row wrap>
                <v-flex md4 xs12 text-xs-center v-for="(item, index) in apps">
                <v-card>
                    <v-layout>
                        <v-flex xs5>
                            <v-img
                                    :src="getImageUrl(item.id)"
                                    height="125px"
                                    contain
                            ></v-img>
                        </v-flex>
                        <v-flex xs7>
                            <v-card-title primary-title>
                                <div>
                                    <div class="headline">{{ item.name }}</div>
                                    <div>{{ item.description }}</div>
                                </div>
                            </v-card-title>
                        </v-flex>
                    </v-layout>
                    <v-divider light></v-divider>
                    <v-card-actions class="pa-3">

                        <v-spacer></v-spacer>
                        <v-btn icon>
                            <v-icon @click="$router.push({name: 'appDetails', params: {id: item.id}})">settings</v-icon>
                        </v-btn>
                    </v-card-actions>
                </v-card>
            </v-flex>
            </v-layout>
        </v-container>


    </div>

</template>

<script>
    import AppService from '../services/Apps'
    export default {
        data () {
            return {
                apps: []
            }
        },
        methods: {
            getImageUrl: function(id) {
                return AppService.getAppImage(id); // "https://account.keks.cloud/gui/apps/"+id+"/icon";
            }
        },
        mounted: function() {
            AppService.listApps().then((res) => {
               this.apps = res.data.data;
               console.log(this.apps);
            });
        }
    }
</script>

