<template>

    <div v-if="isLoading" class="circle">
        <i class="fa fa-spinner fa-spin fa-3x fa-fw"></i>
        <span class="sr-only">Loading …</span>
    </div>
    <div v-else class="container-fluid">
        <div class="row">
            <h2 class="mt-2">This is an overview of my current public (and open source) projects.</h2>
            <!-- projects List -->
            <div class="col-sm-12">
                <b-col v-for="project in projects" :key="project.id">
                    <div class="project-container bg-dark my-4">
                        <div class="row">
                            <div class="col-sm-3">
                                <b-link :to="'/projects/' + project.name">
                                    <img v-if="project.teaserImage"
                                         class="blog-img"
                                         :src="'/uploads/projects/' + project.teaserImage"
                                         alt="Teaser">
                                    <img v-else
                                         class="blog-img"
                                         src="/build/images/24unix/24_logo_bg_96x96.png"
                                         alt="Teaser">
                                </b-link>
                                <br>
                                <div>
                                    <b-col v-for="developer in project.developer" :key="developer">
                                        <author :author-iri="developer"></author>
                                    </b-col>
                                </div>

                            </div>
                            <div class="col-sm-8 mt-2">
                                <b-link to="project.name">
                                    <div class="article-title d-inline-block pl-3 align-middle">
                                        <h2 v-html="project.name"></h2>
                                    </div>
                                </b-link>
                                <br>
                                <div class="blog-teaser mb-2 pb-2 text-xl-start">
                                    <span v-html="project.description"></span>
                                    <br>
                                    <br>
                                    started: <span v-html="project.createdAt"></span>
                                </div>
                            </div>
                        </div>

                    </div>

                </b-col>
            </div>
            <div class="text-xl-start">
                <b-link to="/add"><i class="fa fa-plus-circle"></i></b-link>
            </div>
        </div>
    </div>
</template>

<script>

import axios from "axios";

import Author from "@/components/Author";

export default {
    name: "ProjectsList",
    data: () => ({
        projects: null,
        isLoading: true
    }),
    mounted() {
        this.getProjects();
    },
    components: {
        Author
    },
    methods: {
        getProjects() {
            axios
                .get("/api/projects")
                .then(response => (this.projects = response.data["hydra:member"]));
            this.isLoading = false;
            console.log(this.projects);
        }
    }
};
</script>