{% set today = date() %}

<link href="/css/foundation-datepicker.css" rel="stylesheet" type="text/css" />

<style>
.enrollment-report-model {
    border-color: red;
    border-radius: 1rem;
    border-width: 0.15rem;
	padding: 1.5rem;
	width: 95%;
}
.enrollment-report-model, 
.enrollment-report-model h2, 
.enrollment-report-model .form-text {
	background: #ffffff none repeat scroll 0 0;
	font-family: "Raleway",sans-serif !important;
	font-size: 0.9rem;
	font-weight: normal;
	line-height: 1rem;
	color: #6d6e70 !important;
}
.enrollment-report-form-container {
    border-radius: 5px;
    margin-bottom: 1rem;
    margin-top: 1rem;
    padding: 1rem;
}
.error-message {
	display: block;
}
.enrollment-report-model h2 {
    display: inline;
    font-size: 2rem;
    padding: 0.5rem;
    z-index: 100;
}
.enrollment-report-logo {
	vertical-align: middle;
	width: 5rem;
}
.enrollment-report-model select,
.enrollment-report-model select option,
.enrollment-report-model input[type="text"],
small.error {
    margin-left: auto;
    margin-right: auto;
    width: 15rem;
    max-width:15rem;
    height: 1.5rem;
    font-size: 1.2rem;
}

.close {
	background: #ff0000 none repeat scroll 0 0;
    border-radius: 12px !important;
    box-shadow: 1px 1px 3px #000 !important;
    color: #fffff0 !important;
    font-size: 1rem !important;
    font-weight: bold !important;
    line-height: 25px !important;
    position: absolute !important;
    right: -13px !important;
    text-align: center !important;
    text-decoration: none !important;
    top: -13px !important;
    width: 24px !important;
    -moz-box-shadow: 1px 1px 3px #000 !important;
	-webkit-box-shadow: 1px 1px 3px #000 !important;
	-webkit-border-radius: 12px !important;
	-moz-border-radius: 12px !important;
}
.close:hover {
	background: #ffb2b2 none repeat scroll 0 0;
	color: #FF0000 !important; 
}
select:required:invalid {
  color: gray;
}
option[value=""][disabled] {
  display: none;
}
option {
  color: black;
}

::-webkit-input-placeholder {  color: #6d6e70 !important; font-size: 1.2rem; }
:-moz-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
::-moz-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
:-ms-input-placeholder { color: #6d6e70 !important; font-size: 1.2rem; }
</style>

<script type="text/javascript" charset="utf-8">         
$(document).ready(function(){
	
	$(document).on('closed.fndtn.reveal', '[data-reveal]', function () {
		parent.table.destroy();
		document.location.href = '/enrollment-reporting-tool';
	});
	
});	
	
</script>
        					
<div id="enrollment-ap-training-detail-report-modal" class="enrollment-report-model reveal-modal large-12 small-12 medium-12 columns" data-reveal data-reveal-init data-options="close_on_background_click:false; close_on_esc: false; multiple_opened:true;">
	<a class="close-reveal-modal close">X</a>
	<div align="center" style="margin:1rem;"><h2 id="report_title">AP Training Detail Report</h2></div>
	
	
		<div class="content-wrap">
			<section>
			    <div class="panel-body">	
					<!-- Content Table -->
					<table id="report-3" class="display" cellspacing="0" width="100%">  
						  <thead>
						    <tr id="columns">
						    	<th>id</th>
						    	<th>instrctr_person_id</th>
                   				<th>instrctr_first_nm</th>
                   				<th>instrctr_last_nm</th>
								<th>trng_site_nm</th>
								<th>trng_site_addr1</th>
								<th>trng_site_city</th>
								<th>trng_site_state</th>
								<th>trng_site_zip</th>
								<th>delivery_typ</th>
								<th>student_fisrtname</th>
								<th>student_lastname</th>
								<th>student_address</th>
								<th>student_city</th>
								<th>student_state</th>
								<th>student_zip_code</th>
								<th>student_email</th>
								<th>student_main_phone</th>
								<th>student_gender</th>
								<th>student_birth_dt</th>
								<th>course_nm</th>
								<th>course_code</th>
								<th>course_valid</th>
								<th>crs_num</th>
								<th>trng_end_date</th>
							</tr>
							
						  </thead>
					</table>
				</div>
		    </section>
		    <!-- <div id="processing" class="PopupPanel"><img src="/images/processing.gif"></div> -->
		</div>							    	
</div>