<template>
    <div>
        <div class="row text-left paper-row" style="background-color: white;">
            <div class="col-sm-12">
                <paper-status :status="paper.status"
                              :key="paper.id">
                </paper-status>
                <router-link :to="{ path: '/papers/paper', query: { id: paper.id }}" class="portfolio-link">
                    <span class="h6">{{ paper.title }}</span>
                </router-link>
            </div>
            <div class="col-sm-12 col">
            <span class="fa-stack fa-1x">
                <div>
                    <i class="fa fa-circle fa-stack-2x" style="color: white"></i>
                </div>
                <i class="fa fa-file-text-o fa-stack-1x fa-inverse"></i></span>
                <span class="text-muted">{{ getAuthors }}</span>
            </div>
        </div>
        <hr>
    </div>
</template>

<script>
    module.exports = {
        props: ['paper'],
        components: {
            "paper-status": httpVueLoaderEx("/papers/paper-status.vue")
        },
        computed: {
            getAuthors: function () {
                var authorsResult = [];
                this.paper.authors.forEach(function (author) {
                    authorsResult.push(author.lastName + " " + author.firstName);
                });
                return authorsResult.join(', ')
            }
        }
    }
</script>