hummingbird-me/kitsu-web

{{#bootstrap/bs-modal class="ticket-modal" onClose=onClose as |modal|}}
  {{#modal.body}}
    <div class="ticket">
      {{! header }}
      {{#unless isPersonalTicket}}
        <div class="ticket-header clearfix">
          {{lazy-image src=(image ticket.user.avatar "small") class="pull-sm-left"}}
          <div class="ticket-about">
            <div class="ticket-with">
              {{t "groups.tickets.conversation.title"
                name=ticket.user.name
                link=(href-to "users.index" ticket.user)
                htmlSafe=true}}
            </div>
            <div class="ticket-actions">
              {{#if ticket.isOpen}}
                <a href="#" class="resolve-ticket" {{action "markResolved"}}>
                  {{#if updateStatusTask.isRunning}}
                    {{loading-spinner size="small"}}
                  {{else}}
                    {{t "groups.tickets.conversation.mark-resolved"}}
                  {{/if}}
                </a>
              {{else}}
                <a href="#" class="resolve-ticket" {{action "markOpen"}}>
                  {{#if updateStatusTask.isRunning}}
                    {{loading-spinner size="small"}}
                  {{else}}
                    {{t "groups.tickets.conversation.mark-open"}}
                  {{/if}}
                </a>
              {{/if}}
            </div>
          </div>
        </div>
      {{/unless}}

      {{! conversation list }}
      <div class="ticket-history">
        <ul class="ticket-history-list">
          {{#if getMessagesTask.isRunning}}
            <div class="text-xs-center">
              {{loading-spinner size="large"}}
            </div>
          {{else}}
            {{#infinite-pagination onPagination=(action "onPagination") isTop=true rootMargin=(hash bottom=0 top=200)}}
              {{#each (reject-by "isNew" true messages) as |message|}}
                {{groups/tickets/ticket-conversation-message
                  ticket=ticket
                  message=message
                  class="clearfix"
                  tagName="li"}}
              {{/each}}
            {{/infinite-pagination}}
          {{/if}}

          {{#if (and isNewTicket ticket.isNew)}}
            <li class="card">
              <div class="card-block">
                {{t "groups.tickets.conversation.helper"}}
              </div>
            </li>
          {{/if}}
        </ul>
      </div>

      {{! footer }}
      <div class="ticket-message clearfix">
        {{! only show if within dashboard }}
        {{#unless isPersonalTicket}}
          <nav class="nav">
            <a class="nav-link {{if (eq activeTab "message") "active"}}" href="#" {{action (action (mut activeTab) "message")}}>
              {{t "groups.tickets.conversation.nav.reply"}}
            </a>
            <a class="nav-link {{if (eq activeTab "mod_note") "active"}}" href="#" {{action (action (mut activeTab) "mod_note")}}>
              {{t "groups.tickets.conversation.nav.leader"}}
            </a>
          </nav>
        {{/unless}}
        {{expanding-textarea replyContent
          update=(action (mut replyContent))
          keyEvents=(hash
            13=(action "onEnter")
          )
          placeholder=(t "groups.tickets.conversation.reply-placeholder")
          class="ticket-input"}}
        <button disabled={{if postMessageTask.isRunning "disabled"}} onclick={{perform postMessageTask}}>
          {{#if postMessageTask.isRunning}}
            {{loading-spinner size="small"}}
          {{else}}
            {{#if isNewTicket}}
              {{t "groups.tickets.conversation.create-btn"}}
            {{else}}
              {{t "groups.tickets.conversation.reply-btn"}}
            {{/if}}
          {{/if}}
        </button>
      </div>
    </div>
  {{/modal.body}}
{{/bootstrap/bs-modal}}