{{#d-section pageClass="groups"}}
  <div class="groups-header">
    {{#if currentUser.admin}}
      {{d-button action=(action "new")
          class="btn-default groups-header-new pull-right"
          icon="plus"
          label="admin.groups.new.title"}}
    {{/if}}

    <div class="groups-header-filters">
      {{text-field value=filterInput
          placeholderKey="groups.index.all"
          class="groups-header-filters-name no-blur"}}

      {{combo-box value=type
                  content=types
                  clearable=true
                  allowAutoSelectFirst=false
                  noneLabel="groups.index.filter"
                  class="groups-header-filters-type"}}
    </div>
  </div>

  {{#if model}}
    {{#conditional-loading-spinner condition=model.loading}}
      {{#load-more selector=".groups-boxes .group-box" action=(action "loadMore")}}
        <div class='container'>
          <div class="groups-boxes">
            {{#each model as |group|}}
              {{#link-to "group.members" group.name class="group-box"}}
                <div class="group-box-inner">
                  <div class="group-info-wrapper">
                    {{#if group.flair_url}}
                      <span class='group-avatar-flair'>
                        {{avatar-flair
                          flairURL=group.flair_url
                          flairBgColor=group.flair_bg_color
                          flairColor=group.flair_color
                          groupName=group.name}}
                      </span>
                    {{/if}}

                    <span class="group-info">
                      {{groups-info group=group}}

                      <div class="group-user-count">{{d-icon "user"}}{{group.user_count}}</div>
                    </span>
                  </div>

                  <div class="group-description">{{{group.bio_excerpt}}}</div>

                  <div class="group-membership">
                    {{#group-membership-button tagName='' model=group showLogin=(route-action "showLogin")}}
                      {{#if group.is_group_owner}}
                      <span class="is-group-owner">
                        {{d-icon "shield"}}
                        {{i18n "groups.index.is_group_owner"}}
                      </span>
                      {{else if group.is_group_user}}
                      <span class="is-group-member">
                        {{d-icon "check"}}
                        {{i18n "groups.index.is_group_user"}}
                      </span>
                      {{else if group.public_admission}}
                        {{i18n 'groups.index.public'}}
                      {{else if group.isPrivate}}
                        {{d-icon "far-eye-slash"}}
                        {{i18n 'groups.index.private'}}
                      {{else}}
                        {{#if group.automatic}}
                          {{i18n 'groups.index.automatic'}}
                        {{else}}
                          {{d-icon "ban"}}
                          {{i18n 'groups.index.closed'}}
                        {{/if}}
                      {{/if}}
                    {{/group-membership-button}}
                  </div>
                </div>
              {{/link-to}}
            {{/each}}
          </div>
        </div>
      {{/load-more}}

      {{conditional-loading-spinner condition=model.loadingMore}}
    {{/conditional-loading-spinner}}
  {{else}}
    <p>{{i18n "groups.index.empty"}}</p>
  {{/if}}
{{/d-section}}