hummingbird-me/kitsu-web

{{! Cover Overlay }}
{{! @TODO(Groups): Componentize }}
<div class="user-cover group-cover no-edit">
  <div class="cover-photo" style={{coverImageStyle}}>
    <div class="container">
      <div class="row">
        <div class="cover-user-info">
          <div class="primary-info">
            <div class="cover-avatar avatar">
              {{lazy-image src=(image group.avatar "large") class="avatar-image avatar-image--large"}}
            </div>
            <div class="mini-bio">
              <h3 class="cover-username">
                {{group.name}}
                {{#if group.nsfw}}
                  <span class="tag tag-default">{{t "groups.nsfw"}}</span>
                {{/if}}
              </h3>
              <div class="cover-cta">
                {{! Join/Leave Button }}
                {{groups/member-button group=group membership=membership}}

                {{! Dashboard Button }}
                {{#if (can "view dashboard for group" membership=membership)}}
                  {{#link-to "groups.group.dashboard.index" tagName="button" class="button button--primary"}}
                    <span class="button-label">{{t "groups.dashboard-btn"}}</span>
                  {{/link-to}}
                {{/if}}

                {{! Group Actions }}
                {{#if membership}}
                  {{groups/group-actions group=group membership=membership}}
                {{/if}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="dark-cover-overlay"></div>
  </div>
</div>

{{! Navigation }}
{{! @TODO(Groups): Componentize }}
<nav class="cover-nav navbar navbar-light">
  <div class="container">
    <div class="row">
      <div class="nav navbar-nav">
        {{link-to (t "groups.navigation.activity") "groups.group.group-page.index" class="nav-item nav-link"}}
        {{link-to (t "groups.navigation.rules") "groups.group.group-page.rules" class="nav-item nav-link"}}
        {{#link-to "groups.group.group-page.members" class="nav-item nav-link"}}
          {{t "groups.navigation.members"}}
          <span class="tag tag-default">
            {{format-number group.membersCount fallback="0"}}
          </span>
        {{/link-to}}
        {{#link-to "groups.group.group-page.leaders" class="nav-item nav-link"}}
          {{t "groups.navigation.leaders"}}
          <span class="tag tag-default">
            {{format-number group.leadersCount fallback="0"}}
          </span>
        {{/link-to}}
      </div>
    </div>
  </div>
</nav>

{{outlet}}