{% extends 'modal_base.html' %}
{% load forms %}
{% block icon %}<i class="fa fa-map-marker"></i>{% endblock %}
{% block modal_body %}
  <form class="form-horizontal">
    <div class="form-group">
      <label class="control-label col-sm-3">Category</label>
      <div class="col-sm-8" ng-show="editing.category == 'Discharged'">
        <p>
          [[ editing.category ]] &nbsp; 
          <button class="btn" ng-click="undischarge()">Undischarge</button>
        </p>
      </div>
      <div class="col-sm-8" ng-hide="editing.category && editing.category == 'Discharged' || episode_category_list.indexOf(editing.category) == -1">
        <select class="form-control" ng-model="editing.category" autofocus>
          <option value="">---------</option>
          <option ng-repeat="category in episode_category_list">[[category]]</option>
        </select>
      </div>
      <div class="col-sm-8" ng-show="episode_category_list.indexOf(editing.category) == -1 && editing.category != 'Discharged'">
        <p>[[ editing.category ]]</p>
      </div>
    </div>

    <div class="form-group" ng-hide="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Hospital</label>
      <div class="col-sm-8">
        <select class="form-control" ng-model="editing.hospital">
          <option value="">---------</option>
          <option ng-repeat="hospital in hospital_list">[[hospital]]</option>
          <option>Other</option>
        </select>
      </div>
    </div>

    <div class="form-group" ng-show="hospital_list.indexOf(editing.hospital) == -1" ng-hide="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Hospital - other</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="editing.hospital">
      </div>
    </div>

    <div class="form-group" ng-hide="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Ward</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="editing.ward">
      </div>
    </div>

    <div class="form-group" ng-hide="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Bed</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="editing.bed">
      </div>
    </div>

    <div class="form-group">
      <label class="control-label col-sm-3">Date of admission</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="episode.date_of_admission" bs-datepicker>
      </div>
    </div>

    <!-- OPAT Only fields -->
    <div class="form-group" ng-show="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Date of referral to OPAT</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="editing.opat_referral" bs-datepicker>
      </div>
    </div>    
    <div class="form-group" ng-show="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Referring consultant</label>
      <div class="col-sm-8">
	<input class="form-control" type="text" ng-model="editing.opat_referral_consultant" >
      </div>
    </div>    
    {% input label="Referring team" model="editing.opat_referral_team" show="editing.category=='OPAT'" %}
    </div>    
    <div class="form-group" ng-show="editing.category == 'OPAT'">
      <label class="control-label col-sm-3">Referring team address</label>
      <div class="col-sm-8">
	<textarea class="form-control" ng-model="editing.opat_referral_team_address" rows="5"></textarea>
      </div>
    </div>
    
  </form>
{% endblock %}
