{% load crispy_forms_tags %}
<style>

.datepicker {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  border: 2px solid black;
  padding: 2px;
}
.datepicker-inline {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  border: 2px solid black;
  padding: 2px;
}

.datepicker-dropdown:before {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  border: 2px solid black;
}
.datepicker-dropdown:after {
  position: absolute;
  background-color: #ffffff;
  z-index: 999;
  border: 2px solid black;
}
</style>
<div align="center" style='font-size="18px"; font-weight: bold; font-variant: small-caps;' id="formpurpose">Use this form to create a new student record.</div><br/>
<form id="mainform" method="POST" enctype="multipart/form-data" > 
  <!-- mainform.html -->
    <!-- Security token -->
    {% csrf_token %} 
    <div class="container align-top" >
    	<div class="row align-top">
        <div class="col">
        <table id="leftdetailstable">
        	<tr valign="top"><td>
        		<table><tr><td>
        <span class="label">Id &nbsp; </span>
      </td><td><span class="field">{{data.id}}<input name="id"  value="{{data.id}}" type="hidden"/></span></td><td>
      	<span class="label">Cohort &nbsp; </span></td><td><span class="field"><input name="cohort" size="18" value="{{data.cohort}}"  /></span>
      </td></tr>
      <tr><td><span class="label">First Name &nbsp; </span></td><td><span class="field"><input name="first_name"  value="{{data.first_name}}" size="15"/></span></td>
       
       <td><span class="label">Last Name &nbsp; </span></td><td><span class="field"><input name="last_name"  value="{{data.last_name}}" size="15"/></span></td></tr>
        <tr><td><span class="label">Middle </span></td><td><span class="field"><input name="middle_name"  value="{{data.middle_name}}" size="10"/></span></td>
      	<td><span class="label">Email &nbsp; </span></td><td><span class="field"><input name="email_addr"  value="{{data.email_addr}}"  /></span></td>
      	
      	</tr>
      	
        <tr><td><span class="label">Address &nbsp; &nbsp; &nbsp; </span></td><td colspan="3"><span class="field"><input name="street_address"  value="{{data.street_address}}" size="30" /></span></td></tr>
      <tr><td><span class="label">City</span></td><td>
      	<span class="field"><input name="city"  value="{{data.city}}" size="19"/></span></td>
      	<td><span class="label">State </span></td><td><span class="field"><input name="state"  value="{{data.state}}"  /></span>
        </td>
      	
      	</tr>
        <tr><td colspan="2"> &nbsp; </td><td>
      <span class="label">Zip &nbsp; &nbsp; </span></td><td><span class="field"><input name="zipcode"  value="{{data.zipcode}}" size="10"/></span></td></tr>
      	<tr><td>
      <span class="label">Country </span></td><td><span class="field"><input name="country"  value="{{data.country}}" size="15" /></span></td>
      	<td><span class="label">School &nbsp; </span></td><td><span class="field"><input name="school"  value="{{data.school}}"  /></span>
        
      	</td></tr>
      	
        <tr><td><span class="label">Start Date &nbsp;</span></td><td><span class="field"><input size="10" name="start_date" id="start_date" value="{{data.start_date|date:'SHORT_DATE_FORMAT'}}"  /></span><div id="start_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div>   
				</td><td><span class="label">Graduation Date &nbsp; </span></td><td><span class="field"><input size="10" name="graduation_date" id="graduation_date" value="{{data.graduation_date|date:'SHORT_DATE_FORMAT'}}"  /></span><div id="graduation_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div>
			</td>
		</tr>
		<tr><td colspan="2"> &nbsp; </td><td>
				<span class="label">Graduated &nbsp; </span></td><td><span class="field"><input name="graduated" id="graduated" type="checkbox" class="checkboxclass" value="{{data.graduated}}"  /></span>
				
				</td></tr>
				
				<tr><td colspan="4"><hr vspace="10"/></td></tr>
			  <tr><td><span class="label">Paid in full </span></td><td><span class="field"><input id="paid_in_full" name="paid_in_full"  value="{{data.paid_in_full}}" type="checkbox" class="checkboxclass"/></span></td>
			<td><span class="label">Payment Amount Due &nbsp; </span></td><td><span class="field"><input id="payment_amount_due" name="payment_amount_due"  value="{{data.payment_amount_due}}" size="10"/></span></td></tr>
        
				<tr><td><span class="label">Invoice Reference </span></td><td><span class="field"><input name="invoice_number" id="invoice_number" value="{{data.invoice_number}}" size="6"/></span></td>
      <td><span class="label">Next Due Date &nbsp; </span></td><td><span class="field"><input size="10" name="next_due_date" id="next_due_date" value="{{data.next_due_date|date:'SHORT_DATE_FORMAT'}}"  /></span><div id="next_due_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div>
        </td></tr>
       <tr valign="top" class="tablerow" border="1"><td valign="top" ><span class="textarealabel">Invoice notes &nbsp; </span></td><td colspan="3"><span class="field"><textarea rows="4" cols="50" name="invoice_notes" id="invoice_notes">{{data.invoice_notes}}</textarea></span>
        </td></tr>	
        
        <tr valign="top" class="tablerow" ><td valign="top" ><span class="textarealabel">FLAGGED &nbsp; </span></td>
          	<td colspan="3"><span class="field">
          	<select name="flag" id="flag">
          		<option value="0" {% if not data.flag %} selected="selected" {% endif %} >Not Flagged</option>
          		<option value="10" {% if data.flag > 0 %} selected="selected" {% endif %} >Flagged</option>
          		</select>
          </span>
         
        </td></tr>
        
			</table></td></tr></table>
				<br/>
		<br/><hr/>
    <span id="bottomsavespan">No changes to save</span>
        </div>
        <div class="col">
        <table border="0"  id="rightdetailstable">
        <tr><td colspan="2"><br/><br/><span class="textarealabel">Comments &nbsp; </span><span class="field"><textarea name="student_comments" rows="3" cols="30">{{data.student_comments}}</textarea></span></td></tr>
        <tr><td><span class="label">Pmt Type &nbsp; </span><span class="field"><input size="10" name="payment_type"  value="{{data.payment_type}}"  /></span></td>
        <td><span class="label">Delivery Method &nbsp; </span><span class="field"><input size="10" name="delivery_method"  value="{{data.delivery_method}}"  /></span></td></tr>
        <tr><td colspan="2"><span class="label">Inactive &nbsp; </span><span class="field"><input id="inactive" name="inactive"  value="{{data.inactive}}" type="checkbox" class="checkboxclass"/></span></td></tr>
        <tr><td ><span class="label billingtooltip">LOA ?&nbsp; &nbsp; <span class="billingtooltiptext">Leave of Absence</span></span><span class="field"><input id="leave_of_absence" name="leave_of_absence"  value="{{data.leave_of_absence}}" type="checkbox" class="checkboxclass"/></span> 
      </td><td>
        <span class="label">Leave of abscence date &nbsp; </span><span class="field"><input name="leave_of_absence_date"  id="leave_of_absence_date" value="{{data.leave_of_absence_date|date:'SHORT_DATE_FORMAT'}}" size="10"/></span><div id="leave_of_absence_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div>
      </td></tr>
        
        <tr><td ><span class="label">Withdrew? &nbsp; </span><span class="field"><input id="withdrew" name="withdrew" value="{{data.withdrew}}" type="checkbox" class="checkboxclass"/></span>
        	</td><td><span class="label">Withdrawal date &nbsp; </span><span class="field"><input size="10" name="withdrawal_date" id="withdrawal_date" value="{{data.withdrawal_date|date:'SHORT_DATE_FORMAT'}}"</span><div id="withdrawal_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div>
      </td></tr>
      <tr><td>
        <span class="label">Suspended? &nbsp; </span><span class="field"><input name="suspended" id="suspended" type="checkbox" class="checkboxclass" value="{{data.suspended}}"  /></span><br/>
        </td><td><span class="label">Suspended date &nbsp; </span><span class="field"><input name="suspension_date" size="10" id="suspension_date" value="{{data.suspension_date|date:'SHORT_DATE_FORMAT'}}"  /></span><div id="suspension_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div><br/>
      </td></tr>
        <tr><td>
        <span class="label">On Extension &nbsp; </span><span class="field"><input type="checkbox" class="checkboxclass" name="on_extension" id="on_extension" value="{{data.on_extension}}"  /></span><br/>
      </td><td><span class="label">Extension Start Date &nbsp; </span><span class="field"><input size="10" name="extension_start_date" id="extension_start_date" value="{{data.extension_start_date|date:'SHORT_DATE_FORMAT'}}"  /></span><div id="extension_start_date-picker" class="md-form md-outline input-with-post-icon datepicker"></div><br/>   
				
        </td></tr>
        <tr><td><span class="label">In group &nbsp; </span><span class="field"><input name="in_group" id="in_group" type="checkbox" class="checkboxclass" value="{{data.in_group}}"  /></span>
        </td><td>
        <span class="label">Group name &nbsp; </span><span class="field"><input name="group_name"  value="{{data.group_name}}"  /></span>
        </td></tr>
        <tr><td colspan="2"><span class="label">Sponsored &nbsp; </span><span class="field"><input name="sponsored" id="sponsored" type="checkbox" class="checkboxclass" value="{{data.sponsored}}"  /></span></td></tr>
         <tr><td colspan="2"><span class="label">Sponsor contact &nbsp; </span><span class="field"><input name="sponsor_contact"  value="{{data.sponsor_contact}}"  /></span><br/>
         <tr><td colspan="2"><span class="label">Sponsor full address &nbsp; </span><span class="field"><input name="sponsor_full_address"  value="{{data.sponsor_full_address}}"  /></span>
          <tr><td ><span class="label">Sponsor email &nbsp; </span><span class="field"><input name="sponsor_email"  value="{{data.sponsor_email}}"  /></span>
         </td><td><span class="label">Sponsor phone &nbsp; </span><span class="field"><input name="sponsor_phone"  value="{{data.sponsor_phone}}"  /></span>
       </tr>
         <tr><td colspan="2">
         <span class="textarealabel">Sponsorship Note &nbsp; </span><span class="field"><textarea name="sponsorship_note" cols="40" rows="3">{{data.sponsorship_note}}</textarea></span>
         </td></tr>
         <tr><td colspan="2">
         <span class="textarealabel">Other Notes &nbsp; </span><span class="field"><textarea name="student_notes" cols="40" rows="3">{{data.student_notes}}</textarea></span>
        </td></tr></table>
        </div>
			</div>
			
		</div>	
				<input type="hidden" id="action" name="action" value="save" />
				<!--
				<div id="datetimepicker12"></div>
			  {{ form.graduation_date|as_crispy_field }} -->
</form>