router-link.card-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
.card
.card-body
.row
.col-md-2.badge-column
.shield-wrap(:class="{gold: guild.memberCount >= 1000, silver: guild.memberCount >= 100 && guild.memberCount < 1000}")
.svg-icon.shield(v-html="icons.goldGuildBadge", v-if='guild.memberCount >= 1000')
.svg-icon.shield(v-html="icons.silverGuildBadgeIcon", v-if='guild.memberCount >= 100 && guild.memberCount < 1000')
.svg-icon.shield(v-html="icons.bronzeGuildBadgeIcon", v-if='guild.memberCount < 100')
.member-count {{ guild.memberCount | abbrNum }}
.col-md-10
.row
.col-md-8
router-link(:to="{ name: 'guild', params: { groupId: guild._id } }")
h3 {{ guild.name }}
p.summary(v-if='guild.summary') {{guild.summary.substr(0, MAX_SUMMARY_SIZE_FOR_GUILDS)}}
p.summary(v-else) {{ guild.name }}
.col-md-2.cta-container
button.btn.btn-danger(v-if='isMember && displayLeave' @click.prevent='leave()', v-once) {{ $t('leave') }}
button.btn.btn-success(v-if='!isMember' @click='join()', v-once) {{ $t('join') }}
div.item-with-icon.gem-bank(v-if='displayGemBank')
.svg-icon.gem(v-html="icons.gem")
span.count {{ guild.balance * 4 }}
div.guild-bank(v-if='displayGemBank', v-once) {{$t('guildBank')}}
.row
.col-md-12
.category-label(v-for="category in guild.categorySlugs")
| {{$t(category)}}
span.recommend-text(v-if='showSuggested(guild._id)') Suggested because you’re new to Habitica.