habitica-self-host/views/options/groups/group.jade

a.pull-right.gem-wallet(popover-trigger='mouseenter', popover-title='Guild Bank', popover='Gems which your Guild leader can use for prizes in the upcoming Challenges feature.', popover-placement='left', popover-html='true')
  // <span class="task-action-btn tile flush bright add-gems-btn">＋</span>
  span.task-action-btn.tile.flush.neutral
    .Gems
    | {{group.balance * 4 | number:0 }} Guild Gems
.row-fluid
  .span4

    // ------ Information -------
    .modal(style='position: relative;top: auto;left: auto;right: auto;margin: 0 auto 20px;z-index: 1;max-width: 100%;')
      .modal-header
        span(ng-if='group.leader == user.id')
          button.btn.btn-primary.pull-right(ng-click='save(group)', ng-show='group._editing') Save
          button.btn.btn-default.pull-right(ng-click='group._editing = true', ng-hide='group._editing') Edit Group
        h3 {{group.name}}
      .modal-body
        div.whatever-options(ng-show='group._editing')
          .control-group.option-large
            label.control-label Group Name
            input.option-content(type='text', ng-model='group.name', placeholder='Group Name')
          .control-group.option-large
            label.control-label Description
            textarea.option-content(style='height:15em;', placeholder='Description', ng-model='group.description')
            include ../../shared/formatting-help
          .control-group.option-large
            label.control-label Logo URL
            input.option-content(type='url', placeholder='Logo URL', ng-model='group.logo')
          .control-group.option-large
            form.form-inline(x-bind='submit:groupAddWebsite', ng-submit='notPorted()')
              input.option-content(type='url', placeholder='Website', value='{{_newGroupWebsite}}')
              input.btn(type='submit', value='Add')

          h4 Assign Group Leader
          select#group-leader-selection
            option(ng-repeat='member in group.members', selected='member._id == _new.groupLeader') {{username(member.auth,member.profile.name)}}
          button(x-bind='click:assignGroupLeader', ng-click='notPorted()') Assign

          div(ng-show='group.websites')
            h4 Resources
            ul.unstyled
              li
                a(ng-repeat='website in group.websites', x-bind='click:removeAt', ng-click='notPorted()')
                  i.icon-trash
                a(target='_blank', href='{{website}}') {{website}}

        div(ng-show='!group._editing')
          img.pull-right(ng-show='group.logo', style='max-width:150px', ng-src='{{group.logo}}')
          markdown(ng-model='group.description')
          div(ng-show='group.websites')
            h4 Websites
            ul.unstyled
              li(ng-repeat='website in group.websites')
                a(target='_blank', ng-href='{{website}}') {{website}}

    // ------ Information -------
    .modal(style='position: relative;top: auto;left: auto;right: auto;margin: 0 auto 20px;z-index: 1;max-width: 100%;')
      .modal-header
        h3 Members
      .modal-body
        table.table.table-striped
          tr(ng-repeat='member in group.members')
            td
              // allow leaders to ban members
              div(ng-show='group.leader == user.id && user.id!=member._id')
                // {{#with group.members[$index]}}
                a(ng-click='removeMember(group, member)')
                  i.icon-ban-circle(tooltip='Boot Member')
                // {{/}}
              a(data-toggle='modal', data-target='#avatar-modal-{{member._id}}')
                span(ng-class='{"badge badge-info": group.leader==member._id}', ng-click='clickMember(member._id, true)')
                  | {{username(member.auth, member.profile.name)}}
            td ({{member._id}})
      .modal-footer.whatever-options
        form.form-inline(ng-submit='invite(group, invitee)')
          //.alert.alert-danger(ng-show='_groupError') {{_groupError}}
          .control-group.option-large
            input.option-content(type='text', placeholder='User Id', ng-model='invitee')
            input.btn(type='submit', value='Invite')


    //-accordion-group(heading='Challenges')
      span.label
        i.icon-bullhorn
        | Challenges
      | coming soon!
      a(target='_blank', href='https://trello.com/card/challenges-individual-party-guild-public/50e5d3684fe3a7266b0036d6/58') Details
      //-{#if group.challenges}
      //-    <table class="table table-striped">
      //-        {#each group.challenges as :challenge}
      //-        <tr><td>
      //-            {:challenge.name}
      //-        </td></tr>
      //-        {/}
      //-    </table>
      //-    Visit the <span class=label><i class=icon-bullhorn></i> Challenges</span> for more information.
      //-{else}
      //-    No challenges yet, visit the <span class=label><i class=icon-bullhorn></i> Challenges</span> tab to create one.
      //-{/}
    a.btn.btn-danger(data-id='{{group.id}}', ng-click='leave(group)') Leave

  .span8
    div.blah-options(ng-show='group._editing')
      .option-large
        textarea.option-content(style='height:15em;', placeholder='Message from group leader', ng-model='group.leaderMessage')
        include ../../shared/formatting-help
    table(ng-show='group.leaderMessage')
      tr
        td
          app:avatar:avatar(profile='{{Members.members[group.leader]}}')
        td
          .popover.static-popover.fade.right.in.wide-popover
            .arrow
            h3.popover-title {{username(Members.members[group.leader].auth, Members.members[group.leader].profile.name)}}
            .popover-content
              markdown(ng-model='group.leaderMessage')
    div(ng-controller='ChatCtrl')
      h3 Chat
      include ./chat-box

      ul.unstyled.tavern-chat
        include ./chat-message