{% extends 'base_rigs.html' %}
{% load static %}

{% block js %}
<script src="{% static 'js/moment.js' %}"></script>
<script>
    $(document).ready(function() {
            // set some button listeners
            $('#today-button').click(function(){ calendar.today(); });
            $('#go-to-date-input').change(function(){
                if(moment($('#go-to-date-input').val()).isValid()){
                    $('#go-to-date-button').prop('disabled', false);
                } else{
                    $('#go-to-date-button').prop('disabled', true);
                }
            });
            $('#go-to-date-button').click(function(){
                day = moment($('#go-to-date-input').val());
                if(day.isValid()){
                    calendar.gotoDate(day.format("YYYY-MM-DD"));
                } else{
                    alert('Invalid Date');
                }
            });
        });
</script>
{% endblock %}

{% block css %}
<style>
.week {
  display:grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-flow: dense;
  grid-gap: 2px 10px;
  border: 1px solid black;
  height: 8em;
  align-content: start;
}

.day {
  display:contents;
}
.day-label {
  grid-row-start: 1;
  text-align: right;
  margin:0;
  font-size: 1em !important;
  height: 1em;
}

.week-day, .day-label, .event {
  padding: 4px 10px;
}

.event {
  background-color: #CCC;
  font-size: 0.8em !important;
  white-space: nowrap;
}

.event-end {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

.event-start {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.day:nth-child(1) > .event { grid-column-start: 1; }
.day:nth-child(2) > .event { grid-column-start: 2; }
.day:nth-child(3) > .event { grid-column-start: 3; }
.day:nth-child(4) > .event { grid-column-start: 4; }

[data-span="1"] { grid-column-end: span 1; }
[data-span="2"] { grid-column-end: span 2; }
[data-span="3"] { grid-column-end: span 3; }
[data-span="4"] { grid-column-end: span 4; }
[data-span="5"] { grid-column-end: span 5; }
[data-span="6"] { grid-column-end: span 6; }
[data-span="7"] { grid-column-end: span 7; }

a {
  color: inherit !important;
  text-decoration: inherit !important;
}

</style>
{% endblock %}

{% block content %}
<div class="row justify-content-center mb-1">
    <a class="btn btn-info col-2" href="{% url 'web_calendar' %}?{{ prev_month }}"><span class="fas fa-chevron-left"></span> Previous Month</a>
    <div class="input-group col-4">
        <input type="date" id="go-to-date-input" placeholder="Go to date...">
        <span class="input-group-append">
        <button class="btn btn-success" id="go-to-date-button" type="button" disabled>Go!</button>
        </span>
    </div>
    <button type="button" class="btn btn-primary col-2" id="today-button">Today</button>
    <a class="btn btn-info mx-2 col-2" href="{% url 'web_calendar' %}?{{ next_month }}"><span class="fas fa-chevron-right"></span> Next Month</a>
</div>

<div class="week" style="height: 2em;">
  <div class="week-day">Monday</div>
  <div class="week-day">Tuesday</div>
  <div class="week-day">Wednesday</div>
  <div class="week-day">Thursday</div>
  <div class="week-day">Friday</div>
  <div class="week-day">Saturday</div>
  <div class="week-day">Sunday</div>
</div>
{% for week in weeks %}
<div class="week">
    {% for day in week %}
    <div class="day" id="{{day.0}}">
        <h3 class="day-label text-muted">{% if day.0 != 0 %}{{day.0}}{% endif %}</h3>
        {{ day.2|safe }}
    </div>
    {% endfor %}
</div>
{% endfor %}
{% endblock %}