<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        body {
            font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-size: 14px;
            line-height: 20px;
            color: #333;
        }
        table {
            max-width: 100%;
            background-color: transparent;
            border-spacing: 0;
            width: 100%;
            margin-bottom: 20px;
            border: 1px solid #ddd;
            border-collapse: separate;
            border-left: 0;
            border-radius: 4px;
        }
        thead th {
            text-align: left;
            padding: 5px;
        }
        tfoot th {
            text-align: left;
            padding: 5px;
            border-top: 1px solid #DDD;
        }
        tbody tr:nth-child(odd) td {
            background-color: #f9f9f9;
        }
        th, td {
            padding: 8px;
            border-left: 1px solid #DDD;
        }
        td {
            border-top: 1px solid #DDD;
        }
        </style>
        <meta charset="UTF-8"/>
    </head>
    <body style="padding-top: 90px;">
        <a href="http://timetrack.io" target="_blank">
            TimeTrack
        </a>
        <h3>Time Entries</h3>
        <table style="width: 600px">
            <thead>
                <tr>
                    <th style="font-weight: bold;">Activity Type</th>
                    <th style="font-weight: bold;">From</th>
                    <th style="font-weight: bold;">To</th>
                    <th style="font-weight: bold;">Duration</th>
                    <th style="font-weight: bold;">Comment</th>
                </tr>
            </thead>
            <tbody>
            {{#intervals}}
                <tr>
                    <td>{{category}}</td>
                    <td>{{fromDate}}</td>
                    <td>{{toDate}}</td>
                    <td>{{duration}}</td>
                    <td>{{comment}}</td>
                </tr>
            {{/intervals}}
            </tbody>
        </table>
        <h3>Statistics</h3>
        <table style="width: 600px">
            <thead>
                <tr>
                    <th>Activity Type</th>
                    <th>Duration</th>
                    <th>Percent</th>
                </tr>
            </thead>
            <tfoot>
                <tr>
                    <th>Total</th>
                    <th>{{totalDuration}}</th>
                    <th>100.0%</th>
                </tr>
            </tfoot>
            <tbody>
            {{#categoryStatistics}}
                <tr>
                    <td>{{categories}}</td>
                    <td>{{duration}}</td>
                    <td>{{percent}}</td>
                </tr>
            {{/categoryStatistics}}
            </tbody>
        </table>
    </body>
</html>