{% 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 %}
    <div class="by-range">
        <div class="template row">
            <div class="name"></div>
            <div class="duration"></div>
        </div>
        <div class="template no-data">No Data</div>
        <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 id="list"></div>
    </div>
{% endblock %}