{% extends "base.html" %}
{% load static %}
{% block title %}Table{% endblock %}
{% block head %}
    <link rel="stylesheet" href="{% static "table.css" %}">
    <script src="{% static "table.js" %}"></script>
{% endblock %}
{% block main %}
    {% csrf_token %}
    <div class="controls">
        <button id="prev-month"><</button>
        <div id="month">Month</div>
        <button id="next-month">></button>
    </div>
    <table class="template">
        <td class="template time-input"><input type="time"></td>
    </table>
    <table id="table">
        <colgroup class="headers">
            <col class="name">
            <col class="num">
        </colgroup>
        <colgroup class="columns"></colgroup>
        <colgroup class="tailers">
            <col span="4">
        </colgroup>
        <tbody class="clockings">
            <tr class="dates">
                <td colspan="2"></td>
            </tr>
            <tr class="clocking" data-type="in_am">
                <th colspan="2">Check-IN AM</th>
                <th rowspan="6" class="total-header">TOTAL</th>
                <th rowspan="8" class="total-header">% working time</th>
                <th rowspan="8" class="total-header">% imputed time</th>
                <th rowspan="8" class="total-header">time on sagex</th>
            </tr>
            <tr class="clocking" data-type="out_am">
                <th colspan="2">Check-OUT AM</th>
            </tr>
            <tr class="clocking" data-type="in_pm">
                <th colspan="2">Check-IN PM</th>
            </tr>
            <tr class="clocking" data-type="out_pm">
                <th colspan="2">Check-OUT PM</th>
            </tr>
            <tr class="clocking" data-type="remote">
                <th colspan="2" rowspan="2">Remote</th>
            </tr>
            <tr class="clocking remote-total"></tr>
            <tr class="clocking total">
                <th colspan="2" rowspan="2">TOTAL</th>
            </tr>
            <tr class="clocking total2"></tr>
        </tbody>
        <tr class="separator"></tr>
        <tbody class="times">
            <tr class="week-names">
                <th colspan="2"></th>
            </tr>
            <tr class="day-names">
                <th rowspan="2">Name</th>
                <th rowspan="2">N° sagex</th>
            </tr>
            <tr class="day-dates"></tr>
        </tbody>
    </table>
{% endblock %}