{% extends "base.html" %}
{% load static %}
{% block title %}Dashboard{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static "dashboard.css" %}">
    <script src="{% static "dashboard.js" %}"></script>
{% endblock %}
{% block footer %}{% endblock %}
{% block main %}
    {% csrf_token %}
    <table class="template">
        <td class="template sagex-hours">
            <input type="number" class="hours" min="0" step="1" />:<input type="number" class="minutes" min="0" step="1" />
        </td>
    </table>
    <div class="by-range">
        <div class="controls">
            <div id="month-sel" class="group">
                <button id="prev-month"><</button>
                <div id="month">Month</div>
                <button id="next-month">></button>
            </div>
            <div id="week-sel" class="group hidden">
                <button id="prev-week"><</button>
                <div id="week">Week</div>
                <button id="next-week">></button>
            </div>
            <select id="range-sel">
                <option value="monthly">Monthly</option>
                <option value="weekly">Weekly</option>
            </select>
        </div>
        <div class="tables">
            <table id="headers-table">
                <tr class="project-names">
                    <th colspan="2"></th>
                </tr>
                <tr class="project-nums">
                    <th colspan="2">N° SageX</th>
                </tr>
                <tr class="clocking">
                    <th>Total clocked</th>
                    <td class="total-clocking"></td>
                </tr>
                <tr class="total-durations">
                    <th>Total</th>
                    <td class="total-duration"></td>
                </tr>
                <tr class="working-time-ratios">
                    <th>% working time</th>
                    <td class="working-time-ratio"></td>
                </tr>
                <tr class="imputed-time-ratios">
                    <th>% imputed time</th>
                    <td></td>
                </tr>
                <tr class="sagex-hours">
                    <th>Hours on SageX (theoretical)</th>
                    <td class="sagex-hours-total"></td>
                </tr>
                <tr class="real-sagex-hours">
                    <th>Hours on SageX (real)</th>
                    <td class="sagex-hours-diff"></td>
                </tr>
            </table>
            <table id="projects-table">
                <tr class="project-names"></tr>
                <tr class="project-nums"></tr>
                <tr class="clocking"></tr>
                <tr class="total-durations"></tr>
                <tr class="working-time-ratios"></tr>
                <tr class="imputed-time-ratios"></tr>
                <tr class="sagex-hours"></tr>
                <tr class="real-sagex-hours"></tr>
            </table>
        </div>
    </div>
{% endblock %}