From 67f5c1839d9ec6589eb929b4a99fdede12b48391 Mon Sep 17 00:00:00 2001
From: "valeria.lecca" <valeria.lecca>
Date: Mon, 13 Oct 2014 17:21:43 +0200
Subject: [PATCH] api web demo

---
 examples/most/static/js/demo/exam.js               |  98 ++++++++++++
 examples/most/static/js/demo/section.js            |  58 +++++++
 examples/most/static/js/demo/visit.js              | 108 +++++++++++++
 examples/most/templates/base_modal.html            |  18 +++
 examples/most/templates/exams/base_modal.html      |  10 --
 examples/most/templates/exams/demo.html            | 144 ++++++++++++++++--
 examples/most/templates/exams/exam.html            |  11 +-
 .../most/templates/exams/exam/add_section.html     | 158 +++++++++++++++++--
 examples/most/templates/exams/exam/delete.html     | 120 +++++++++++++--
 examples/most/templates/exams/exam/get_info.html   | 119 +++++++++++++--
 .../most/templates/exams/exam/list_sections.html   | 119 +++++++++++++--
 examples/most/templates/exams/exam/new.html        |  78 ++++++++--
 .../most/templates/exams/exam/remove_section.html  | 138 +++++++++++++++--
 examples/most/templates/exams/exam/search.html     |  77 ++++++++--
 .../most/templates/exams/exam/set_clinician.html   | 165 ++++++++++++++++++--
 examples/most/templates/exams/section.html         |  11 +-
 examples/most/templates/exams/section/delete.html  | 108 +++++++++++--
 .../most/templates/exams/section/get_info.html     | 107 +++++++++++--
 examples/most/templates/exams/section/new.html     |  78 ++++++++--
 examples/most/templates/exams/section/search.html  |  77 ++++++++--
 examples/most/templates/exams/visit.html           |  11 +-
 examples/most/templates/exams/visit/add_exam.html  | 168 +++++++++++++++++++--
 examples/most/templates/exams/visit/delete.html    | 118 +++++++++++++--
 .../most/templates/exams/visit/get_full_info.html  | 117 ++++++++++++--
 examples/most/templates/exams/visit/get_info.html  | 117 ++++++++++++--
 .../most/templates/exams/visit/list_exams.html     | 117 ++++++++++++--
 examples/most/templates/exams/visit/new.html       |  78 ++++++++--
 .../most/templates/exams/visit/remove_exam.html    | 161 ++++++++++++++++++--
 examples/most/templates/exams/visit/search.html    |  77 ++++++++--
 .../templates/exams/visit/set_parent_visit.html    | 166 ++++++++++++++++++--
 src/most/web/exams/models.py                       |   3 +-
 31 files changed, 2693 insertions(+), 242 deletions(-)
 create mode 100644 examples/most/static/js/demo/exam.js
 create mode 100644 examples/most/static/js/demo/section.js
 create mode 100644 examples/most/static/js/demo/visit.js
 create mode 100644 examples/most/templates/base_modal.html
 delete mode 100644 examples/most/templates/exams/base_modal.html

