{{#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">
      {{input
        value=(readonly filter)
        placeholderKey="groups.index.all"
        class="groups-header-filters-name no-blur"
        input=(action "onFilterChanged" value="target.value")
      }}

      {{combo-box
        value=type
        content=types
        class="groups-header-filters-type"
        onChange=(action (mut type))
        options=(hash
          clearable=true
          none="groups.index.filter"
        )
      }}
    </div>
  </div>

  {{#if groups}}
    {{#conditional-loading-spinner condition=isLoading}}
      {{#load-more selector=".groups-boxes .group-box" action=(action "loadMore")}}
        <div class="container">
          <div class="groups-boxes">
            {{#each groups 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">{{html-safe 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-alt"}}
                          {{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=groups.loadingMore}}
    {{/conditional-loading-spinner}}
  {{else}}
    <p>{{i18n "groups.index.empty"}}</p>
  {{/if}}
{{/d-section}}
