{% for eventType in events %}
<form method="get" action="{{ eventType[0].regFormUrl }}" id="{{ eventType[0].guid }}">
	<input type="hidden" name="{{ settings.eventIdField }}" value="{{ eventType[0].eventId }}">
	<div class="ds-event-dates-container">
		<h2 class="ds-event-dates-title">{{ eventType[0].title }}</h2>
		<div class="col-md-9">
			<div class="col-md-2">
				{% if eventType[0].isImage %}
					<img style="width: 100%;" src="{{ eventType[0].user1 }}">
					<br />
					<br />
				{% endif %}
				{% if eventType[0].description is not empty %} {# !$datedescription? #}
					<span class="ds-event-dates-description">{{ eventType[0].description }}</span><br>
				{% endif %}
				{% if eventType[0].price is not empty %}
					<h5  class="ds-event-dates-price"><strong>Price:</strong> {{ eventType[0].price }}</h5>
					<br />
				{% endif %}
			</div>
			<div class="col-md-7">
				{% if eventType|length > 1 %}
				<h4>Available Dates</h4>
					{% for key, event in eventType %}
						{% set disabled = "" %}
						{% if event.soldOut %}{% set disabled = "disabled" %}{% endif %}
				<div style="width:290px;padding-bottom:20px;">
					<input id="{{ event.guid }}_reg_link_{{ key }}" name="{{ settings.eventDateIdField }}" type="radio" value="{{ event.guid }}" {{ disabled }}>
					<label for="{{ event.guid }}_reg_link_{{ key }}">
						<div style="margin-top:-25px;margin-left: 25px;">

							<strong>{{ event.start_date|date("l, F j, Y") }}<br/>{% if event.pretty_time is not empty %}{{ event.pretty_time }}{% else %}
								{{ event.start_date|date('g:ia') }} - {{ event.end_date|date('g:ia') }}
							{% endif %}</strong><br/>
									
							{% if event.soldOut %}<span class="ds-event-dates-sold-out-text">SOLD OUT</span><br>{% endif %}
							
							{% if event.description is not empty %}{{ event.description }}<br/>{% endif %}
							
							{% if event.venue_name is not empty %}{{ event.venue_name }}<br/>{% endif %}
							
							{% if event.venue_address is not empty %}{{ event.venue_address }}{% endif %}
						</div>
					</label>
				</div>
					{% endfor %}
				<button type="submit" class="ds-register-button" OnClick="return checkDateSelection('{{ settings.eventDateIdField }}')">Register Now</button>
				
				{% else %}
				{% set event = eventType[0] %}
				<div style="width:290px;padding-bottom:20px;">
					
					<input type="hidden" name="{{ settings.eventDateIdField }}" value="{{ event.guid }}">
					<strong>
						{{ event.start_date|date("l, F j, Y") }}
						<br>
						{% if event.pretty_time is not empty %}
							{{ event.pretty_time }}
						{% else %}
							{{ event.start_date|date("g:ia") }} - {{ event.end_date|date("g:ia") }}
						{% endif %}
					</strong>
					<br>
					
					{% if event.description is not empty %}{{ event.description }}<br/>{% endif %}
								
					{% if event.venue_name is not empty %}{{ event.venue_name }}<br/>{% endif %}
					
					{% if event.venue_address is not empty %}{{ event.venue_address }}{% endif %}

				</div>
					{% if event.soldOut %}
				<span class="ds-sold-out">Sold Out</span>
					{% else %}
				<button class="ds-register-button" type="submit">Register Now</button>
					{% endif %}
					
				{% endif %}
			</div>		
		</div>
	</div>
</form>
<script>
	function checkDateSelection(radio) {
		var dateSelectionRadio = document.getElementsByName(radio);
		var ischecked_method = false;
		for ( var i = 0; i < dateSelectionRadio.length; i++) {
		    if(dateSelectionRadio[i].checked) {
		        ischecked_method = true;
		    }
		}
		if(!ischecked_method)   { //payment method button is not checked
		    alert("Please choose a date first");
		    return false;
		}
		return true;
	}
</script>
{% endfor %}