<template>
    <div>
        <template>
            <v-simple-table>
                <thead>
                <tr>
                    <th class="text-left" style="width:30px;">Icon</th>
                    <th class="text-left">Name</th>
                    <th class="text-left">Description</th>
                </tr>
                </thead>
                <tbody>
                    <tr v-for="app in apps" :key="app.name" @click="$emit('appClick', app)" style="cursor: pointer;">
                        <td style="width:30px;">
                            <img :src="getImageUrl(app.id)" style="max-width: 30px;">
                        </td>
                        <td>{{ app.name }}</td>
                        <td>{{ app.description }}</td>
                    </tr>
                </tbody>
            </v-simple-table>
        </template>
    </div>
</template>

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

    export default {
        props: [
            'apps'
        ],
        methods: {
            'getImageUrl' : function (id) {
                return AppService.getAppImage(id);
            },
        }
    }
</script>
