﻿<template>
    <div class="uk-grid uk-grid-column-small uk-grid-row-small uk-child-width-1-1 uk-child-width-1-3@m" v-if="communities.length > 0" uk-grid uk-scrollspy="cls: uk-animation-scale-up; target: .uk-button; delay: 100;">
        <div v-for="community in communities">
            <a :href="$visitor.getHostName()+'/'+community.subdomain" class="uk-button uk-button-default uk-button-large uk-width-1-1">{{ community.title }}</a>
        </div>
    </div>
</template>

<script>
    Component(['$data/communities'], function (communities) {
        return {
            data: function () {
                return {
                    communities: []
                }
            },
            mounted: function () {
                var self = this;
                communities.all(function (d) {
                    d.forEach(function (item) {
                        item.communities.forEach(function (c) {
                            self.communities.push(c);
                        })
                    })
                })
            }
        }
    });
</script>