{% load forms %}
<div class="row" ng-if="state == 'initial'">
    <div class="col-sm-8">
      <h4>Hospital number</h4>
      <input required autofocus class="form-control" type="text"
             ng-model="demographics.hospital_number"
             ng-keypress="$event.keyCode == 13 && lookup_hospital_number()"
             />
      <br />
      <a class="btn btn-lg btn-primary" ng-click="lookup_hospital_number()">
        <i class="fa fa-search"></i>
        Search
      </a>
      <br />
      <p>
        If we already have your patient on the system, we can pull their
        details for you
      </p>
    </div>
</div>

<!-- Editing demographics state -->
<div class="row" ng-if="state == 'editing_demographics'">
  <div class="row">
    <div class="col-md-12">
      <form class="form-horizontal">
        <div class="form-group">
          <label class="control-label col-sm-3">Hospital</label>
                <label class="control-label col-sm-8 text-left">
                  [[ demographics.hospital_number ]]
                </label>
        </div>
        {% input "autofocus" field="Demographics.first_name" model="demographics.first_name" %}
        {% input field="Demographics.surname" model="demographics.surname" %}
        {% date_of_birth_field model_name="demographics.date_of_birth" %}
        {% select field="Demographics.sex" model="demographics.sex" %}
      </form>
    </div>
  </diV>
</div>
<span ng-if="state === 'has_demographics'">
<div class="row">
  <div class="col-sm-8">
    <div class="row">
      <div class="col-md-4">
        <b>Hospital #[[ demographics.hospital_number ]]</b>
      </div>
      <div class="col-md-8">
        [[ demographics.hospital_number ]]
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <b>Name</b>
      </div>
      <div class="col-md-8">
        [[ demographics.first_name ]]
        [[ demographics.surname ]]
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <b>Date of Birth</b>
      </div>
      <div class="col-md-8">
        [[ demographics.date_of_birth | displayDate ]]
      </div>
    </div>
    <div class="row">
      <div class="col-md-4">
        <b>Gender</b>
      </div>
      <div class="col-md-8">
        [[ demographics.sex ]]
      </div>
    </div>
    <br />
  </div>
  </div>
</span>
