{% load i18n calendar %}

<div id="cal-{{cell.id}}">
    {% if cell.title %}
    <h2>{{cell.title}}</h2>
    {% endif %}
    <div>
        {% if calendar.has_other_pages %}
            <p class="paginator">
            {% if calendar.has_previous %}
                <a class="previous" href="?week_{{cell.id}}={{ calendar.previous_page_number }}">{% trans "previous week" %}</a>
            {% else %}
                <span class="previous">{% trans "previous week" %}</span>
            {% endif %}
            <span class="current">
                {{ calendar.number }} / {{ calendar.paginator.num_pages }}
            </span>
            {% if calendar.has_next %}
                <a class="next" href="?week_{{cell.id}}={{ calendar.next_page_number }}">{% trans "next week" %}</a>
            {% else %}
                <span class="next">{% trans "next week" %}</span>
            {% endif %}
            </p>
        {% endif %}

        {% if calendar %}
        <form method="POST" action="{% url 'calendar-booking' cell.id %}?week_{{cell.id}}={{calendar.number}}">
        {% csrf_token %}
            <table id="cal-table-{{cell.id}}">
                {% for cal in calendar %}
                <thead>
                    <tr>
                        <th></th>
                        {% for day in cal.get_days %}
                            <th>{{day|date:"SHORT_DATE_FORMAT"}}</th>
                        {% endfor %}
                    </tr>
                </thead>
                <tbody>
                    {% for slot in cal.get_slots %}
                    <tr>
                        <th>{{slot|date:"TIME_FORMAT"}}</th>
                        {% for day in cal.get_days %}
                            {% get_day_slot cal day=day slot=slot as value %}
                                {% if not value.exist %}
                                    <td class="absent"></td>
                                {% elif value.available %}
                                    <td class="available">
                                        <input type="checkbox" name="slots" value="{{value.label}}" id="slot-{{cell.id}}-{{value.label}}"/>
                                        <label for="slot-{{cell.id}}-{{value.label}}"></label>
                                     </td>
                                {% else %}
                                    <td class="unavailable"></td>
                                {% endif %}
                        {% endfor %}
                    </tr>
                    {% endfor %}
                </tbody>
                {% endfor %}
            </table>
            <button class="submit-button">{% trans "Book" context "booking" %}</button>
        </form>
        {% endif %}
    </div>
</div>