{% extends "cms/home.html" %}
{% load cms_tags danceschool_tags sekizai_tags static i18n %}

{% block content %}

{% page_url 'directions' as directions_url %}
{% page_url 'calendar' as calendar_url %}

<div class="row">

<div class="col-md-12 top-col">
	{% block top %}
		{% static_placeholder 'registration_top' %}
	{% endblock %}
</div>

<div class="col-md-12 content-col">

{% block coming_soon %}
	{% if not allSeries and not allEvents %}
		<h2>{% trans "More Classes and Events Coming Soon!" %}</h2>
		<p>Our upcoming classes have not yet been posted, but don't worry, they will be posted here soon!  Check back soon for more information.</p>
		{% if calendar_url %}<p>In the meantime, check out our <a href="{{ calendar_url }}">calendar</a> for more information about our past and current classes.</p>{% endif %}
	{% elif not allSeries %}
		<h2>{% trans "More Classes Coming Soon!" %}</h2>
		<p>Our upcoming classes have not yet been posted, but don't worry, they will be posted here soon!  Check back soon for more information.</p>
		{% if calendar_url %}<p>In the meantime, check out our <a href="{{ calendar_url }}">calendar</a> for more information about our past and current classes.</p>{% endif %}
	{% endif %}
{% endblock %}

{% if allSeries or allEvents %}

