<template>
    <div class=" mt-5">
        <div class="mb-5">
            <div>
                <h2
                    class="text-gray-800 text-3xl text-center mt-3 mb-2 MvAamu"
                    style="font-weight: 100;"
                >
                    މަސްދަރުތައް
                </h2>
            </div>

            <div class="flex flex-wrap justify-center">
                <a
                    v-for="source in sources"
                    :key="source.id"
                    class="flex flex-col items-center shadow hover:shadow-lg mr-5 rounded p-10 mt-3"
                    :href="'/source/' + source.slug"
                >
                    <img
                        class="h-16 w-16"
                        :src="source.logo"
                        :alt="source.name"
                    />
                </a>
            </div>
        </div>
    </div>
</template>
<script>
export default {
    name: "available-sources",

    data() {
        return {
            sources: []
        };
    },

    mounted() {
        axios.get("/api/sources").then(response => {
            this.sources = response.data.data;
        });
    }
};
</script>
