<div class="main flex">

  <div class="ticketZoom">
    <div class="ticketZoom-controls">
      <div class="btn btn--action btn--split--first js-highlight">
        <%- @Icon('marker', 'js-highlight-icon') %>
      </div>
      <div class="dropdown dropdown--actions">
        <div class="btn btn--action btn--split--last btn--slim" id="highlight" data-toggle="dropdown" aria-expanded="true">
          <%- @Icon('arrow-down') %>
        </div>
        <ul class="dropdown-menu dropdown-menu-right" role="menu">
          <% for entry, i in @colors: %>
          <li role="presentation">
            <a role="menuitem" tabindex="-1" class="js-highlightColor" data-key="<%= i %>">
              <span class="dropdown-iconSpacer">
                <span class="color-swatch icon" style="background: <%= entry.color %>"></span>
              </span>
              <%- @Ti(entry.name) %>
              <span class="dropdown-activeSpacer visibility-change<%= ' is-active' if i is @activeColorIndex %>">
                <svg class="icon-checkmark" data-visible="active"><use xlink:href="#icon-checkmark" fill="white" /></svg>
              </span>
            </a>
          <% end %>
        </ul>
      </div>
      <div class="pagination-counter">
          <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
        </div>
        <ul class="pagination">
          <li>
            <a class="btn btn--action btn--split--first" data-from="0" data-type="page">
              <%- @Icon('arrow-left') %>
            </a>
          <li>
            <a class="btn btn--action btn--split--last" href="#" data-from="1" data-type="page">
              <%- @Icon('arrow-right') %>
            </a>
        </ul>
      </li>
    </div>

    <div class="scrollPageHeader tabsSidebar-sidebarSpacer" 
      data-anchor-target=".ticketZoom .page-header"
      data-128-top-bottom="transform: translateY(-64px);"
      data-64-top-bottom="transform: translateY(0px);"
    >
      <small>Ticket# <span class="ticket-number">1002</span></small>
      <div class="ticket-title flex">
        <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
      </div>
      <div class="pagination-counter">
        <span class="pagination-item-current">1</span>/<span class="pagination-total-items">36</span>
      </div>
      <ul class="pagination">
        <li>
          <a class="centered" href="#" data-from="<%= @items_from - @items_per_page %>" data-type="page">
            <%- @Icon('arrow-left') %>
          </a>
        <li>
          <a class="centered" href="#" data-from="<%= @items_from + @items_per_page %>" data-type="page">
            <%- @Icon('arrow-left') %>
          </a>
      </ul>
    </div>
    <div class="page-header">
      <div class="flex vertical center">
        <span class="avatar unique user-popover size-50" data-id="2" style="background-position: -92.79607555375712px -106.24902447601627px;" data-original-title="" title="">NB</span>
        <div class="ticket-title">
          <h1 contenteditable="true" class="ticket-title-update" data-placeholder="Enter Title...">Welcome to Zammad! We want to entertain you and your whole family!</h1>
        </div>
        <div class="ticket-meta">
          <small class="task-subline">Ticket# <span class="ticket-number">10001</span> - erstellte <span class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="11.07.2014 12:10">11.07.2014</span> 
          </small>
        </div>
      </div>
    </div>

    <div class="ticket-article">
      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
        <div class="article-meta-clip top">
          <div class="article-content-meta top hide">
            <div class="article-meta top">
              <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
                <div class="article-meta-key u-textTruncate">From</div>
                <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article-content zIndex-1">
          <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
          <div class="flex bubble-gap internal-border">
            <div class="textBubble">
              <div class="bubble-arrow"></div>
              <div class="textBubble-content">
                <div class="article-text" id="article-1249870934">
Welcome!
<br/>
Thank you for installing Zammad.<br/>
<br/>
You will find updates and patches at <a href="http://zammad.org/" title="http://zammad.org/" target="_blank">http://zammad.org/</a>. Online<br/>
documentation is available at <a href="http://guides.zammad.org/" title="http://guides.zammad.org/" target="_blank">http://guides.zammad.org/</a>. You can also<br/>
use our forums at <a href="http://forums.zammad.org/" title="http://forums.zammad.org/" target="_blank">http://forums.zammad.org/</a><br/>
<br/>
Regards,<br/>
The <a href="http://Zammad.org" title="http://Zammad.org" target="_blank">Zammad.org</a> Project
                </div>
                <div class="textBubble-overflowContainer">
                  <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
                </div>
              </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">Kanal</div>
                <div class="article-meta-value">
                  <svg class="article-meta-icon"><use xlink:href="#icon-phone" /></svg>
                  phone
                </div>
              </div>
            </div>
            <div class="article-actions horizontal stretch">
              <a href="" data-type="internal" class="article-action u-clickable">
                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
                set to internal
              </a>
              <a href="#" data-type="reply" class="article-action u-clickable">
                <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
                reply
              </a>
              <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
                <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
                split
              </a>
            </div>
          </div>
        </div>
        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
      </div>

      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
        <div class="article-meta-clip top">
          <div class="article-content-meta top hide">
            <div class="article-meta top">
              <div class="horizontal article-meta-row" title="From: Felix Niklas">
                <div class="article-meta-key u-textTruncate">From</div>
                <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article-content zIndex-1">
          <span class="avatar user-popover" data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
          <div class="flex bubble-gap internal-border">
            <div class="textBubble"><div class="bubble-arrow"></div>
            <div class="article-text" id="article-3509870934">Hallp HP, du kannst dich nur einmal einloggen. Was machst du genau?</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">Kanal</div>
                <div class="article-meta-value">
                  <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
                  note
                </div>
              </div>
            </div>
            <div class="article-actions horizontal stretch">
              <a href="" data-type="internal" class="article-action u-clickable">
                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
                set to internal
              </a>
            </div>
          </div>
        </div>
        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
      </div>

      <div class="ticket-article-item customer phone" data-id="1" id="article-1">
        <div class="article-meta-clip top">
          <div class="article-content-meta top hide">
            <div class="article-meta top">
              <div class="horizontal article-meta-row" title="From: Zammad Feedback <feedback@zammad.org>">
                <div class="article-meta-key u-textTruncate">From</div>
                <div class="article-meta-value flex u-textTruncate">Zammad Feedback &lt;feedback@zammad.org&gt;</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article-content zIndex-1">
          <span class="avatar unique user-popover " data-id="2" style="background-position: -96.5079185759074px -112.28590086669901px;" data-placement="left" data-original-title="" title="">NB</span>
          <div class="flex bubble-gap internal-border">
            <div class="textBubble"><div class="bubble-arrow"></div><div class="article-text" id="article-35098758344">Ich wollte mir die Lyrics von Maria herunterladen, aber ich schaff es einfach nicht, da raufzukommen. Schick mir bitte mein Passwort.