{% block registration_form %}
<form id="classregform" name="input" action="" method="post">
    {% csrf_token %}
    {{ form.voucher_id }}

    {% block door_reg %}
	    {% if perms.core.accept_door_payments %}
	    <div class="alert alert-info" role="alert">
		    <h4>{% trans "Is this a door/invoice registration?" %}<br />
		    <small>({% trans "to be filled out only by school staff" %})</small>
		    </h4>
		    <p>{% trans "This is a door/invoice registration" %} {{ form.payAtDoor }}</p>
	    </div>
	    {% endif %}
    {% endblock %}
    
    <div id="classes">
        <div id="validation">
            {{ form.non_field_errors }}
        </div>

        {# List of Special Upcoming Class Series with Open Registration #}
        {% block special_series %}
		{% if specialSeries %}
			<h2>{% trans "Register Now: Special Upcoming Classes" %}</h2>
			<hr />
		{% regroup specialSeries|dictsort:"month" by month as open_list %}
			{% for month in open_list %}
			<div class="classmonth">
				<input class="btn" type="submit" value="{% trans 'Register now' %} &raquo;" />
	            <h3>{{ month.grouper|readable_month }} {% trans "Class Series" %}</h3>
				<div class="table serieslist">
				{% regroup month.list|dictsort:"weekday" by weekday as weekday_list %}
					{% for weekday in weekday_list %}
						<div class="weekdaygroup">
						<div class="weekday">
							<div><h3>{% readable_weekday weekday.grouper %}s</h3></div>
						</div>
						<div class="weekdaycontents">
							{% for event in weekday.list %}


							<a name="{{ event.slug }}"></a>
	                        <table class="series" id="eventtable_{{ event.id}}">
	                            <tr>
	                                <th class="time">
										<h4>{{ event.startTime|date:"g:i A" }} - <br />
										{{ event.endTime|date:"g:i A" }} </h4>
									</th>
	                                <td class="info">
	                                    <h3 class="title">{{ event.name }}</h3>
	                                    <h4>
										{% if event.teachers %}
											{% trans "with" %} {{ event.teachers|join:" &amp; "}}
										{% endif %}

										at
											{% if directions_url %}
											<a href = "{{ directions_url }}#{{ event.location.name|slugify }}">
												{{ event.location.name }}
											</a>
											{% else %}
												{{ event.location.name }}
											{% endif %}

	                                        {% if event.url %}<small><a href="{{ event.url }}">{% trans "more info" %}</a></small>{% endif %}
	                                    </h4>
	                                    <div class="pricinginfo">
											<a class="pricingPopover seriestype" data-container="body" data-toggle="popover" data-placement="bottom" title="<strong>{{ event.pricingTier.name }}</strong" data-html="true" data-content="<em>{% trans 'Pre-Registered' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.onlineGeneralPrice|floatformat:2 }}<br />{% trans 'Students' %}: {{ currencySymbol }}{{ event.pricingTier.onlineStudentPrice|floatformat:2 }}<br /><br /><em>{% trans 'At the Door' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.doorGeneralPrice|floatformat:2 }}<br />{% trans 'Students' %}: {{ currencySymbol }}{{ event.pricingTier.doorStudentPrice|floatformat:2 }}<br />">{{ event.pricingTier.name }}:</a>
										</div>
	                                    <div class="dates">
										{% for occurrence in event.eventoccurrence_set.all reversed %}
											{% if occurrence.startTime.date == occurrence.endTime.date and event.numOccurrences == 1 %}
												{{ occurrence.startTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.startTime|date:"D. N d, g:i A" }}
											{% endif %}
											-
											{% if occurrence.startTime.date == occurrence.endTime.date %}
												{{ occurrence.endTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.endTime|date:"D. N d, g:i A" }}
											{% endif %}<br />
										{% endfor %}
										</div>
										{% get_field_for_object 'event' event.id form as field %}
	                                    <div class="leadfollow">
	                                        <div class="leadfollow-options">
	                                        	{{ field }}
	                                        </div>
	                                    </div>
	                                    {% if validationStr %}
											<div colspan="2" class="checkboxvalidation">
												{{ field.errors }}
											</div>
	                                    {% endif %}
	                                </td>
	                            </tr>
	                        </table>

							{% if event.soldOut %}
								<div class="SoldOut">
									{% trans "Sold Out!" %}
								</div>
								<div class="SoldOutSub">
									{% trans "Please join us for another class, another month, or schedule a private lesson!" %}
								</div>
							{% endif %}

							{% endfor %}
						</div>
						</div>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		{% endif %}
		{% endblock %}

        {# List of Class Series with Open Registration #}

        {% block reg_open_series %}
		{% if regOpenSeries %}
			<h2>{% trans "Register Now: Upcoming Class Series" %}</h2>
			<hr />
		{% regroup regOpenSeries|dictsort:"month" by month as open_list %}
			{% for month in open_list %}
			<div class="classmonth">
				<input class="btn" type="submit" value="{% trans 'Register now' %} &raquo;" />
	            <h3>{{ month.grouper|readable_month }} {% trans "Class Series" %}</h3>
				<div class="table serieslist">
				{% regroup month.list|dictsort:"weekday" by weekday as weekday_list %}
					{% for weekday in weekday_list %}
						<div class="weekdaygroup">
						<div class="weekday">
							<div><h3>{% readable_weekday weekday.grouper %}s</h3></div>
						</div>
						<div class="weekdaycontents">
							{% for event in weekday.list %}
							<a name="{{ event.slug }}"></a>
	                        <table class="series" id="eventtable_{{ event.id}}">
	                            <tr>
	                                <th class="time">
										<h4>{{ event.startTime|date:"g:i A" }} - <br />
										{{ event.endTime|date:"g:i A" }} </h4>
									</th>
	                                <td class="info">
	                                    <h3 class="title">{{ event.name }}</h3>
	                                    <h4>
										{% if event.teachers %}
											{% trans "with" %} {{ event.teachers|join:" &amp; "}}
										{% endif %}

										at
											{% if directions_url %}
											<a href = "{{ directions_url }}#{{ event.location.name|slugify }}">
												{{ event.location.name }}
											</a>
											{% else %}
												{{ event.location.name }}
											{% endif %}

	                                        {% if event.url %}<small><a href="{{ event.url }}">{% trans "more info" %}</a></small>{% endif %}
	                                    </h4>
	                                    <div class="pricinginfo">
											<a class="pricingPopover seriestype" data-container="body" data-toggle="popover" data-placement="bottom" title="<strong>{{ event.pricingTier.name }}</strong" data-html="true" data-content="<em>{% trans 'Pre-Registered' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.onlineGeneralPrice|floatformat:2 }}<br />Students: {{ currencySymbol }}{{ event.pricingTier.onlineStudentPrice|floatformat:2 }}<br /><br /><em>{% trans 'At the Door' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.doorGeneralPrice|floatformat:2 }}<br />{% trans 'Students' %}: {{ currencySymbol }}{{ event.pricingTier.doorStudentPrice|floatformat:2 }}<br />">{{ event.pricingTier.name }}:</a>
										</div>
	                                    <div class="dates">
										{% for occurrence in event.eventoccurrence_set.all reversed %}
											{{ occurrence.startTime|date:"N j"}}{% if not forloop.last %}, {% endif %}
										{% endfor %}
										</div>
										{% get_field_for_object 'event' event.id form as field %}
	                                    <div class="leadfollow">
	                                        <div class="leadfollow-options">
	                                        	{{ field }}
	                                        </div>
	                                    </div>
	                                    {% if validationStr %}
											<div colspan="2" class="checkboxvalidation">
												{{ field.errors }}
											</div>
	                                    {% endif %}
	                                </td>
	                            </tr>
	                        </table>

							{% if event.soldOut %}
								<div class="SoldOut">
									{% trans "Sold Out!" %}
								</div>
								<div class="SoldOutSub">
									{% trans "Please join us for another class, another month, or schedule a private lesson!" %}
								</div>
							{% endif %}

							{% endfor %}
						</div>
						</div>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		{% endif %}
		{% endblock %}


        {# List of Upcoming Public Events with Open Registration #}

        {% block reg_open_events %}
		{% if regOpenEvents %}
			<h2>{% trans "Register Now: Upcoming Events" %}</h2>
			<hr />
		{% regroup regOpenEvents|dictsort:"month" by month as open_list %}
			{% for month in open_list %}
			<div class="classmonth">
				<input class="btn" type="submit" value="Register now &raquo;" />
	            <h3>{{ month.grouper|readable_month }} {% trans "Events" %}</h3>
				<div class="table serieslist">
					{% for event in month.list %}
						<div class="weekdaygroup">
							<div class="weekday">
								<div><h3>{% if event.numOccurrences > 1 %}{% trans "Begins" %} {% endif %}{{ event.firstOcccurrenceTime|date:"N d" }}</h3></div>
							</div>
							<div class="weekdaycontents">
							<a name="{{ event.slug }}"></a>
	                        <table class="series" id="eventtable_{{ event.id}}">
	                            <tr>
	                                <th class="time">
										<h4>{{ event.startTime|date:"g:i A" }} - <br />
										{{ event.endTime|date:"g:i A" }} </h4>
									</th>
	                                <td class="info">
	                                    <h3 class="title">{{ event.name }}</h3>
	                                    <h4>
										{% if event.teachers %}
											{% trans "with" %} {{ event.teachers|join:" &amp; "}}
										{% endif %}

										at
											{% if directions_url %}
											<a href = "{{ directions_url }}#{{ event.location.name|slugify }}">
												{{ event.location.name }}
											</a>
											{% else %}
												{{ event.location.name }}
											{% endif %}

	                                        {% if event.url %}<small><a href="{{ event.url }}">{% trans "more info" %}</a></small>{% endif %}
	                                    </h4>
	                                    <div class="pricinginfo">
											<a class="pricingPopover seriestype" data-container="body" data-toggle="popover" data-placement="bottom" title="<strong>{{ event.pricingTier.name }}</strong" data-html="true" data-content="<em>{% trans 'Pre-Registered' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.onlineGeneralPrice|floatformat:2 }}<br />{% trans 'Students' %}: {{ currencySymbol }}{{ event.pricingTier.onlineStudentPrice|floatformat:2 }}<br /><br /><em>{% trans 'At the Door' %}</em><br />{% trans 'General' %}: {{ currencySymbol }}{{ event.pricingTier.doorGeneralPrice|floatformat:2 }}<br />{% trans 'Students' %}: {{ currencySymbol }}{{ event.pricingTier.doorStudentPrice|floatformat:2 }}<br />">{{ event.pricingTier.name }}:</a>
										</div>
	                                    <div class="dates">
										{% for occurrence in event.eventoccurrence_set.all reversed %}
											{% if occurrence.startTime.date == occurrence.endTime.date and event.numOccurrences == 1 %}
												{{ occurrence.startTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.startTime|date:"D. N d, g:i A" }}
											{% endif %}
											-
											{% if occurrence.startTime.date == occurrence.endTime.date %}
												{{ occurrence.endTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.endTime|date:"D. N d, g:i A" }}
											{% endif %}<br />
										{% endfor %}
										</div>
										{% get_field_for_object 'event' event.id form as field %}
	                                    <div class="leadfollow">
	                                        <div class="leadfollow-options">
	                                        	{{ field }}
	                                        </div>
	                                    </div>
	                                    {% if validationStr %}
											<div colspan="2" class="checkboxvalidation">
												{{ field.errors }}
											</div>
	                                    {% endif %}
	                                </td>
	                            </tr>
	                        </table>

							{% if event.soldOut %}
								<div class="SoldOut">
									{% trans "Sold Out!" %}
								</div>
								<div class="SoldOutSub">
								{% trans "Please join us at our next event!" %}
								</div>
							{% endif %}
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		{% endif %}
		{% endblock %}

        {# List of Upcoming Public Events without Registration #}

        {% block reg_closed_events %}
		{% if regClosedEvents %}
			<h2>{% trans "Upcoming Events (No Registration Required)" %}</h2>
			<hr />
		{% regroup regClosedEvents|dictsort:"month" by month as open_list %}
			{% for month in open_list %}
			<div class="classmonth">
	            <h3>{{ month.grouper|readable_month }} {% trans "Events" %}</h3>
				<div class="table serieslist">
					{% for event in month.list %}
						<div class="weekdaygroup">
							<div class="weekday">
								<div><h3>{% if event.numOccurrences > 1 %}{% trans "Begins" %} {% endif %}{{ event.firstOcccurrenceTime|date:"N d" }}</h3></div>
							</div>
							<div class="weekdaycontents">
							<a name="{{ event.slug }}"></a>
	                        <table class="series" id="eventtable_{{ event.id}}">
	                            <tr>
	                                <th class="time">
										<h4>{{ event.startTime|date:"g:i A" }} - <br />
										{{ event.endTime|date:"g:i A" }} </h4>
									</th>
	                                <td class="info">
	                                    <h3 class="title">{{ event.name }}</h3>
	                                    <h4>
										{% if event.teachers %}
											{% trans "with" %} {{ event.teachers|join:" &amp; "}}
										{% endif %}

										at
											{% if directions_url %}
											<a href = "{{ directions_url }}#{{ event.location.name|slugify }}">
												{{ event.location.name }}
											</a>
											{% else %}
												{{ event.location.name }}
											{% endif %}

	                                        {% if event.url %}<small><a href="{{ event.url }}">{% trans "more info" %}</a></small>{% endif %}
	                                    </h4>
	                                    <div class="dates">
										{% for occurrence in event.eventoccurrence_set.all reversed %}
											{% if occurrence.startTime.date == occurrence.endTime.date and event.numOccurrences == 1 %}
												{{ occurrence.startTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.startTime|date:"D. N d, g:i A" }}
											{% endif %}
											-
											{% if occurrence.startTime.date == occurrence.endTime.date %}
												{{ occurrence.endTime|date:"g:i A" }}
											{% else %}
												{{ occurrence.endTime|date:"D. N d, g:i A" }}
											{% endif %}<br />
										{% endfor %}
										</div>
	                                </td>
	                            </tr>
	                        </table>
							</div>
						</div>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		{% endif %}
		{% endblock %}

        {# List of Ongoing Class Series with Closed Registration #}

        {% block reg_closed_series %}
		{% if regClosedSeries %}
			<h2>{% trans "Ongoing Series (Registration Closed)" %}</h2>
			<hr />
		{% regroup regClosedSeries|dictsort:"month" by month as open_list %}
			{% for month in open_list %}
			<div class="classmonth">
	            <h3>{{ month.grouper|readable_month }} {% trans "Class Series" %}</h3>
				<div class="table serieslist">
				{% regroup month.list|dictsort:"weekday" by weekday as weekday_list %}
					{% for weekday in weekday_list %}
						<div class="weekdaygroup">
						<div class="weekday">
							<div><h3>{% readable_weekday weekday.grouper %}s</h3></div>
						</div>
						<div class="weekdaycontents">
							{% for event in weekday.list %}


							<a name="{{ event.slug }}"></a>
	                        <table class="series" id="eventtable_{{ event.id}}">
	                            <tr>
	                                <th class="time">
										<h4>{{ event.startTime|date:"g:i A" }} - <br />
										{{ event.endTime|date:"g:i A" }} </h4>
									</th>
	                                <td class="info">
	                                    <h3 class="title">{{ event.name }}</h3>
	                                    <h4>
										{% if event.teachers %}
											{% trans "with" %} {{ event.teachers|join:" &amp; "}}
										{% endif %}

										at
											{% if directions_url %}
											<a href = "{{ directions_url }}#{{ event.location.name|slugify }}">
												{{ event.location.name }}
											</a>
											{% else %}
												{{ event.location.name }}
											{% endif %}

	                                        {% if event.url %}<small><a href="{{ event.url }}">{% trans "more info" %}</a></small>{% endif %}
	                                    </h4>
	                                    <div class="dates">
										{% for occurrence in event.eventoccurrence_set.all reversed %}
											{{ occurrence.startTime|date:"N j"}}{% if not forloop.last %}, {% endif %}
										{% endfor %}
										</div>
	                                    <div class="leadfollow">
	                                        <div class="leadfollow-options">
	                                        	<ul>
	                                        	{% for role in event.availableRoles %}
													<li>{{ role.pluralName }} ({% numRegisteredForRole event role  %} {% trans "registered" %})</li>
												{% empty %}
													<li>({{ event.numRegistered }} {% trans "registered" %})</li>
												{% endfor %}
												</ul>
		                                        {% if perms.core.override_register_closed %}
													{% get_field_for_object 'event' event.id form as field %}
		                                        	{{ field }}
				                                    {% if validationStr %}
													<div colspan="2" class="checkboxvalidation">
														{{ field.errors }}
													</div>
				                                    {% endif %}
			                                    {% endif %}
		                                    </div>
	                                    </div>
	                                </td>
	                            </tr>
	                        </table>
							{% endfor %}
						</div>
						</div>
					{% endfor %}
				</div>
			</div>
			{% endfor %}
		{% endif %}
		{% endblock %}

    </div>
</form>
{% endblock %}

</div>
</div>

{% block content_js %}
	{% addtoblock "js" %}
	<script type="text/javascript" src="{% static 'ekko-lightbox/ekko-lightbox.min.js' %}"></script>
	<script type="text/javascript">
	$(document).delegate('*[data-toggle="lightbox"]', 'click', function(event) {
	    event.preventDefault();
	    $(this).ekkoLightbox();
	});
	</script>
	{% endaddtoblock %}

	{% addtoblock "js" %}
		<script type="text/javascript">
		$( document ).ready(function() {
			$('.pricingPopover').popover();	
		});
		</script>
	{% endaddtoblock %}
{% endblock %}

{% block content_css %}
	{% addtoblock "css" %}
		<style type="text/css">
		/* This CSS is used (and included) only on the class registration page */

		/* Registration stuff */

		#classes #validation {
		    color: #db2d25;
		    font-size: large;
		}

		#classes .classmonth {
		    position: relative;
		}

		#classes .classmonth>.btn {
		    position: absolute;
		    top: 0px;
		    right: 0px;
		}

		#classes .series {
		    margin-bottom: 12px;
		    display: inline-block;
		    padding-left: 15px;
		    width: 100%;
		}

		#classes .series div, #classes .series div {
		    border: 0;
		    padding: 0;
		    margin: 0;
		    vertical-align: top;
		}

		#classes .series .time {
		    vertical-align: top;
		    white-space: nowrap;
		    width: 1px;
		}

		#classes .series .seriestype {
		    font-weight: 700;
		    font-size: 1.15em;
		    border-bottom: 1px dotted #ccc;
		}

		#classes .series .dates {
		    float: left;
		}

		#classes .series .leadfollow {
		    float: right;
		    margin-top: 10px;
		    width: 200px;
		    font-size: 16px;
		}

		.leadfollow-options {
		    padding-left: 20px;
		}

		.leadfollow-options ul {
		    list-style-type: none;
		    padding-left: 0;
		}

		#classes .series .checkboxvalidation {
		    color: #db2d25;
		    clear: both;
		    float: right;
		}
		/* Class summary */

		.classregsummary {
		    width: 100%;
		}

		#classes .weekdaygroup {
		    display: inline-table;
		    width: 100%;
		}

		#classes .weekday {
		    width: 28px;
		    padding: 0;
		    margin: 0;
		    border: 0;
		    background-color: #85a2b2;
		    border-left: 1px solid #477087;
		    border-bottom: 1px dotted #ddd;
		    display: table-cell;
		}

		#classes .weekday div {
		    position: relative;
		    min-height: 165px;
		}

		#classes .weekday div h3 {
		    -webkit-transform: rotate(-90deg);
		    -moz-transform: rotate(-90deg);
		    position: absolute;
		    display: block;
		    width: 75px;
		    top: 30px;
		    left: -25px;
		    direction: rtl;
		    color: white;
		    font-size: 20px;
		    font-weight: bold;
		    white-space: nowrap;
		}

		#classes .weekdaycontents {
		    display: table-cell;
		    vertical-align: top;
		    border-top: 1px dotted #ddd;
		}

		#classes .weekdaycontents h3 {
		    margin-top: 5px;
		}

		#classes .series .info {
		    width: 100%;
		}


		#aboutus .bio img, #retired .bio img {
		    padding-right: 7px;
		    padding-bottom: 3px;
		    float: left;
		}

		.SoldOut {
		     text-align: center;
		     color:red; 
		     font-size: large;
		}
		.SoldOutSub {
		     text-align: center;
		     color:red; 
		}

		#classregform h4 {
		    font-size: 18px;
		}

		#classregform h3.title {
		    font-size: 22px;
		}


		@media screen and (max-width:767px) {
		    #classes .weekdaygroup {
		        border-left: 1px dotted #ddd;
		        border-right: 1px dotted #ddd;
		        border-bottom: 1px dotted #ddd;
		    }

		    #classes .weekday {
		        width: 100%;
		        border-bottom: 1px solid #477087;
		        border-left: none;
		        display: table-row;
		    }
		    #classes .weekday div {
		        position: relative;
		        height: 28px;
		        min-height: 0;
		        display: table-cell;
		    }

		    #classes .weekday div h3 {
		        -webkit-transform: none;
		        -moz-transform: none;
		        direction: inherit;
		        position: inherit;
		        display: block;
		        top: inherit;
		        left: inherit;
		        font-size: 20px;
		        margin: 5px 10px;

		    }

		    #classes .weekdaycontents {
		        display: table-row;
		    }

		    #classes .series {
		        width: 100%;
		        margin-bottom: 10px;
		        padding-left: 10px;
		    }

		    #classes .series .time {
		        padding-left: 0;
		    }

		    #classes .series .info {
		        padding-right: 10px;
		    }
		}

		@media screen and (max-width:479px) {
		    #classes .series .leadfollow {
		        float: left;
		    }
		}
	</style>
	{% endaddtoblock %}
{% endblock %}
{% endif %}

{% endblock %}