{# vim: set ts=2 et sts=2 sw=2: #}
{% extends "karma/dashboards/base.html" %}
{% set classes = ('karma-dashboard questions') %}
{% set title = _('Support Forum Karma Dashboard') %}

{% block content %}
  <h1>{{ title }}</h1>


  <article id="karma-dash"
    data-userlist-url="{{ url('karma.api.users') }}"
    data-overview-url="{{ url('karma.api.overview') }}"
    data-details-url="{{ url('karma.api.details') }}">
  </article>

  <!-- View Templates -->
  <script type="text/template" id="chart-template">
  </script>
  <script type="text/template" id="overview-template">
    <table>
      <thead>
        <tr>
          <th class="action"></th>
          <th class="total">{{ _('Period Total') }}</th>
          <th class="percent">%</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td class="action">{{ _('Questions') }}</td>
          <td class="total">
            <%= question %>
          </td>
          <td class="percent">100%</td>
        </tr>
        <tr>
          <td class="action">{{ _('First Answers') }}</td>
          <td class="total">
            <%= firstanswer %>
          </td>
          <td class="percent">
            <%= Math.round(firstanswer*100/question) %>%
          </td>
        </tr>
        <tr>
          <td class="action">{{ _('Solutions') }}</td>
          <td class="total">
            <%= solution %>
          </td>
          <td class="percent">
            <%= Math.round(solution*100/question) %>%
          </td>
        </tr>
        <tr>
          <td class="action">{{ _('Answers') }}</td>
          <td class="total">
            <%= answer %>
          </td>
          <td class="percent"></td>
        </tr>
        <tr>
          <td class="action">{{ _('Helpful Votes') }}</td>
          <td class="total">
            <%= helpfulanswer %>
          </td>
          <td class="percent">
            <%= Math.round(helpfulanswer*100/(nothelpfulanswer+helpfulanswer)) %>%
          </td>
        </tr>
        <tr>
          <td class="action">{{ _('Unhelpful Votes') }}</td>
          <td class="total">
            <%= nothelpfulanswer %>
          </td>
          <td class="percent">
            <%= Math.round(nothelpfulanswer*100/(nothelpfulanswer+helpfulanswer)) %>%
          </td>
        </tr>
      </tbody>
    </table>
  </script>

  <script type="text/template" id="userlist-template">
    <table>
      <thead>
        <tr>
          <th class="select-user"></th>
          <th class="username">
            {{ _('Username') }}
          </th>
          <th class="points sortable <% if (sort==='points') { %>sort<% } %>">
            {{ _('Total Points') }}
          </th>
          <th class="answer sortable <% if (sort==='answer') { %>sort<% } %>">
            {{ _('Answers') }}
          </th>
          <th class="first-answer sortable <% if (sort==='first-answer') { %>sort<% } %>">
            {{ _('First Answers') }}
          </th>
          <th class="solution sortable <% if (sort==='solution') { %>sort<% } %>">
            {{ _('Solutions') }}
          </th>
          <th class="helpful-answer sortable <% if (sort==='helpful-answer') { %>sort<% } %>">
            {{ _('Helpful Votes') }}
          </th>
          <th class="nothelpful-answer sortable <% if (sort==='nothelpful-answer') { %>sort<% } %>">
            {{ _('Unhelpful Votes') }}
          </th>
      </thead>
      <tbody></tbody>
    </table>
  </script>

  <script type="text/template" id="user-template">
    <td class="select-user">
      <input type="checkbox" name="selected" value="<%= id %>" <% if(selected) { %>checked="checked"<% } %>/>
    </td>
    <td class="username">
      <%= username %>
    </td>
    <td class="points">
      <div style="background: -moz-linear-gradient(left, #ddd, #ddd <%= pointsPerc %>%, transparent <%= pointsPerc %>%, transparent);">
        <%= points %>
      </div>
    </td>
    <td class="answer">
      <div style="background: -moz-linear-gradient(left, #ddd, #ddd <%= answerPerc %>%, transparent <%= answerPerc %>%, transparent);">
        <%= answer %>
      </div>
    </td>
    <td class="first-answer">
      <div style="background: -moz-linear-gradient(left, #ddd, #ddd <%= firstanswerPerc %>%, transparent <%=firstanswerPerc %>%, transparent);">
        <%= firstanswer %>
      </div>
    </td>
    <td class="solution">
      <div style="background: -moz-linear-gradient(left, #ddd, #ddd <%= solutionPerc %>%, transparent <%= solutionPerc %>%, transparent);">
        <%= solution %>
      </div>
    </td>
    <td class="helpful-answer">
      <div style="background: -moz-linear-gradient(left, transparent, transparent <%= 100 - helpfulanswerPerc %>%, #ddd <%= 100 - helpfulanswerPerc %>%, #ddd);">
        <%= helpfulanswer %>
      </div>
    </td>
    <td class="nothelpful-answer">
      <div style="background: -moz-linear-gradient(left, #ddd, #ddd <%= nothelpfulanswerPerc %>%, transparent <%= nothelpfulanswerPerc %>%, transparent);">
        <%= nothelpfulanswer %>
      </div>
    </td>
  </script>

  <script type="text/template" id="daterange-template">
    <label for="daterange">{{ _('Date Range') }}</label>
    <select id="daterange">
      <option value="1w" <% if (daterange === '1w') { %>selected<% } %>>
        {{ _('1 week') }}
      </option>
      <option value="1m" <% if (daterange === '1m') { %>selected<% } %>>
        {{ _('1 month') }}
      </option>
      <option value="3m" <% if (daterange === '3m') { %>selected<% } %>>
        {{ _('3 months') }}
      </option>
      <option value="6m" <% if (daterange === '6m') { %>selected<% } %>>
        {{ _('6 months') }}
      </option>
      <option value="1y" <% if (daterange === '1y') { %>selected<% } %>>
        {{ _('1 year') }}
      </option>
    </select>
  </script>
{% endblock %}