<div class="flex flex--nowrap flex--verticalCenter mg-b-1">
  <div class="flex__item flex__item--noShrink">
    <img class="mg-r-1 square-2" src="{{avatarUrl}}" alt="{{user.display_name}}">
  </div>
  <div class="flex__item flex__item--grow ellipsis mg-r-1">{{format-display-name user.name user.display_name true}}</div>
  <div class="flex__item flex__item--noShrink">
    {{#if isError}}
      {{i18n 'Something went wrong'}}
    {{else if (or isBanned user.isBanned)}}
      {{#common/button-element isHollow=true size='small' onClick=(action unbanChannel user)}}
        <span>{{i18n 'Unban'}}</span>
      {{/common/button-element}}
    {{else}}
      {{#common/button-element isHollow=true size='small' onClick=(action 'openInModal' 'ban')}}
        <span>{{i18n 'Ban'}}</span>
      {{/common/button-element}}
    {{/if}}

    {{#if (not (or isBanned user.isBanned))}}
      {{#if isError}}
        {{i18n 'Something went wrong'}}
      {{else if (or isTimedout user.isTimedout)}}
        {{#common/button-element isHollow=true size='small' onClick=(action untimeoutChannel user)}}
          <span>{{i18n 'Untimeout'}}</span>
        {{/common/button-element}}
      {{else}}
        {{#common/button-element isHollow=true size='small' onClick=(action 'openInModal' 'timeout')}}
          <span>{{i18n 'Timeout'}}</span>
        {{/common/button-element}}
      {{/if}}
    {{/if}}
  </div>
</div>
