<div class="container">
    <div class="welcome">Welcome, <%= current_user.editor.full_name %></div>
    <div class="hero-small dashboard">
      <div class="hero-title">
        <%= image_tag "icon_papers.svg", height: "32px" %><h1>Editor statistics</h1>
      </div>
    </div>
</div>

<%= render partial: "menu" %>

<div class="container">
  <table class="dashboard-table sortable">
    <thead>
      <tr>
        <th scope="col" width="20%">Editor</th>
        <th scope="col" width="8%">Assigned</th>
        <th scope="col" class="text-center" width="12%">3M average</th>
        <th scope="col" class="text-center" width="8%">Week</th>
        <th scope="col" class="text-center" width="8%">Month</th>
        <th scope="col" class="text-center" width="8%">Quarter</th>
        <th scope="col" class="text-center" width="8%">Year</th>
        <th scope="col" class="text-center" width="8%">All time</th>
        <th scope="col" class="text-center" width="10%">Start date</th>
      </tr>
    </thead>
    <tbody>
      <% Editor.active.order('LOWER(login)').each do |editor| %>
      <tr class='<%= availability_class(editor) %>'>
        <td sorttable_customkey=<%= editor.login.downcase %>><%= image_tag(avatar(editor.login), size: "24x24", class: "avatar", title: editor.login) %> <%= link_to editor.login, "/dashboard/#{editor.login}", style: "font-size: 0.9em;" %><% if editor.retired? %> <em>(emeritus)</em><% end %></td>
        <td sorttable_customkey=<%= in_progress_no_paused_for_editor(editor) %>><%= in_progress_for_editor(editor) %></td>
        <td class="text-center"><%= sprintf("%.1f", @papers_last_3_months[editor.id].to_i / 3.0) %></td>
        <td class="text-center"><%= @papers_last_week[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_month[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_3_months[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_year[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_all_time[editor.id].to_i %></td>
        <td class="text-center" style="font-size: 0.9em;"><%= editor.created_at.strftime("%Y-%m-%d") %></td>
      </tr>
      <% end %>
    </tbody>
    <tfoot>
      <% Editor.emeritus.order('LOWER(login)').each do |editor| %>
      <tr class="<%= cycle('odd', 'even') -%>">
        <td><%= image_tag(avatar(editor.login), size: "24x24", class: "avatar", title: editor.login) %> <%= link_to editor.login, "/dashboard/#{editor.login}", style: "font-size: 0.9em;" %><% if editor.retired? %> <em>(emeritus)</em><% end %></td>
        <td><%= in_progress_for_editor(editor) %></td>
        <td class="text-center"><%= sprintf("%.1f", @papers_last_3_months[editor.id].to_i / 3.0) %></td>
        <td class="text-center"><%= @papers_last_week[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_month[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_3_months[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_last_year[editor.id].to_i %></td>
        <td class="text-center"><%= @papers_all_time[editor.id].to_i %></td>
      </tr>
      <% end %>
      <tr style="font-weight: bolder;">
        <td>Totals</td>
        <td><%= Paper.in_progress.count %></td>
        <td class="text-center">–––</td>
        <td class="text-center"><%= Paper.visible.since(1.week.ago).count %></td>
        <td class="text-center"><%= Paper.visible.since(1.month.ago).count %></td>
        <td class="text-center"><%= Paper.visible.since(3.months.ago).count %></td>
        <td class="text-center"><%= Paper.visible.since(1.year.ago).count %></td>
        <td class="text-center"><%= Paper.visible.since(100.year.ago).count %></td>
      </tr>
    </tfoot>
  </table>
</div>

<div class="container">
  <div class="generic-content-item">
    <h3>Published papers per month</h3>

    <%= column_chart [
      { name: "Accepted papers by month", data: @accepted_papers }
    ], height: "500px", legend: false, library: { scales: { xAxes: [{ position: 'bottom' }], yAxes: [{ position: 'left', gridLines: { display: true, drawBorder: true }, ticks: { min: 0, max: 60, stepSize: 5}}, { position: 'right', gridLines: { display: false, drawBorder: true }, ticks: { min: 0, max: 60, stepSize: 5}}]}} %>

  </div>

  <div class="generic-content-item" style="padding-bottom: 80px;">
    <h3 class="float-left">Accepted papers per month by editor</h3>
    <p class="float-right" style="font-weight: bolder; padding-left: 40px;">Select editor: <%= select_tag 'editors', options_from_collection_for_select(Editor.all, "login", "login", params[:editor].blank? ? current_user.editor.login : params[:editor]),
      onchange: "top.location.href='/dashboard?editor=' + this.options[this.selectedIndex].value + '#editor';" %></p>

      <%= column_chart [
      { name: "Papers edited by #{@editor.login} by month", data: @editor_papers }
    ], height: "500px", colors: ["#8FBC8F"], id: "editor", legend: false, library: { scales: { xAxes: [{ position: 'bottom' }], yAxes: [{ position: 'left', gridLines: { display: true, drawBorder: true }, ticks: { min: 0, max: 20, stepSize: 5}}, { position: 'right', gridLines: { display: false, drawBorder: true }, ticks: { min: 0, max: 20, stepSize: 5}}]}} %>
  </div>

  <div class="generic-content-item" style="padding-bottom: 120px;">
    <h3 class="float-left">Papers reviewed per month by <%= @reviewer %></h3>

    <div class="float-right" style="font-weight: bolder; padding-left: 40px;">Search for reviewer (hit enter to search): <%= form_for("/dashboard", html: { method: 'GET', style: "display: inline !important;" }) do |f| %><%= text_field_tag 'reviewer', @reviewer  %><% end %> </div>

    <%= column_chart [
      { name: "Papers reviewed by #{@reviewer} by month", data: @reviewer_papers }
    ], height: "500px", colors: ["#FFA500"], id: "reviewers", legend: false, library: { scales: { xAxes: [{ position: 'bottom' }], yAxes: [{ position: 'left', gridLines: { display: true, drawBorder: true }, ticks: { min: 0, max: 20, stepSize: 5}}, { position: 'right', gridLines: { display: false, drawBorder: true }, ticks: { min: 0, max: 20, stepSize: 5}}]}} %>
  </div>
</div>