Grüße, Peter</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">Kanal</div>
                <div class="article-meta-value">
                  <span class="white phone channel icon"></span>
                  phone
                </div>
              </div>
            </div>
            <div class="article-actions horizontal stretch">
              <a href="" data-type="internal" class="article-action u-clickable">
                <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
                set to internal
              </a>
              <a href="#" data-type="reply" class="article-action u-clickable">
                <svg class="article-meta-icon"><use xlink:href="#icon-reply" /></svg>
                reply
              </a>
              <a href="#ticket/create/1/1" data-type="split" class="article-action u-clickable">
                <svg class="article-meta-icon"><use xlink:href="#icon-split" /></svg>
                split
              </a>
            </div>
          </div>
        </div>
        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-07-11T10:10:32.000Z" data-tooltip="2014-07-11 12:10">2014-07-11</time></small>
      </div>

      <div class="ticket-article-item agent note" data-id="23" id="article-23">      
        <div class="article-meta-clip top">
          <div class="article-content-meta top hide">
            <div class="article-meta top">
              <div class="horizontal article-meta-row" title="From: Felix Niklas">
                <div class="article-meta-key u-textTruncate">From</div>
                <div class="article-meta-value flex u-textTruncate">Felix Niklas</div>
              </div>
            </div>
          </div>
        </div>
        <div class="article-content zIndex-1">
          <span class="avatar user-popover " data-id="3" style="background-image: url(api/v1/users/image/bb100af55234cf61fb6f207636f095f8)" data-placement="right" data-original-title="" title=""></span>
          <div class="flex bubble-gap internal-border">
            <div class="textBubble">
              <div class="bubble-arrow"></div>
              <div class="textBubble-content"><div class="article-text" id="article-350234270934">Lieber HP,<br>
anbei findest du die Midi Noten für Maria Maria "I Like it Loud".<br>
Wünsche dir einen guten Auftritt in Hamburg.<br>
<br>
Deine Frau bekommt ein Kind haben wir gehört.<br>
Gratulation dazu! Wir schicken dir was liebes.<br>
<br>
Und wenn du noch mal Probleme mit der Stimme hast sag bescheid – ich kenn da ein Wundermittel.<br>
<br>
Das ist eine Pille von einem Druiden aus dem Bayerischen Wald. Die ölt einem so richtig die Stimmbänder.<br>
<br>
Verwende ich immer wenn ich meine Frau anschreien will. Die macht meinen Tenor richtig zum Löwen.<br>
<br>
Ach ja und dein Freund Tim. Richt dem mal aus dass er das doch bitte sein lassen soll mit den Anrufen.<br>
<br>Ich weiß schon dass ich ein hübscher bin. Aber ich hab ihm schon tausend mal gesagt, dass ich seine Gefühle leider nicht erwiedern kann.<br>
<br>
Bin verheiratet, hab Kind. Is doch offensichtlich, Junge!<br>
Alles gute,<br>
Oliver<br></div>
                <div class="textBubble-overflowContainer">
                  <div class="btn btn--text js-unfold"><%- @T('See more') %></div>
                </div>
              </div>
              <div class="attachments">
                <svg class="icon-paperclip"><use xlink:href="#icon-paperclip" /></svg>
                <div class="attachments-title">2 <%- @T('Attached Files') %></div>
                <div class="attachment">
                  <div class="attachment-name u-highlight">midinotes_view.jpg</div>
                  <div class="attachment-size">35.5 kb</div>
                </div>
                <div class="attachment">
                  <div class="attachment-name u-highlight">lyrics_I_Like_it_Loud.txt</div>
                  <div class="attachment-size">17.1 kb</div>
                </div>
                <div class="attachment">
                  <div class="attachment-name u-highlight">something with very long line which is slonger as the container arount it if you can see it I wish you a very happy day.txt</div>
                  <div class="attachment-size">17.1 kb</div>
                </div>
              </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">Kanal</div>
                <div class="article-meta-value">
                  <svg class="article-meta-icon"><use xlink:href="#icon-note" /></svg>
                  note
                </div>
              </div>
            </div>
            <div class="article-actions horizontal stretch">
              <a href="" data-type="internal" class="article-action u-clickable">
              <svg class="article-action-icon"><use xlink:href="#icon-lock" /></svg>
                set to internal
              </a>
            </div>
          </div>
        </div>
        <small class="task-subline zIndex-1"><time class="humanTimeFromNow" data-time="2014-08-05T13:34:01.000Z" data-tooltip="2014-08-05 15:34">2014-08-05</time></small>
      </div>
    </div>
  </div>

</div>