<div class="column">
  <div class="time stat-widget vertical">
    <div class="stat-title"><%- @T('∅ Waiting time today') %></div>
    <div class="stat-graphic">
      <div class="stat-stopwatch centered">
        <%- @Icon('stopwatch', 'stat-icon stopwatch-icon') %>
        <canvas class="stat-dial"></canvas>
        <div class="stat-amount"></div>
      </div>
    </div>
    <div class="stat-label"><%- @T('My handling time: %s minutes', @TicketResponseTime.handling_time) %></div>
    <div class="stat-detail"><%- @T('Average: %s minutes', @TicketResponseTime.average_per_agent) %></div>
  </div>
</div>
<div class="column">
  <div class="mood stat-widget vertical">
    <div class="stat-title"><%- @T('Mood') %></div>
    <div class="stat-graphic">
      <%- @Icon("mood-#{@StatsTicketEscalation.state}", 'stat-icon mood-icon') %>
    </div>
    <div class="stat-label"><%- @StatsTicketEscalation.own %> of my tickets escalated.</div>
    <div class="stat-detail"><%- @T('Total: %s', @StatsTicketEscalation.total) %></div>
  </div>
</div>
<div class="column">
  <div class="channel-distribution stat-widget vertical centered">
    <div class="stat-title"><%- @T('Channel Distribution') %></div>
    <div class="stat-graphic">
      <% for channel_name, channel of @StatsTicketChannelDistribution.channels: %>
      <div class="stats-row email-channel">
        <%- @Icon(channel.icon, 'stat-channel-icon') %>
        <div class="stat-bars">
          <div class="stat-bar primary" style="height: <%- channel.inbound_in_percent %>%" title="<%- @T('Inbound') %>: <%- channel.inbound_in_percent %>% (<%- channel.inbound %>)"></div>
          <div class="stat-bar secondary" style="height: <%- channel.outbound_in_percent %>%" title="<%- @T('Outbound') %>: <%- channel.outbound_in_percent %>% (<%- channel.outbound %>)"></div>
        </div>
        <div class="stat-label"></div>
      </div>
      <% end %>
    </div>
  </div>
</div>
<div class="column">
  <div class="status stat-widget vertical">
    <div class="stat-title"><%- @T('Assigned') %></div>
    <div class="stat-graphic">
      <div class="stat-tickets vertical reverse end">
        <% stack_counter = parseInt(@StatsTicketLoadMeasure.percent*0.16) %>
        <% for count in [1..stack_counter]: %>
          <%- @Icon('one-ticket', "one-ticket state-color #{@StatsTicketLoadMeasure.state}-state") %>
        <% end %>
      </div>
      <%- @Icon('total-tickets', 'total-tickets') %>
    </div>
    <div class="stat-label"><%- @T('Tickets assigned to me: %s of %s', @StatsTicketLoadMeasure.own, @StatsTicketLoadMeasure.total) %></div>
    <div class="stat-detail"><%- @T('Average: %s', @StatsTicketLoadMeasure.average_per_agent) %></div>
  </div>
</div>
<div class="column">
  <div class="in-process stat-widget vertical">
    <div class="stat-title"><%- @T('Your Tickets in process') %></div>
    <div class="stat-graphic">
      <%- @Icon('in-process', "in-process-icon state-color #{@StatsTicketInProcess.state}-state") %>
    </div>
    <div class="stat-label" title="<%- @T('%s of your Tickets are currently in process.', @StatsTicketInProcess.in_process) %>"><%- @T('%s% are currently in process', @StatsTicketInProcess.percent) %></div>
    <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketInProcess.average_per_agent) %></div>
  </div>
</div>
<div class="column">
  <div class="reopening stat-widget vertical">
    <div class="stat-title"><%- @T('Reopening rate') %></div>
    <div class="stat-graphic">
      <%- @Icon('reopening', "reopening-icon state-color #{@StatsTicketReopen.state}-state") %>
    </div>
    <div class="stat-label"><%- @T('%s% are being reopened', @StatsTicketReopen.percent) %></div>
    <div class="stat-detail"><%- @T('Average: %s%', @StatsTicketReopen.average_per_agent) %></div>
  </div>
</div>