<div class="article-meta-clip top">
  <div class="article-content-meta top hide">
    <div class="article-meta top">
    <% if @article.from: %>
      <div class="horizontal article-meta-row">
        <div class="article-meta-key u-textTruncate"><%- @T('From') %></div>
        <div class="article-meta-value flex contain-text"><%- @AddressLine(@article.from) %></div>
      </div>
    <% end %>
    <% if @article.reply_to: %>
      <div class="horizontal article-meta-row">
        <div class="article-meta-key u-textTruncate"><%- @T('Reply-To') %></div>
        <div class="article-meta-value flex contain-text"><%- @AddressLine(@article.reply_to) %></div>
      </div>
    <% end %>
    <% if @article.to: %>
      <div class="horizontal article-meta-row">
        <div class="article-meta-key u-textTruncate"><%- @T('To') %></div>
        <div class="article-meta-value flex contain-text"><%- @AddressLine(@article.to) %></div>
      </div>
    <% end %>
    <% if @article.cc: %>
      <div class="horizontal article-meta-row">
        <div class="article-meta-key u-textTruncate"><%- @T('Cc') %></div>
        <div class="article-meta-value flex contain-text"><%- @AddressLine(@article.cc) %></div>
      </div>
    <% end %>
    <% if @article.subject: %>
      <div class="horizontal article-meta-row">
        <div class="article-meta-key u-textTruncate"><%- @T('Subject') %></div>
        <div class="article-meta-value flex contain-text"><%= @article.subject %></div>
      </div>
    <% end %>
    </div>
  </div>
</div>
<div class="article-content">
  <% if @article.sender.name isnt 'Agent': %>
  <%    position = 'left' %>
  <% else: %>
  <%    position = 'right' %>
  <% end %>
  <div class="js-avatar"></div>
  <div class="bubble-gap">
    <div class="internal-border">
      <div class="textBubble">
        <div class="bubble-arrow"></div>
        <div class="textBubble-content" id="article-content-<%= @article.id %>" data-id="<%= @article.id %>">
          <div class="richtext-content"><%- @article.html %></div>
          <div class="textBubble-overflowContainer hide">
            <div class="btn btn--text js-toggleFold"><%- @T('See more') %></div>
          </div>
        </div>
        <% if !_.isEmpty(@attachments): %>
          <div class="attachments attachments--list">
            <%- @Icon('paperclip') %>
            <div class="attachments-title"><%- @attachments.length %> <%- @T('Attached Files') %></div>
            <% for attachment in @attachments: %>
              <% if !@C('ui_ticket_zoom_attachments_preview'): %>
                <div class="attachment attachment--row">
                  <a class="attachment-name u-highlight" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" target="_blank" data-type="attachment"><%= attachment.filename %></a>
                  <div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
                </div>
              <% else: %>
                <a class="attachment attachment--preview" title="<%- attachment.preferences['Content-Type'] %>" target="_blank" href="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>?disposition=attachment" data-type="attachment"<% if @canDownload(attachment.preferences['Content-Type']): %> download<% end %>>
                  <div class="attachment-icon">
                  <% if attachment.preferences && attachment.preferences['Content-Type'] && @ContentTypeIcon(attachment.preferences['Content-Type']): %>
                    <% if @canPreview(attachment.preferences['Content-Type']): %>
                      <img src="<%= App.Config.get('api_path') %>/ticket_attachment/<%= @article.ticket_id %>/<%= @article.id %>/<%= attachment.id %>">
                    <% else: %>
                      <%- @Icon( @ContentTypeIcon(attachment.preferences['Content-Type']) ) %>
                    <% end %>
                  <% else: %>
                    <%- @Icon('file-unknown') %>
                  <% end %>
                  </div>
                  <span class="attachment-name u-highlight"><%= attachment.filename %></span>
                  <div class="attachment-size"><%- @humanFileSize(attachment.size) %></div>
                </a>
              <% end %>
            <% end %>
          </div>
        <% end %>
      </div>
    </div>
  </div>
</div>
<div class="article-meta-clip bottom">
  <div class="article-content-meta bottom hide">
    <div class="article-meta bottom">
      <div class="horizontal article-meta-row">
        <div class="article-meta-key"><%- @T('Channel') %></div>
        <div class="article-meta-value">
          <%- @Icon(@article.type.name, 'article-meta-icon') %>
          <%- @T(@article.type.name) %>
          <div class="article-meta-links">
          <% if @links: %>
            <% count = 0 %>
            <% for link in @links: %>
              <% if count > 0: %>|<% end %>
              <a class="text-muted" href="<%- link.url %>" target="<%- link.target %>"><%- @T(link.name) %></a>
              <% count =+ 1 %>
            <% end %>
          <% end %>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="js-article-actions"></div>

<small class="task-subline"><%- @humanTime(@article.created_at) %></small>
