{{plugin-outlet name="before-group-container" args=(hash group=model)}}

<div class="container group {{model.name}}">
  <div class='group-details-container'>
    <div class='group-info'>
      {{#if model.flair_url}}
        <span class='group-avatar-flair'>
          {{avatar-flair
            flairURL=model.flair_url
            flairBgColor=model.flair_bg_color
            flairColor=model.flair_color
            groupName=model.name}}
        </span>
      {{/if}}

      <span>
        <span class='group-info-name'>{{groupName}}</span>

        <div>
          {{#if model.full_name}}<span class='group-info-full-name'>{{model.name}}</span>{{/if}}
        </div>
      </span>
    </div>

    {{#if model.bio_cooked}}
      <hr>

      <div class='group-bio'>
        <p>{{{model.bio_cooked}}}</p>
      </div>
    {{/if}}
  </div>

  <div class="list-controls">
    <div class="container">
      {{group-navigation group=model currentPath=application.currentPath tabs=tabs}}

      {{#if displayGroupMessageButton}}
        {{d-button
            action="messageGroup"
            class="btn-primary group-message-button"
            icon="envelope"
            label="groups.message"}}
      {{/if}}

      {{group-membership-button model=model showLogin='showLogin'}}
    </div>
  </div>

  <div class='group-outlet'>
    {{outlet}}
  </div>
</div>