{% load date_js static %}

<script src="{% static "js/helper.js" %}"></script>
<script type="text/javascript">
    function updateDatepicker() {
        {% if not display_date_only %}
            $("#date").val(formatDate(activeDate));
        {% endif %}
    }

    function update() {
        console.log("Render new.");

        updateDatepicker();
    }

    function loadNew() {
        window.location.href = dest + formatDateForDjango(activeDate);
    }

    function onDateBeforeClick() {
        if (activeDate.getDay() === 1) {
            var minus = 3;
        } else {
            var minus = 1;
        }
        activeDate.setDate(activeDate.getDate() - minus);
        update();
        loadNew();
    }

    function onDateNextClick() {
        if (activeDate.getDay() === 5) {
            var plus = 3;
        } else {
            var plus = 1;
        }
        activeDate.setDate(activeDate.getDate() + plus);
        update();
        loadNew();
    }

    function onDateChanged() {
        var str = $("#date").val();
        var split = str.split(".")
        activeDate = new Date(split[2], split[1] - 1, split[0]);
        update();
        loadNew();
    }

    var activeDate = new Date({{ day|date_unix }});

    $(document).ready(function () {
        $("#date-before").click(onDateBeforeClick);
        $("#date-next").click(onDateNextClick);
        $("#date").change(onDateChanged);

        update();
    })
</script>


<div class="col s2" style="display: initial;">
    <a class="waves-effect waves-teal btn-flat btn-flat-medium left" id="date-before">
        <i class="material-icons center">navigate_before</i>
    </a>

</div>
{% if display_date_only %}
    <div class="col s8">
    <span class="card-title center-block" id="date">
        {{ day|date:"l, j.n.Y" }}
    </span>
    </div>
{% else %}
    <div class="col s8">
        <input type="text" class="datepicker center-align" id="date">
    </div>
{% endif %}
<div class="col s2" style="display: initial;">
    <a class="waves-effect waves-teal btn-flat btn-flat-medium right" id="date-next">
        <i class="material-icons center">navigate_next</i>
    </a>
</div>