<span>
  <PluginOutlet
    @name="before-group-container"
    @connectorTagName="div"
    @outletArgs={{hash group=this.model}}
  />
</span>

<div class="container group group-{{this.model.name}}">
  {{#if this.showTooltip}}
    <div class="group-delete-tooltip">
      <p>{{i18n "admin.groups.delete_automatic_group"}}</p>
    </div>
  {{/if}}

  <div class="group-details-container">
    <div class="group-info">
      {{#if
        (or
          this.model.flair_icon this.model.flair_url this.model.flair_bg_color
        )
      }}
        <div class="group-avatar-flair">
          <AvatarFlair
            @flairName={{this.model.name}}
            @flairUrl={{or this.model.flair_icon this.model.flair_url}}
            @flairBgColor={{this.model.flair_bg_color}}
            @flairColor={{this.model.flair_color}}
          />
        </div>
      {{/if}}

      <div class="group-info-names">
        <span class="group-info-name">{{this.groupName}}</span>

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

      <div class="group-details-button">
        <GroupMembershipButton
          @tagName=""
          @model={{this.model}}
          @showLogin={{route-action "showLogin"}}
        />

        {{#if this.currentUser.admin}}
          {{#if this.model.automatic}}
            <DButton
              @action={{action "toggleDeleteTooltip"}}
              @class="btn-default"
              @icon="question-circle"
              @label="admin.groups.delete"
            />
          {{else}}
            <DButton
              @action={{action "destroyGroup"}}
              @disabled={{this.destroying}}
              @icon="trash-alt"
              @class="btn-danger"
              @label="admin.groups.delete"
            />
          {{/if}}
        {{/if}}

        {{#if this.displayGroupMessageButton}}
          <DButton
            @action={{action "messageGroup"}}
            @class="btn-primary group-message-button"
            @icon="envelope"
            @label="groups.message"
          />
        {{/if}}
      </div>

      <span>
        <PluginOutlet
          @name="group-details-after"
          @connectorTagName="div"
          @outletArgs={{hash model=this.model}}
        />
      </span>
    </div>

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

      <div class="group-bio">
        <p>{{html-safe this.model.bio_cooked}}</p>
      </div>
    {{/if}}
  </div>

  <div class="user-content-wrapper">
    <section class="user-primary-navigation">
      <div class="container">
        <GroupNavigation
          @group={{this.model}}
          @currentPath={{this.currentPath}}
          @tabs={{this.tabs}}
        />
      </div>
    </section>

    {{outlet}}
  </div>
</div>