<div class="content cn-content js-cn-content">
  <div class="pos-relative theme--dark">
    {{twitch-communities/cover-image
      name=communities.communityInfo.name
      isEditing=communities.isEditing
      showBalloon=bannerShowBalloon
      openInModal=(route-action 'openInModal')
      closeModal=(route-action 'closeModal')
    }}
    <div class="pos-absolute bottom-0 left-0 right-0 mg-3">
      <div class="flex flex--nowrap flex--verticalEnd">
        <div class="flex__item flex__item--noShrink mg-r-2 z z--clouds">
          {{twitch-communities/avatar
            name=communities.communityInfo.name
            isEditing=communities.isEditing
            showBalloon=avatarShowBalloon
            openInModal=(route-action 'openInModal')
            closeModal=(route-action 'closeModal')
          }}
        </div>
        <div class="flex__item flex__item--grow mg-r-2 theme--dark">
          {{#link-to "directory.communities" class="cm-breadcrumb"}}
            {{i18n 'Communities'}}
          {{/link-to}}
          <h3 class="mg-b-0 pd-t-0 cl-white">{{communities.communityInfo.name}}</h3>
        </div>

        <div class="flex__item flex__item--noGrow flex__item--noShrink z z--clouds">
          {{#if communities.permissions.ban}}
            {{#if (not communities.isEditing)}}
              {{twitch-communities/moderation-button
                isEditingMods=isEditingMods
                class='mg-l-1 float-left'
                setModerationMode=(action 'setModerationMode')
              }}
            {{/if}}
          {{/if}}
          {{#if communities.permissions.edit}}
            {{#if (not isEditingMods)}}
              {{#if communities.isEditing}}
                <button class="button button--icon mg-l-1 float-left" onclick={{action 'toggleEditingMode' false}}>
                  {{svg-icon path='svg/followcheck'}}
                  <span>{{i18n 'Done'}}</span>
                </button>
              {{else}}
                <button class="button button--text button--icon mg-l-1 float-left" onclick={{action 'toggleEditingMode' true}}>
                  {{svg-icon path='svg/edit'}}
                  <span>{{i18n 'Edit'}}</span>
                </button>
              {{/if}}
            {{/if}}
          {{/if}}
          {{#if (and (not communities.isEditing) (not isEditingMods))}}
            <div class="balloon-wrapper mg-l-1 float-left">
              {{#common/button-element iconOnly=true onClick=(action 'toggleActions')}}
                {{svg-icon path='svg/gear'}}
              {{/common/button-element}}
              <div class="balloon balloon--right balloon--down balloon--dropmenu {{if showActions 'show' 'hide'}}">
                <ul class="balloon__list">
                  <li>
                    <a class="balloon__link" href="#" onclick={{action 'openReportModal'}}>
                      {{i18n 'Report'}}
                    </a>
                  </li>
                  {{#if (or session.userData.is_staff session.userData.is_admin)}}
                    <li>
                      <a class="balloon__link" href="#" onclick={{action 'openBanModal'}}>
                        {{i18n 'Ban'}}
                      </a>
                    </li>
                  {{/if}}
                </ul>
              </div>
            </div>
          {{/if}}
        </div>
      </div>
    </div>
  </div>

  <div class="pd-3 full-height">
    {{yield}}
  </div>
</div>
