{% extends "base.html" %}

{% block full_title %}Events at TXRX{% endblock %}
{% block header_content %}
Events at TXRX
{% endblock %}

{% block main %}
<div class="paginator">
  <a class="left" href="{% url "event_index" previous|date:"Y-m-d" %}">&laquo; Previous Month</a>
  <strong>
    Week of {{ current_date|date:"F Y" }}
    <div class="calendar_widget" style="display: inline-block; padding-left: 50px; font-size:0.7em;">
      (<a href="javascript:;" onclick="$('.add_to_calendar').toggle()">Subscribe to calendar</a>)
      {% include "course/_add_to_calendar.html" %}
    </div>
  </strong>
  <a class="right" href="{% url "event_index" next|date:"Y-m-d" %}">Next Week &raquo;</a>
</div>
<div id="calendar">
  <table>
    <tr style="font-size: 12px;text-align: center;">
      <td></td>
      <td></td>
      <td class="event">
        <p class="m">Monthly event</p>
      </td>
      <td class="event">
        <p class="c">Class session</p>
      </td>
      <td class="event">
        <p class="w">Weekly event</p>
      </td>
    </tr>
    {% for week in weeks %}
    <tr>
      {% for day,occurrences in week %}
      <td style="vertical-align:top;{% if day %} border: 1px gray solid{% endif %}">
        <div class="events{% if not day %} empty{% endif %}">
          <div class="day d{{ forloop.counter0 }}">
            <div class="mini-month">{{ current_date|date:"n/" }}</div>{{ day }}
          </div>
          {% for occurrence in occurrences %}
          <p class="event">
            <b>{{ occurrence.start|date:"f a" }}</b>
            {% if occurrence.event %}{# actual event #}
            <a class="{{ occurrence.event.repeat|slice:":1"|default_if_none:"n" }}" href="{{ occurrence.get_absolute_url }}">{{ occurrence.short_name }}</a>
            {% else %}{# course.short_name #}
            <a class="c" href="{{ occurrence.get_absolute_url }}">{{ occurrence.short_name }}</a>
            {% endif %}
          </p>
          {% endfor %}
        </div>
      </td>
      {% endfor %}
    </tr>
    {% endfor %}
  </table>
</div>
{% endblock %}
