q-page.q-py-md(:style-fn='pageStyle')
.text-header {{t('profile.groups')}}
.q-pa-md
.text-body2 {{ t('profile.groupsInfo') }}
q-list.q-mt-lg(
bordered
separator
)
q-item(
v-if='state.groups.length === 0 && state.loading < 1'
)
q-item-section
span.text-negative {{ t('profile.groupsNone') }}
q-item(
v-for='grp of state.groups'
:key='grp.id'
)
q-item-section(avatar)
q-avatar(
color='secondary'
text-color='white'
icon='las la-users'
rounded
)
q-item-section
strong {{grp.name}}
q-inner-loading(:showing='state.loading > 0')