diff --git a/examples/most/static/js/demo/exam.js b/examples/most/static/js/demo/exam.js
new file mode 100644
index 0000000..464b3ae
--- /dev/null
+++ b/examples/most/static/js/demo/exam.js
@@ -0,0 +1,98 @@
+/*!
+ * Project MOST - Moving Outcomes to Standard Telemedicine Practice
+ * http://most.crs4.it/
+ *
+ * Copyright 2014, CRS4 srl. (http://www.crs4.it/)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * See license-GPLv2.txt or license-MIT.txt
+ */
+
+$(function() {
+    $('#exam_func_1').click(function(){
+        console.log('in exam_func_1 click event');
+        $( '#api-launcher' ).load('/exam/new/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_2').click(function(){
+        console.log('in exam_func_2 click event');
+        $( '#api-launcher' ).load('/exam/edit/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_3').click(function(){
+        console.log('in exam_func_3 click event');
+        $( '#api-launcher' ).load('/exam/delete/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_4').click(function(){
+        console.log('in exam_func_4 click event');
+        $( '#api-launcher' ).load('/exam/search/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_5').click(function(){
+        console.log('in exam_func_5 click event');
+        $( '#api-launcher' ).load('/exam/get_info/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_6').click(function(){
+        console.log('in exam_func_6 click event');
+        $( '#api-launcher' ).load('/exam/list_sections/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_7').click(function(){
+        console.log('in exam_func_7 click event');
+        $( '#api-launcher' ).load('/exam/add_section/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_8').click(function(){
+        console.log('in exam_func_8 click event');
+        $( '#api-launcher' ).load('/exam/remove_section/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#exam_func_9').click(function(){
+        console.log('in exam_func_9 click event');
+        $( '#api-launcher' ).load('/exam/set_clinician/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
diff --git a/examples/most/static/js/demo/section.js b/examples/most/static/js/demo/section.js
new file mode 100644
index 0000000..b240514
--- /dev/null
+++ b/examples/most/static/js/demo/section.js
@@ -0,0 +1,58 @@
+/*!
+ * Project MOST - Moving Outcomes to Standard Telemedicine Practice
+ * http://most.crs4.it/
+ *
+ * Copyright 2014, CRS4 srl. (http://www.crs4.it/)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * See license-GPLv2.txt or license-MIT.txt
+ */
+
+$(function() {
+    $('#section_func_1').click(function(){
+        console.log('in section_func_1 click event');
+        $( '#api-launcher' ).load('/section/new/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#section_func_2').click(function(){
+        console.log('in section_func_2 click event');
+        $( '#api-launcher' ).load('/section/edit/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#section_func_3').click(function(){
+        console.log('in section_func_3 click event');
+        $( '#api-launcher' ).load('/section/delete/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#section_func_4').click(function(){
+        console.log('in section_func_4 click event');
+        $( '#api-launcher' ).load('/section/search/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#section_func_5').click(function(){
+        console.log('in section_func_5 click event');
+        $( '#api-launcher' ).load('/section/get_info/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
diff --git a/examples/most/static/js/demo/visit.js b/examples/most/static/js/demo/visit.js
new file mode 100644
index 0000000..326fca6
--- /dev/null
+++ b/examples/most/static/js/demo/visit.js
@@ -0,0 +1,108 @@
+/*!
+ * Project MOST - Moving Outcomes to Standard Telemedicine Practice
+ * http://most.crs4.it/
+ *
+ * Copyright 2014, CRS4 srl. (http://www.crs4.it/)
+ * Dual licensed under the MIT or GPL Version 2 licenses.
+ * See license-GPLv2.txt or license-MIT.txt
+ */
+
+$(function() {
+    $('#visit_func_1').click(function(){
+        console.log('in visit_func_1 click event');
+        $( '#api-launcher' ).load('/visit/new/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_2').click(function(){
+        console.log('in visit_func_2 click event');
+        $( '#api-launcher' ).load('/visit/edit/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_3').click(function(){
+        console.log('in visit_func_3 click event');
+        $( '#api-launcher' ).load('/visit/delete/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_4').click(function(){
+        console.log('in visit_func_4 click event');
+        $( '#api-launcher' ).load('/visit/search/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_5').click(function(){
+        console.log('in visit_func_5 click event');
+        $( '#api-launcher' ).load('/visit/get_info/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_6').click(function(){
+        console.log('in visit_func_6 click event');
+        $( '#api-launcher' ).load('/visit/get_full_info/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_7').click(function(){
+        console.log('in visit_func_7 click event');
+        $( '#api-launcher' ).load('/visit/list_exams/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_8').click(function(){
+        console.log('in visit_func_8 click event');
+        $( '#api-launcher' ).load('/visit/add_exam/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_9').click(function(){
+        console.log('in visit_func_9 click event');
+        $( '#api-launcher' ).load('/visit/remove_exam/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
+
+$(function() {
+    $('#visit_func_10').click(function(){
+        console.log('in visit_func_10 click event');
+        $( '#api-launcher' ).load('/visit/set_parent_visit/', {'caller':$( this ).text()}, function() {
+            console.log('loaded');
+            $( '#api-launcher' ).modal().show();
+        })
+    });
+});
diff --git a/examples/most/templates/base_modal.html b/examples/most/templates/base_modal.html
new file mode 100644
index 0000000..4759d8a
--- /dev/null
+++ b/examples/most/templates/base_modal.html
@@ -0,0 +1,18 @@
+<div class="modal-dialog">
+  <div class="modal-content">
+    <div class="modal-header">
+      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
+      <h4 class="modal-title" id="api-launcher-title">
+        {{ api_description }}
+      </h4>
+    </div>
+    <div class="modal-body" id="api-launcher-body">
+      {% block modal_body %}
+      {% endblock %}
+    </div>
+    <div class="modal-footer">
+      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
+      <!--<button type="button" class="btn btn-primary">Submit</button>-->
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/examples/most/templates/exams/base_modal.html b/examples/most/templates/exams/base_modal.html
deleted file mode 100644
index 19a0fbd..0000000
--- a/examples/most/templates/exams/base_modal.html
+++ /dev/null
@@ -1,10 +0,0 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
diff --git a/examples/most/templates/exams/demo.html b/examples/most/templates/exams/demo.html
index 19a0fbd..31c3c99 100644
--- a/examples/most/templates/exams/demo.html
+++ b/examples/most/templates/exams/demo.html
@@ -1,10 +1,136 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base.html" %}
+{% block title %}MOST WEB EXAMPLES{% endblock %}
+{% block content %}
+<h1>WEB API EXAMPLE</h1>
+<div class="panel-group" id="accordion">
+  <!-- Nav tabs -->
+  <ul class="nav nav-pills">
+    <li class="active"><a href="#home" data-toggle="pill">Home</a></li>
+    <li><a href="#task_group" data-toggle="pill">Section</a></li>
+    <li><a href="#most_user" data-toggle="pill">Exam</a></li>
+    <li><a href="#clinician_user" data-toggle="pill">Visit</a></li>
+  </ul>
 
-</body>
-</html>
\ No newline at end of file
+  <!-- Tab panes -->
+  <div class="tab-content">
+    <div class="tab-pane fade in active" id="home">
+      <div class="row clearfix">
+        <div class="col-md-12 column">
+          <div class="panel">
+            <div class="panel-body">
+              To access to API do login
+              <a class="btn btn-default btn-lg" href="#api-launcher" data-toggle="modal" id="login" role="button">/user/login/</a>
+              <a class="btn btn-default btn-lg" href="#api-launcher" data-toggle="modal" id="logout" role="button">/user/logout/</a>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="section">
+      <div class="row clearfix">
+        <div class="col-md-6 column">
+          <div class="panel">
+            <div class="panel-heading">
+              <h3 class="panel-title">Section API</h3>
+            </div>
+            <div class="panel-body">
+              <div class=" btn-group-vertical">
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="section_func_1" role="button">/section/new/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="section_func_2" role="button">/section/(?P&lt;section_id&gt;\d+)/edit/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="section_func_3" role="button">/section/(?P&lt;section_id&gt;\d+)/delete/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="section_func_4" role="button">/section/search/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="section_func_5" role="button">/section/(?P&lt;section_id&gt;\d+)/get_info/</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 column">
+          <div class="panel panel-success" id="section_results">
+            <div class="panel-heading">
+              <h3 class="panel-title">Results</h3>
+            </div>
+            <div class="panel-body" id="section_results_body"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="exam">
+      <div class="row clearfix">
+        <div class="col-md-6 column">
+          <div class="panel">
+            <div class="panel-heading">
+              <h3 class="panel-title">Exam API</h3>
+            </div>
+            <div class="panel-body">
+              <div class=" btn-group-vertical">
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_1" role="button" >/exam/new/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_2" role="button">/exam/(?P&lt;exam_id&gt;\d+)/edit/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_3" role="button">/exam/(?P&lt;exam_id&gt;\d+)/delete/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_4" role="button">/exam/search/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_5" role="button">/exam/(?P&lt;exam_id&gt;\d+)/get_info/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_6" role="button">/exam/(?P&lt;exam_id&gt;\d+)/list_sections/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_7" role="button">/exam/(?P&lt;exam_id&gt;\d+)/add_section/(?P&lt;section_id&gt;\d+)/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_8" role="button">/exam/(?P&lt;exam_id&gt;\d+)/remove_section/(?P&lt;section_id&gt;\d+)/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="exam_func_9" role="button">/exam/(?P&lt;exam_id&gt;\d+)/set_clinician/(?P<user_id>\d+)/</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 column">
+          <div class="panel panel-success" id="exam_results">
+            <div class="panel-heading">
+              <h3 class="panel-title">Results</h3>
+            </div>
+            <div class="panel-body" id="mexam_results_body"></div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="tab-pane fade" id="visit">
+      <div class="row clearfix">
+        <div class="col-md-6 column">
+          <div class="panel">
+            <div class="panel-heading">
+              <h3 class="panel-title">Visit API</h3>
+            </div>
+            <div class="panel-body">
+              <div class=" btn-group-vertical">
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_1" role="button">/visit/new/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_2" role="button">/visit/(?P&lt;visit_id&gt;\d+)/edit/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_3" role="button">/visit/(?P&lt;visit_id&gt;\d+)/delete/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_4" role="button">/visit/search/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_5" role="button">/visit/(?P&lt;visit_id&gt;\d+)/get_info/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_6" role="button">/visit/(?P&lt;visit_id&gt;\d+)/get_full_info/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_7" role="button">/visit/(?P&lt;visit_id&gt;\d+)/list_exams/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_8" role="button">/visit/(?P&lt;visit_id&gt;\d+)/add_exam/(?P&lt;exam_id&gt;\d+)/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_9" role="button">/visit/(?P&lt;visit_id&gt;\d+)/remove_exam/(?P&lt;exam_id&gt;\d+)/</a>
+                <a class="btn btn-default btn-api" href="#api-launcher" data-toggle="modal" id="visit_func_10" role="button">/visit/(?P&lt;visit_id&gt;\d+)/set_parent_visit/(?P&lt;parent_visit_id&gt;\d+)/</a>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="col-md-6 column">
+          <div class="panel panel-success" id="visit_results">
+            <div class="panel-heading">
+              <h3 class="panel-title">Results</h3>
+            </div>
+            <div class="panel-body" id="visit_results_body">
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+  <div class="col-md-12 column">
+    <div class="modal fade" id="api-launcher" role="dialog" aria-labelledby="API Launcher" aria-hidden="true">
+
+    </div>
+  </div>
+</div>
+{% endblock %}
+{% block script %}
+<script src="/static/js/demo/exam.js"></script>
+<script src="/static/js/demo/section.js"></script>
+<script src="/static/js/demo/visit.js"></script>
+<script src="/static/js/demo/demo.js"></script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam.html b/examples/most/templates/exams/exam.html
index 19a0fbd..94d9808 100644
--- a/examples/most/templates/exams/exam.html
+++ b/examples/most/templates/exams/exam.html
@@ -1,10 +1 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base.html" %}
diff --git a/examples/most/templates/exams/exam/add_section.html b/examples/most/templates/exams/exam/add_section.html
index 19a0fbd..3886f1c 100644
--- a/examples/most/templates/exams/exam/add_section.html
+++ b/examples/most/templates/exams/exam/add_section.html
@@ -1,10 +1,150 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>  <!--col-sm-4-->
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="ui-widget form-group" id="section_field">
+          <label for="select_section" class="control-label">Select section</label>  <!--col-sm-4-->
+             <input id="select_section_id" type="hidden" />
+             <input class="form-control" id="select_section" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Add section</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/exam/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                   (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                   item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                   item.urgency.value + ' ' + item.state.value + ' ' +
+                                   (item.is_remote ? 'REMOTE ' : ' '),
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            summary: item.summary,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            clinician: item.clinician,
+                            is_active: item.is_active,
+                            is_remote: item.is_remote
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_exam" ).val( ui.item.label );
+            $( "#select_exam_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#select_section" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/section/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: item.name,
+                            value: item.id,
+                            name: item.name,
+                            is_active: item.is_active
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_section" ).val( ui.item.label );
+            $( "#select_section_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_section" ).autocomplete( "option", "appendTo", "#section_field" );
+
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/' + $( "#select_exam_id" ).val() + '/add_section/' + $( "#select_section_id" ).val() + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#task_group_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/delete.html b/examples/most/templates/exams/exam/delete.html
index 19a0fbd..51e815e 100644
--- a/examples/most/templates/exams/exam/delete.html
+++ b/examples/most/templates/exams/exam/delete.html
@@ -1,10 +1,112 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>  <!--col-sm-4-->
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Delete exam</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/exam/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                       (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                       item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                       item.urgency.value + ' ' + item.state.value + ' ' +
+                                       (item.is_remote ? 'REMOTE ' : ' '),
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                summary: item.summary,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                clinician: item.clinician,
+                                is_active: item.is_active,
+                                is_remote: item.is_remote
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_exam" ).val( ui.item.label );
+                $( "#select_exam_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }
+        });
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/' + $( "#exam_field_id" ).val() + '/delete/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/get_info.html b/examples/most/templates/exams/exam/get_info.html
index 19a0fbd..9430d30 100644
--- a/examples/most/templates/exams/exam/get_info.html
+++ b/examples/most/templates/exams/exam/get_info.html
@@ -1,10 +1,111 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Get exam info</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/exam/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                       (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                       item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                       item.urgency.value + ' ' + item.state.value + ' ' +
+                                       (item.is_remote ? 'REMOTE ' : ' '),
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                summary: item.summary,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                clinician: item.clinician,
+                                is_active: item.is_active,
+                                is_remote: item.is_remote
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_exam" ).val( ui.item.label );
+                $( "#select_exam_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/' + $( "#select_exam_id" ).val() + '/get_info/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/list_sections.html b/examples/most/templates/exams/exam/list_sections.html
index 19a0fbd..525a12f 100644
--- a/examples/most/templates/exams/exam/list_sections.html
+++ b/examples/most/templates/exams/exam/list_sections.html
@@ -1,10 +1,111 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Get exam info</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/exam/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                       (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                       item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                       item.urgency.value + ' ' + item.state.value + ' ' +
+                                       (item.is_remote ? 'REMOTE ' : ' '),
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                summary: item.summary,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                clinician: item.clinician,
+                                is_active: item.is_active,
+                                is_remote: item.is_remote
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_exam" ).val( ui.item.label );
+                $( "#select_exam_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/' + $( "#select_exam_id" ).val() + '/list_sections/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/new.html b/examples/most/templates/exams/exam/new.html
index 19a0fbd..ab07ca3 100644
--- a/examples/most/templates/exams/exam/new.html
+++ b/examples/most/templates/exams/exam/new.html
@@ -1,10 +1,70 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        {% for field in form.visible_fields %}
+          <div class="form-group">
+            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
+            {{ field }}
+          </div>
+        {% endfor %}
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Create exam</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+      $( "div.form-group > input" ).addClass( 'form-control' );
+      $( "select" ).addClass( 'form-control' );
 
-</body>
-</html>
\ No newline at end of file
+      $( "#modal_form").submit(function (event) {
+          event.preventDefault();
+          $.ajax({
+              url: '/exams/exam/new/',
+              type: 'POST',
+              dataType: 'text',
+              data: $( "#modal_form").serialize(),
+              success: function (data, textStatus, jqXHR) {
+                  var jsonData = JSON.parse(data);
+                  var beautifiedData = JSON.stringify(jsonData, null, 4);
+                  $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                  if (jsonData.success) {
+                      if ($('#exam_results').hasClass('panel-danger')) {
+                          $('#exam_results').removeClass('panel-danger');
+                      }
+                      if (!$('#exam_results').hasClass('panel-success')) {
+                          $('#exam_results').addClass('panel-success');
+                      }
+                  }
+                  else {
+                      $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                      if ($('#exam_results').hasClass('panel-success')) {
+                          $('#exam_results').removeClass('panel-success');
+                      }
+                      if (!$('#exam_results').hasClass('panel-danger')) {
+                          $('#exam_results').addClass('panel-danger');
+                      }
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              },
+              error: function (jqXHR, textStatus, errorThrown) {
+                  $('#exam_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                  if ($('#exam_results').hasClass('panel-success')) {
+                      $('#exam_results').removeClass('panel-success');
+                  }
+                  if (!$('#exam_results').hasClass('panel-danger')) {
+                      $('#exam_results').addClass('panel-danger');
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              }
+          });
+          return false;
+      });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/remove_section.html b/examples/most/templates/exams/exam/remove_section.html
index 19a0fbd..18027a2 100644
--- a/examples/most/templates/exams/exam/remove_section.html
+++ b/examples/most/templates/exams/exam/remove_section.html
@@ -1,10 +1,130 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>  <!--col-sm-4-->
+            <input id="select_exam_id" type="hidden" />
+            <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <table class="table table-hover table-striped table-hover table-condensed" id="exam_sections">
+          <thead>
+            <tr>
+              <th>id</th>
+              <th>name</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/exam/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                   (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                   item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                   item.urgency.value + ' ' + item.state.value + ' ' +
+                                   (item.is_remote ? 'REMOTE ' : ' '),
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            summary: item.summary,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            clinician: item.clinician,
+                            is_active: item.is_active,
+                            is_remote: item.is_remote
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_exam" ).val( ui.item.label );
+            $( "#select_exam_id" ).val( ui.item.value );
+            $.ajax({
+                url: "/exams/exam/" + ui.item.value + "/list_sections/",
+                type: 'GET',
+                dataType: "json",
+                success: function( data ) {
+                    for (section in data.data) {
+                        $('#exam_sections tbody').append("<tr>" +
+                            "<td>" + data.id + "</td>" +
+                            "<td>" + data.name + "</td>" +
+                            "<td>" + data.is_active + "</td>" +
+                            "<button class="btn btn-danger" onclick="remove_section(" + ui.item.value + ", " + data.id + ")">Remove section</button>" +
+                            "</tr>"
+                        );
+                    }
+                }
+            });
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        function remove_section(exam_id, section_id) {
+            $.ajax({
+                url: '/exams/exam/' + exam_id + '/remove_section/' + section_id + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+        }
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/search.html b/examples/most/templates/exams/exam/search.html
index 19a0fbd..8361a72 100644
--- a/examples/most/templates/exams/exam/search.html
+++ b/examples/most/templates/exams/exam/search.html
@@ -1,10 +1,67 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="query-string" class="control-label">Query string</label>  <!--col-sm-4-->
+           <input class="form-control" id="query-string" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Search exam</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/search/',
+                type: 'GET',
+                data: {
+                    query_string: $( '#query-string' ).val()
+                },
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/exam/set_clinician.html b/examples/most/templates/exams/exam/set_clinician.html
index 19a0fbd..ba425e4 100644
--- a/examples/most/templates/exams/exam/set_clinician.html
+++ b/examples/most/templates/exams/exam/set_clinician.html
@@ -1,10 +1,157 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>  <!--col-sm-4-->
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="ui-widget form-group" id="clinician_field">
+          <label for="select_clinician" class="control-label">Select clinician</label>  <!--col-sm-4-->
+             <input id="select_clinician_id" type="hidden" />
+             <input class="form-control" id="select_clinician" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Set clinician</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_exam" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/exam/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                   (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                   item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                   item.urgency.value + ' ' + item.state.value + ' ' +
+                                   (item.is_remote ? 'REMOTE ' : ' '),
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            summary: item.summary,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            clinician: item.clinician,
+                            is_active: item.is_active,
+                            is_remote: item.is_remote
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_exam" ).val( ui.item.label );
+            $( "#select_exam_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#select_clinician" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/users/clinician_user/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: item.user.last_name + ' ' + item.user.first_name +
+                            (item.user.user_type.value ? ' [' + item.user.user_type.value + ']' : '') +
+                            (item.clinician_type ? (item.clinician_type.value ? ' - ' + item.clinician_type.value : '') +
+                            (item.is_health_care_provider ? ' - P' : '') : ''),
+                            value: item.user.id,
+                            first_name: item.user.first_name,
+                            last_name: item.user.last_name,
+                            user_type: item.user.user_type.value,
+                            clinician_type: item.clinician_type.value,
+                            specialization: item.specialization,
+                            is_health_care_provider: item.is_health_care_provider
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_clinician" ).val( ui.item.label );
+            $( "#select_clinician_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_clinician" ).autocomplete( "option", "appendTo", "#clinician_field" );
+
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/exam/' + $( "#select_exam_id" ).val() + '/set_clinician/' + $( "#select_clinician_id" ).val() + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/section.html b/examples/most/templates/exams/section.html
index 19a0fbd..94d9808 100644
--- a/examples/most/templates/exams/section.html
+++ b/examples/most/templates/exams/section.html
@@ -1,10 +1 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base.html" %}
diff --git a/examples/most/templates/exams/section/delete.html b/examples/most/templates/exams/section/delete.html
index 19a0fbd..05f8092 100644
--- a/examples/most/templates/exams/section/delete.html
+++ b/examples/most/templates/exams/section/delete.html
@@ -1,10 +1,100 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="section_field">
+          <label for="select_section" class="control-label">Select section</label>  <!--col-sm-4-->
+             <input id="select_section_id" type="hidden" />
+             <input class="form-control" id="select_section" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Delete section</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_section" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/section/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.name,
+                                value: item.id,
+                                name: item.name,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_section" ).val( ui.item.label );
+                $( "#select_section_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }
+        });
+        $( "#select_section" ).autocomplete( "option", "appendTo", "#section_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/section/' + $( "#section_field_id" ).val() + '/delete/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#section_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').removeClass('panel-danger');
+                        }
+                        if (!$('#section_results').hasClass('panel-success')) {
+                            $('#section_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#section_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#section_results').hasClass('panel-success')) {
+                            $('#section_results').removeClass('panel-success');
+                        }
+                        if (!$('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#section_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#section_results').hasClass('panel-success')) {
+                        $('#section_results').removeClass('panel-success');
+                    }
+                    if (!$('#section_results').hasClass('panel-danger')) {
+                        $('#section_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/section/get_info.html b/examples/most/templates/exams/section/get_info.html
index 19a0fbd..02f148c 100644
--- a/examples/most/templates/exams/section/get_info.html
+++ b/examples/most/templates/exams/section/get_info.html
@@ -1,10 +1,99 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="section_field">
+          <label for="select_section" class="control-label">Select section</label>
+             <input id="select_section_id" type="hidden" />
+             <input class="form-control" id="select_section" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Get section info</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_section" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/section/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.name,
+                                value: item.id,
+                                name: item.name,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_section" ).val( ui.item.label );
+                $( "#select_section_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_section" ).autocomplete( "option", "appendTo", "#section_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/section/' + $( "#select_section_id" ).val() + '/get_info/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#section_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').removeClass('panel-danger');
+                        }
+                        if (!$('#section_results').hasClass('panel-success')) {
+                            $('#section_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#section_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#section_results').hasClass('panel-success')) {
+                            $('#section_results').removeClass('panel-success');
+                        }
+                        if (!$('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#section_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#section_results').hasClass('panel-success')) {
+                        $('#section_results').removeClass('panel-success');
+                    }
+                    if (!$('#section_results').hasClass('panel-danger')) {
+                        $('#section_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/section/new.html b/examples/most/templates/exams/section/new.html
index 19a0fbd..1d7c0c2 100644
--- a/examples/most/templates/exams/section/new.html
+++ b/examples/most/templates/exams/section/new.html
@@ -1,10 +1,70 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        {% for field in form.visible_fields %}
+          <div class="form-group">
+            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
+            {{ field }}
+          </div>
+        {% endfor %}
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Create section</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+      $( "div.form-group > input" ).addClass( 'form-control' );
+      $( "select" ).addClass( 'form-control' );
 
-</body>
-</html>
\ No newline at end of file
+      $( "#modal_form").submit(function (event) {
+          event.preventDefault();
+          $.ajax({
+              url: '/exams/section/new/',
+              type: 'POST',
+              dataType: 'text',
+              data: $( "#modal_form").serialize(),
+              success: function (data, textStatus, jqXHR) {
+                  var jsonData = JSON.parse(data);
+                  var beautifiedData = JSON.stringify(jsonData, null, 4);
+                  $('#section_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                  if (jsonData.success) {
+                      if ($('#section_results').hasClass('panel-danger')) {
+                          $('#section_results').removeClass('panel-danger');
+                      }
+                      if (!$('#section_results').hasClass('panel-success')) {
+                          $('#section_results').addClass('panel-success');
+                      }
+                  }
+                  else {
+                      $('#section_results_body').html('<div>' + jsonData.errors + '</div>');
+                      if ($('#section_results').hasClass('panel-success')) {
+                          $('#section_results').removeClass('panel-success');
+                      }
+                      if (!$('#section_results').hasClass('panel-danger')) {
+                          $('#section_results').addClass('panel-danger');
+                      }
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              },
+              error: function (jqXHR, textStatus, errorThrown) {
+                  $('#section_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                  if ($('#section_results').hasClass('panel-success')) {
+                      $('#section_results').removeClass('panel-success');
+                  }
+                  if (!$('#section_results').hasClass('panel-danger')) {
+                      $('#section_results').addClass('panel-danger');
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              }
+          });
+          return false;
+      });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/section/search.html b/examples/most/templates/exams/section/search.html
index 19a0fbd..7fc9f77 100644
--- a/examples/most/templates/exams/section/search.html
+++ b/examples/most/templates/exams/section/search.html
@@ -1,10 +1,67 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="section_field">
+          <label for="query-string" class="control-label">Query string</label>  <!--col-sm-4-->
+           <input class="form-control" id="query-string" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Search section</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/section/search/',
+                type: 'GET',
+                data: {
+                    query_string: $( '#query-string' ).val()
+                },
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#section_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').removeClass('panel-danger');
+                        }
+                        if (!$('#section_results').hasClass('panel-success')) {
+                            $('#section_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#section_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#section_results').hasClass('panel-success')) {
+                            $('#section_results').removeClass('panel-success');
+                        }
+                        if (!$('#section_results').hasClass('panel-danger')) {
+                            $('#section_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#section_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#section_results').hasClass('panel-success')) {
+                        $('#section_results').removeClass('panel-success');
+                    }
+                    if (!$('#section_results').hasClass('panel-danger')) {
+                        $('#section_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit.html b/examples/most/templates/exams/visit.html
index 19a0fbd..94d9808 100644
--- a/examples/most/templates/exams/visit.html
+++ b/examples/most/templates/exams/visit.html
@@ -1,10 +1 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base.html" %}
diff --git a/examples/most/templates/exams/visit/add_exam.html b/examples/most/templates/exams/visit/add_exam.html
index 19a0fbd..16d09a0 100644
--- a/examples/most/templates/exams/visit/add_exam.html
+++ b/examples/most/templates/exams/visit/add_exam.html
@@ -1,10 +1,160 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>  <!--col-sm-4-->
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="ui-widget form-group" id="exam_field">
+          <label for="select_exam" class="control-label">Select exam</label>  <!--col-sm-4-->
+             <input id="select_exam_id" type="hidden" />
+             <input class="form-control" id="select_exam" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Add exam</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/visit/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                                label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                       ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                visit_type: item.visit_type,
+                                notes: item.notes,
+                                reason: item.reason,
+                                requesting_clinician: item.requesting_clinician,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                is_active: item.is_active
+                            }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_visit" ).val( ui.item.label );
+            $( "#select_visit_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#select_section" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/exam/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: (item.start_datetime ? ' [' + item.start_datetime : '') +
+                                   (item.end_datetime ? ' - ' + item.end_datetime + '] ' : '] ') +
+                                   item.clinician + item.medical_service.value + ' ' + item.speciality + ' ' +
+                                   item.urgency.value + ' ' + item.state.value + ' ' +
+                                   (item.is_remote ? 'REMOTE ' : ' '),
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            summary: item.summary,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            clinician: item.clinician,
+                            is_active: item.is_active,
+                            is_remote: item.is_remote
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_exam" ).val( ui.item.label );
+            $( "#select_exam_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_exam" ).autocomplete( "option", "appendTo", "#exam_field" );
+
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#select_visit_id" ).val() + '/add_exam/' + $( "#select_exam_id" ).val() + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#task_group_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').removeClass('panel-danger');
+                        }
+                        if (!$('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#exam_results').hasClass('panel-success')) {
+                            $('#exam_results').removeClass('panel-success');
+                        }
+                        if (!$('#exam_results').hasClass('panel-danger')) {
+                            $('#exam_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#exam_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#exam_results').hasClass('panel-success')) {
+                        $('#exam_results').removeClass('panel-success');
+                    }
+                    if (!$('#exam_results').hasClass('panel-danger')) {
+                        $('#exam_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/delete.html b/examples/most/templates/exams/visit/delete.html
index 19a0fbd..b968427 100644
--- a/examples/most/templates/exams/visit/delete.html
+++ b/examples/most/templates/exams/visit/delete.html
@@ -1,10 +1,110 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>  <!--col-sm-4-->
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Delete visit</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/visit/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                       ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                visit_type: item.visit_type,
+                                notes: item.notes,
+                                reason: item.reason,
+                                requesting_clinician: item.requesting_clinician,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_visit" ).val( ui.item.label );
+                $( "#select_visit_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }
+        });
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#visit_field_id" ).val() + '/delete/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/get_full_info.html b/examples/most/templates/exams/visit/get_full_info.html
index 19a0fbd..6f6e999 100644
--- a/examples/most/templates/exams/visit/get_full_info.html
+++ b/examples/most/templates/exams/visit/get_full_info.html
@@ -1,10 +1,109 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Get visit full info</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/visit/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                       ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                visit_type: item.visit_type,
+                                notes: item.notes,
+                                reason: item.reason,
+                                requesting_clinician: item.requesting_clinician,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_visit" ).val( ui.item.label );
+                $( "#select_visit_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#select_visit_id" ).val() + '/get_full_info/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/get_info.html b/examples/most/templates/exams/visit/get_info.html
index 19a0fbd..da3e5a9 100644
--- a/examples/most/templates/exams/visit/get_info.html
+++ b/examples/most/templates/exams/visit/get_info.html
@@ -1,10 +1,109 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Get visit info</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/visit/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                       ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                visit_type: item.visit_type,
+                                notes: item.notes,
+                                reason: item.reason,
+                                requesting_clinician: item.requesting_clinician,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_visit" ).val( ui.item.label );
+                $( "#select_visit_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#select_visit_id" ).val() + '/get_info/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/list_exams.html b/examples/most/templates/exams/visit/list_exams.html
index 19a0fbd..dcfc03f 100644
--- a/examples/most/templates/exams/visit/list_exams.html
+++ b/examples/most/templates/exams/visit/list_exams.html
@@ -1,10 +1,109 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">List exams</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+            source: function( request, response ) {
+                $.ajax({
+                    url: "/exams/visit/search/",
+                    dataType: "json",
+                    data: {
+                        query_string: request.term
+                    },
+                    success: function( data ) {
+                        response( $.map( data.data, function( item ) {
+                            return {
+                                label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                       ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                                value: item.id,
+                                medical_service: item.medical_service,
+                                speciality: item.speciality,
+                                urgency: item.urgency,
+                                state: item.state,
+                                visit_type: item.visit_type,
+                                notes: item.notes,
+                                reason: item.reason,
+                                requesting_clinician: item.requesting_clinician,
+                                start_datetime: item.start_datetime,
+                                end_datetime: item.end_datetime,
+                                is_active: item.is_active
+                            }
+                        }));
+                    }
+                });
+            },
+            minLength: 2,
+            select: function( event, ui ) {
+                $( "#select_visit" ).val( ui.item.label );
+                $( "#select_visit_id" ).val( ui.item.value );
+                return false;
+            },
+            open: function() {
+                $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+            },
+            close: function() {
+                $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+            }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#select_visit_id" ).val() + '/list_exams/',
+                type: 'GET',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/new.html b/examples/most/templates/exams/visit/new.html
index 19a0fbd..6ba1948 100644
--- a/examples/most/templates/exams/visit/new.html
+++ b/examples/most/templates/exams/visit/new.html
@@ -1,10 +1,70 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        {% for field in form.visible_fields %}
+          <div class="form-group">
+            <label for="{{ field.id_for_label }}" class="control-label">{{ field.label }}</label>
+            {{ field }}
+          </div>
+        {% endfor %}
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Create visit</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+      $( "div.form-group > input" ).addClass( 'form-control' );
+      $( "select" ).addClass( 'form-control' );
 
-</body>
-</html>
\ No newline at end of file
+      $( "#modal_form").submit(function (event) {
+          event.preventDefault();
+          $.ajax({
+              url: '/exams/visit/new/',
+              type: 'POST',
+              dataType: 'text',
+              data: $( "#modal_form").serialize(),
+              success: function (data, textStatus, jqXHR) {
+                  var jsonData = JSON.parse(data);
+                  var beautifiedData = JSON.stringify(jsonData, null, 4);
+                  $('#exam_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                  if (jsonData.success) {
+                      if ($('#visit_results').hasClass('panel-danger')) {
+                          $('#visit_results').removeClass('panel-danger');
+                      }
+                      if (!$('#visit_results').hasClass('panel-success')) {
+                          $('#visit_results').addClass('panel-success');
+                      }
+                  }
+                  else {
+                      $('#exam_results_body').html('<div>' + jsonData.errors + '</div>');
+                      if ($('#visit_results').hasClass('panel-success')) {
+                          $('#visit_results').removeClass('panel-success');
+                      }
+                      if (!$('#visit_results').hasClass('panel-danger')) {
+                          $('#visit_results').addClass('panel-danger');
+                      }
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              },
+              error: function (jqXHR, textStatus, errorThrown) {
+                  $('#visit_result_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                  if ($('#visit_results').hasClass('panel-success')) {
+                      $('#visit_results').removeClass('panel-success');
+                  }
+                  if (!$('#visit_results').hasClass('panel-danger')) {
+                      $('#visit_results').addClass('panel-danger');
+                  }
+                  $( '#api-launcher' ).modal('hide');
+              }
+          });
+          return false;
+      });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/remove_exam.html b/examples/most/templates/exams/visit/remove_exam.html
index 19a0fbd..95dde42 100644
--- a/examples/most/templates/exams/visit/remove_exam.html
+++ b/examples/most/templates/exams/visit/remove_exam.html
@@ -1,10 +1,153 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>  <!--col-sm-4-->
+            <input id="select_visit_id" type="hidden" />
+            <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <table class="table table-hover table-striped table-hover table-condensed" id="visit_exams">
+          <thead>
+            <tr>
+              <th>id</th>
+              <th>medical_service</th>
+              <th>speciality</th>
+              <th>urgency</th>
+              <th>state</th>
+              <th>start_datetime</th>
+              <th>end_datetime</th>
+              <th>clinician</th>
+              <th>is_active</th>
+              <th>is_remote</th>
+              <th>&nbsp;</th>
+            </tr>
+          </thead>
+          <tbody></tbody>
+        </table>
+        <!--<div class="ui-widget form-group" id="exam_field">-->
+          <!--<label for="select_exam" class="control-label">Select exam</label>  &lt;!&ndash;col-sm-4&ndash;&gt;-->
+             <!--<input id="select_exam_id" type="hidden" />-->
+             <!--<input class="form-control" id="select_exam" type="text" />-->
+        <!--</div>-->
+        <!--<div class="form-group">-->
+          <!--<div class="col-sm-offset-4 col-sm-8">-->
+             <!--<button type="submit" class="btn btn-default">Remove exam</button>-->
+          <!--</div>-->
+        <!--</div>-->
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/visit/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                   ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            visit_type: item.visit_type,
+                            notes: item.notes,
+                            reason: item.reason,
+                            requesting_clinician: item.requesting_clinician,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            is_active: item.is_active
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_visit" ).val( ui.item.label );
+            $( "#select_visit_id" ).val( ui.item.value );
+            $.ajax({
+                url: "/exams/visit/" + ui.item.value + "/list_exams/",
+                type: 'GET',
+                dataType: "json",
+                success: function( data ) {
+                    for (exam in data.data) {
+                        $('#visit_exams tbody').append("<tr>" +
+                            "<td>" + data.id + "</td>" +
+                            "<td>" + data.medical_service + "</td>" +
+                            "<td>" + data.speciality + "</td>" +
+                            "<td>" + data.urgency + "</td>" +
+                            "<td>" + data.state + "</td>" +
+                            "<td>" + data.start_datetime + "</td>" +
+                            "<td>" + data.end_datetime + "</td>" +
+                            "<td>" + data.clinician + "</td>" +
+                            "<td>" + data.is_active + "</td>" +
+                            "<td>" + data.is_remote + "</td>" +
+                            "<button class="btn btn-danger" onclick="remove_exam(" + ui.item.value + ", " + data.id + ")">Remove exam</button>" +
+                            "</tr>"
+                        );
+                    }
+                }
+            });
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        function remove_exam(visit_id, exam_id) {
+            $.ajax({
+                url: '/exams/visit/' + visit_id + '/remove_exam/' + exam_id + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+        }
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/search.html b/examples/most/templates/exams/visit/search.html
index 19a0fbd..650f80f 100644
--- a/examples/most/templates/exams/visit/search.html
+++ b/examples/most/templates/exams/visit/search.html
@@ -1,10 +1,67 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
-
-</body>
-</html>
\ No newline at end of file
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="query-string" class="control-label">Query string</label>  <!--col-sm-4-->
+           <input class="form-control" id="query-string" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Search visit</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/search/',
+                type: 'GET',
+                data: {
+                    query_string: $( '#query-string' ).val()
+                },
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/examples/most/templates/exams/visit/set_parent_visit.html b/examples/most/templates/exams/visit/set_parent_visit.html
index 19a0fbd..948518a 100644
--- a/examples/most/templates/exams/visit/set_parent_visit.html
+++ b/examples/most/templates/exams/visit/set_parent_visit.html
@@ -1,10 +1,158 @@
-<!DOCTYPE html>
-<html>
-<head lang="en">
-  <meta charset="UTF-8">
-  <title></title>
-</head>
-<body>
+{% extends "base_modal.html" %}
+{% block modal_body %}
+  <div class="row clearfix">
+    <div class="col-md-12 column">
+      <form class="form-horizontal" role="form" id="modal_form">
+        <div class="ui-widget form-group" id="visit_field">
+          <label for="select_visit" class="control-label">Select visit</label>  <!--col-sm-4-->
+             <input id="select_visit_id" type="hidden" />
+             <input class="form-control" id="select_visit" type="text" />
+        </div>
+        <div class="ui-widget form-group" id="parent_visit_field">
+          <label for="select_parent_visit" class="control-label">Select parent visit</label>  <!--col-sm-4-->
+             <input id="select_parent_visit_id" type="hidden" />
+             <input class="form-control" id="select_parent_visit" type="text" />
+        </div>
+        <div class="form-group">
+          <div class="col-sm-offset-4 col-sm-8">
+             <button type="submit" class="btn btn-default">Set parent visit</button>
+          </div>
+        </div>
+      </form>
+    </div>
+  </div>
+  <script>
+    $(function() {
+        $( "#select_visit" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/visit/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                   ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            visit_type: item.visit_type,
+                            notes: item.notes,
+                            reason: item.reason,
+                            requesting_clinician: item.requesting_clinician,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            is_active: item.is_active
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_visit" ).val( ui.item.label );
+            $( "#select_visit_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_visit" ).autocomplete( "option", "appendTo", "#visit_field" );
 
-</body>
-</html>
\ No newline at end of file
+        $( "#select_parent_visit" ).autocomplete({
+        source: function( request, response ) {
+            $.ajax({
+                url: "/exams/visit/search/",
+                dataType: "json",
+                data: {
+                    query_string: request.term
+                },
+                success: function( data ) {
+                    response( $.map( data.data, function( item ) {
+                        return {
+                            label: item.medical_service.value + ' ' + item.speciality + ' ' + item.urgency.value +
+                                   ' ' + item.visit_type.value + ' ' + item.state.value + ' ',
+                            value: item.id,
+                            medical_service: item.medical_service,
+                            speciality: item.speciality,
+                            urgency: item.urgency,
+                            state: item.state,
+                            visit_type: item.visit_type,
+                            notes: item.notes,
+                            reason: item.reason,
+                            requesting_clinician: item.requesting_clinician,
+                            start_datetime: item.start_datetime,
+                            end_datetime: item.end_datetime,
+                            is_active: item.is_active
+                        }
+                    }));
+                }
+            });
+        },
+        minLength: 2,
+        select: function( event, ui ) {
+            $( "#select_parent_visit" ).val( ui.item.label );
+            $( "#select_parent_visit_id" ).val( ui.item.value );
+            return false;
+        },
+        open: function() {
+            $( this ).removeClass( "ui-corner-all" ).addClass( "ui-corner-top" );
+        },
+        close: function() {
+            $( this ).removeClass( "ui-corner-top" ).addClass( "ui-corner-all" );
+        }});
+        $( "#select_parent_visit" ).autocomplete( "option", "appendTo", "#parent_visit_field" );
+
+        $( "#modal_form").submit(function (event) {
+            event.preventDefault();
+            $.ajax({
+                url: '/exams/visit/' + $( "#select_visit_id" ).val() + '/set_parent_visit/' + $( "#select_parent_visit_id" ).val() + '/',
+                type: 'POST',
+                dataType: 'text',
+                success: function (data, textStatus, jqXHR) {
+                    var jsonData = JSON.parse(data);
+                    var beautifiedData = JSON.stringify(jsonData, null, 4);
+                    $('#visit_results_body').html('<div><pre class="pre-scrollable">' + beautifiedData + '</pre></div>');
+                    if (jsonData.success) {
+                        if ($('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').removeClass('panel-danger');
+                        }
+                        if (!$('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').addClass('panel-success');
+                        }
+                    }
+                    else {
+                        $('#visit_results_body').html('<div>' + jsonData.errors + '</div>');
+                        if ($('#visit_results').hasClass('panel-success')) {
+                            $('#visit_results').removeClass('panel-success');
+                        }
+                        if (!$('#visit_results').hasClass('panel-danger')) {
+                            $('#visit_results').addClass('panel-danger');
+                        }
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                },
+                error: function (jqXHR, textStatus, errorThrown) {
+                    $('#visit_results_body').html('<div>' + textStatus + ': ' + errorThrown + '</div>');
+                    if ($('#visit_results').hasClass('panel-success')) {
+                        $('#visit_results').removeClass('panel-success');
+                    }
+                    if (!$('#visit_results').hasClass('panel-danger')) {
+                        $('#visit_results').addClass('panel-danger');
+                    }
+                    $( '#api-launcher' ).modal('hide');
+                }
+            });
+            return false;
+        });
+    });
+  </script>
+{% endblock %}
\ No newline at end of file
diff --git a/src/most/web/exams/models.py b/src/most/web/exams/models.py
index e76a983..82e8821 100644
--- a/src/most/web/exams/models.py
+++ b/src/most/web/exams/models.py
@@ -99,7 +99,8 @@ def to_dictionary(self):
             u'summary': u'%s' % self.summary if self.summary else None,
             u'start_datetime':  u'%s' % self.start_datetime.strftime('%d %b %Y') if self.start_datetime else None,
             u'end_datetime': u'%s' % self.end_datetime.strftime('%d %b %Y') if self.end_datetime else None,
-            u'clinician': self.clinician.to_dictionary(exclude_user=True),
+            u'clinician': u'%s' % self.clinician,
+            # u'clinician': self.clinician.to_dictionary(exclude_user=True),
             u'is_active': self.is_active,
             u'is_remote': self.is_remote,
         }