{% extends 'modal_base.html' %}
{% load forms %}
{% block icon_name %}fa fa-users{% endblock %}
{% block modal_body %}
<form name="demographicsForm" class="form-horizontal">
  <div class="form-group">
    <label class="control-label col-sm-3">Hospital number</label>
    <div class="col-sm-8">
	  <input class="form-control" type="text" ng-model="editing.hospital_number" autofocus>
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-3">NHS number</label>
    <div class="col-sm-8">
	  <input class="form-control" type="text" ng-model="editing.nhs_number">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-3">Name</label>
    <div class="col-sm-8">
	  <input class="form-control" type="text" ng-model="editing.name">
    </div>
  </div>
  <div class="form-group">
    <label class="control-label col-sm-3">Date of birth</label>
    <div class="col-sm-8">
	  <input class="form-control" type="text"
             name="date_of_birth"
             ng-model-options="{ updateOn: 'blur' }"
	         ng-model="editing.date_of_birth"
             ng-model="editing.demographics.date_of_birth"
	         ng-pattern="/^(0?[1-9]|[12][0-9]|3[01])\/(0?[1-9]|1[012])\/(\d{4})$/"
	         placeholder="dd/mm/yyyy" />
      <span class="help-block" ng-show="demographicsForm.date_of_birth.$invalid">
        Date of Birth must be dd/mm/yyyy
      </span>
    </div>
  </div>
  {% select label="Gender" model="editing.gender" lookuplist="gender_list" %}
  {% input label="Country of Birth" model="editing.country_of_birth" lookuplist="destination_list" %}
  {% input label="Ethnicity" model="editing.ethnicity" lookuplist="ethnicity_list" %}

</form>
{% endblock %}
{% block modal_save %}
<button class="btn btn-primary" ng-disabled="demographicsForm.date_of_birth.$invalid" ng-click="save('save')">
  <i class="fa fa-save"></i>
  Save
</button>
{% endblock %}
