.dialog.dialog-overlay-sm{layout: 'dialog', 'layout-id' => 'comment-dialog', id: 'comment-dialog'}
  .content-head
    %h1
  .dialog-inner
    .right
      %a.button-orange{id: 'dialog-close-button', 'layout-action' => 'close'} X CLOSE
    %h2 Comments:
    .avatar-small
      = image_tag 'shared/avatar_generic.png', :alt => ""
    .left.w80.p10
      %textarea.w100.p5.f15{id: 'txtComment', rows: '2', placeholder: 'Enter a comment...'}
      %br/
      %br/
      .right
        %a.button-orange{id: 'btn-add-comment'} ADD COMMENT
    %br{clear: 'all'}/
    .dialog-comment-scroller

%script{type: 'text/template', id: 'template-comments'}
  .avatar-small.mr10{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'}
    %a{'href' => '/client#/profile/{{data.user_id}}'}
      %img{:'src' => '{{data.avatar_url}}', alt: ''}
  .w80.left.p10.lightgrey.mt10.comment-text
    %a{'user-id' => '{{data.user_id}}', 'hoveraction' => '{{data.hoverAction}}', 'profileaction' => '{{data.hoverAction}}'} {{data.name}}
     {{data.comment}}
    %br/
    .f12.grey.mt5.comment-timestamp
      {{data.timeago}}
  %br{clear: 'all'}/