<template>
    <div class="panel panel-default">
        <div class="panel-heading">
            <!--@lang('entry.title', ['name' => 'Some Mod 2.0', 'user' => 'Someuser'])-->
            {{ title }} {{ version }} by 
            <span v-for="(o, i) in owners">
                <a :href="'/profile/' + o.uid"><span :style="o.name_colour">{{ o.showname }}</span></a>
                <span v-if="i == owners.length - 2">
                    , and 
                </span>
                <span v-else-if="i == owners.length - 1">
                </span>
                <span v-else>
                    , 
                </span>
            </span>
        </div>

        <div class="panel-body">
            <div class="container">
                <div class="row">
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary btn-lg">
                            <!--@lang('entry.download')-->
                            Download
                        </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary">
                            <!--@lang('entry.update')-->
                            Update
                        </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-danger">
                            <!--@lang('entry.remove')-->
                            Remove/Restore
                        </button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" class="btn btn-warning">
                            <!--@lang('entry.report')-->
                            Report
                        </button>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-2">
                        <!--@lang('entry.views', ['count' => '1000'])-->
                        Views: {{ views }}
                    </div>
                    <div class="col-md-2">
                        <!--@lang('entry.downloads', ['count' => '1000'])-->
                        Downloads: {{ downloads }}
                    </div>
                    <div class="col-md-2">
                        <!--@lang('entry.submitted', ['datetime' => '1945/05/05'])-->
                        Submitted: {{ submit_date }}
                    </div>
                    <div v-if="last_date !== 0" class="col-md-2">
                        <!--@lang('entry.updated', ['datetime' => '2050/12/01'])-->
                        Updated: {{ last_date }}
                    </div>
                    <div class="col-md-2">
                        <!--@lang('entry.filesize', ['size' => '1 TB'])-->
                        Filesize: 1 TB
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import moment from 'moment';

    export default {
        name: 'entry-title',
        props: ['fid'],
        data: function () {
            return {
                owners: [],
                id: this.fid,
                uid: 0,
                title: '',
                version: '',
                username: '',
                avatar: '',
                gender: '',
                perm_id: '',
                display_name: '',
                name_colour: '',
                views: 0,
                downloads: 0,
                submit_date: 0,
                last_date: 0,
                showName: '',
                showCol: '',
                groupCol: [],
            }
        },
        created: function () {
            axios.get('/api/rpc/user/getgroupcolours').then(res => {
                res.data.forEach(cb => {
                    this.groupCol.push({
                        'id': cb.id,
                        'name': cb.name,
                        'male': cb.colour_m,
                        'female': cb.colour_f,
                        'unknown': cb.colour_u,
                    });
                });
            })
            axios.get('/api/rpc/file/getfiletitle/' + this.id).then(data => {
                this.uid = data.data[0].user_id;
                this.title = data.data[0].title;
                this.version = data.data[0].version;
                this.views = data.data[0].views;
                this.downloads = data.data[0].downloads;
                this.submit_date = moment.unix(data.data[0].submit_date).format("YYYY/MM/DD");
                if (data.data[0].last_date !== 0) {
                    this.last_date = moment.unix(data.data[0].last_date).format("YYYY/MM/DD");
                }

                data.data.forEach(cb => {
                    if (cb.display_name !== '') {
                        this.showName = cb.display_name;
                    }
                    else {
                        this.showName = cb.username;
                    }

                    if (cb.name_colour !== '') {
                        this.showCol = cb.name_colour;
                    }
                    else {
                        this.groupCol.forEach(re => {
                            if (re.id === cb.perm_id) {
                                if (cb.gender === 1) {
                                    this.showCol = re.male;
                                }
                                else if (cb.gender === 2) {
                                    this.showCol = re.female;
                                }
                                else {
                                    this.showCol = re.unknown;
                                }
                            }
                        });
                    }

                    this.owners.push({
                        'uid': cb.user_id,
                        'showname': this.showName,
                        'username': cb.username,
                        'display_name': cb.display_name,
                        'avatar': cb.avatar,
                        'gender': cb.gender,
                        'name_colour': this.showCol,
                    });
                });
                this.username = data.data[0].username;
                this.display_name = data.data[0].display_name;
                this.gender = data.data[0].gender;
                this.avatar = data.data[0].avatar;
                this.name_colour = data.data[0].name_colour;
            });
        }
    }
</script>

<style>
    .col {
        text-align: center;
    }
</style>