{% set groupsSectionTitles = {
	'joined': translate('Joined Groups'),
	'managed': translate('Managed Groups'),
	'invited': translate('Invites'),
} %}

<div id="mp-groups" class="sc-membership">
	<div class="ui grid">
		<div class="sixteen wide column">
			<div class="ui pointing secondary menu groups-tab-items">
				<a class="item active" data-tab="all">{{ translate('All groups') }}</a>
				{% for type, count in counts %}
					{% if count > 0 %}
						<a class="item" data-tab="{{ type }}">{{ groupsSectionTitles[type] }} <div class="ui mini label">{{ count }}</div></a>
					{% endif %}
				{% endfor %}

				{% if currentUserCan('can-create-groups') %}
					<div class="right menu">
						<div>
							<button class="ui button mini primary create-group-button">{{ translate('Create Group') }}</button>
						</div>
					</div>
				{% endif %}
			</div>

			<div class="groups-tabs">
				{% for section in ['all']|merge(counts|keys) %}
					<div class="ui tab {{' '}} {% if loop.first %}active{% endif %}" data-tab="{{ section }}">
						<div class="ui basic vertical segment form group-search-input">
							<select name="category" class="mbsGroupsSearchCategory">
								<option value="0">{{ translate('All categories') }}</option>
								{% if groupCategoryList|length %}
									{% for oneGcItem in groupCategoryList %}
										<option value="{{ oneGcItem['id'] }}">{{ oneGcItem['name'] }}</option>
									{% endfor %}
								{% endif %}
							</select>
							<div class="ui fluid icon input mbsGroupsSearchName">
								<input type="text" placeholder="{{ translate('Find group...') }}">
								<i class="search icon"></i>
							</div>
						</div>
						<div class="ui two cards stackable groups-list">
							{% if section == 'invited' %}
							   	{% embed '@groups/partials/groups-list.twig' with {'groups': groups[section]} %}
									{% block actionButtons %}
										{% if not isMemberOfGroup(group) %}
											<button class="ui mini primary button" data-action="accept-invitation">{{ translate('Accept') }}</button>
											<button class="ui mini primary button" data-action="decline-invitation">{{ translate('Decline') }}</button>
										{% else %}
											{% if canLeaveGroup(group) %}
												<button class="ui mini primary button" data-action="decline-invitation">{{ translate('Leave group') }}</button>
											{% endif %}
										{% endif %}
									{% endblock %}
								{% endembed %}
							{% else %}
								 {% include '@groups/partials/groups-list.twig' with {'groups': groups[section]} %}
							{% endif %}

						</div>
						<div class="ui basic vertical segment">
							<div class="ui message no-groups" {% if groups %}style="display:none"{% endif %}>
								<p>{{ translate('No groups to show.') }}</p>
							</div>
						</div>
						<div class="ui basic segment very padded list-loader" style="display:none;">
							<div class="ui active loader"></div>
						</div>
					</div>
				{% endfor %}
			</div>
		</div>
	</div>
</div>

{% include '@groups/partials/create-group-modal.twig' %}
{% if not userLoggedIn %}
	{% include '@auth/partials/login-modal.twig' %}
{% endif %}