<!DOCTYPE html>
<html lang="en">
	<head  th:include="tmpl-head :: head">
		<title>RESTful Tester</title>
	</head>

	<body>
		<form action="" method="get" id="outerForm">
		<input type="hidden" id="serverId" name="serverId" th:value="${serverId}"/> 

		<div th:replace="tmpl-navbar-top :: top" ></div>
		
		<div class="container-fluid">
			<div class="row">

				<div th:replace="tmpl-navbar-left :: left" ></div>

				<div class="col-sm-9 col-sm-offset-3 col-md-9 col-md-offset-3 main">

					<div th:replace="tmpl-banner :: banner"></div>

					<!-- ********************************************************** -->
					<!-- ** Default Home                                         ** -->
					<!-- ********************************************************** -->

						<div th:replace="tmpl-home-welcome :: banner"/>

						<table class="table table-bordered table-striped" th:if="${resourceName.empty}">
							<colgroup>
								<col class="col-xs-1" />
								<col class="col-xs-7" />
							</colgroup>
							<tbody>
								<tr th:if="#{!strings.isEmpty(conf.implementation.description.value)}">
									<td>Server</td>
									<td th:utext="'' + ${conf.implementation.description}">HAPI Restful Server</td>
								</tr>
								<tr th:if="#{!strings.isEmpty(conf.software.name.value)} or #{!strings.isEmpty(conf.software.version.value)}">
									<td>Software</td>
									<td>
										<th:block th:utext="'' + ${conf.software.name}"/> - <th:block th:utext="'' + ${conf.software.version}"/>
									</td>
								</tr>
								<tr>
									<td>FHIR Base</td>
									<td>
										<a th:href="${base}" th:text="${base}"></a>
									</td>
								</tr>
							</tbody>
						</table>

						<!-- ************************************************ -->
						<!-- ** Server Actions (no resource selected)      ** -->
						<!-- ************************************************ -->

						<div class="panel panel-default" th:if="${resourceName.empty}">
							<div class="panel-heading">
								<h3 class="panel-title">Server Actions</h3>
							</div>
							<div class="panel-body">
								<div class="container-fluid">
							
								<!-- Conformance -->
								
									<div class="row-fluid">
										Retrieve the server's <b>conformance</b> statement.										
									</div>
								    <div class="row-fluid">
								    	<div class="col-sm-3 form-group">
											<button type="button" id="fetch-conformance-btn"
												data-loading-text="Loading &lt;i class='fa fa-spinner fa-spin'/&gt;"  class="btn btn-primary btn-block">
												<i class="fa fa-dot-circle-o"></i>
												Conformance
											</button>
											<script type="text/javascript">
												$('#fetch-conformance-btn').click(
														function() {
															var btn = $(this);
															btn.button('loading');
															$("#outerForm").attr("action", "conformance").submit();
														});
											</script>
										</div>
									</div>
									
								<!-- Server History -->
								
									<br clear="all"/>
									<div class="row-fluid">
										Retrieve the update <b>history</b> across all resource types on
										the server.										
									</div>
								    <div class="row-fluid top-buffer">
								    	<div class="col-sm-3">
										<button type="button" id="server-history-btn"
											data-loading-text="Loading &lt;i class='fa fa-spinner fa-spin'/&gt;"  class="btn btn-primary btn-block">
											<i class="fa fa-calendar"></i>
											History
										</button>
								    	</div>
								        <div class='col-sm-5'>
								            <div class="form-group">
								                <div class='input-group date' id='server-history-datetime' data-date-format="YYYY-MM-DDTHH:mm:ss">
								                    <div class="input-group-addon">
								                    Since
								                    </div>
								                    <input type='text' class="form-control" id="server-history-since"/>
								                    <div class="input-group-addon">
								                    <span class="glyphicon glyphicon-calendar"></span>
								                    </div>
								                </div>
								            </div>
								        </div>								        
										<div class='col-sm-3'>
								            <div class="form-group">
								                <div class='input-group'>
								                    <div class="input-group-addon">
								                    Limit #
								                    </div>
								                    <input type="text" class="form-control" id="server-history-limit" placeholder="(opt)"/>
								                </div>
								            </div>
								        </div>
								        <script type="text/javascript">
								            $(function () {
								                $('#server-history-datetime').datetimepicker({
								                	sideBySide: true,
								                	use24hours: true,
								                	showToday: true
								                });
								            });
								            $('#server-history-btn').click(
												function() {
													var btn = $(this);
													btn.button('loading');
													var limit = $('#server-history-limit').val();
													if (limit != null) btn.append($('<input />', { type: 'hidden', name: 'limit', value: limit }));
													var since = $('#server-history-since').val();
													if (since != null) btn.append($('<input />', { type: 'hidden', name: 'since', value: since }));
													$("#outerForm").attr("action", "history-server").submit();
												});								            
								        </script>
								        
								    </div>
								    
								<!-- Transaction -->
								
									<br clear="all"/>
									<div class="row-fluid">
										Post a bundle containing multiple resources to the server and
										store all resources within a single atomic transaction.										
									</div>
								    <div class="row-fluid">
								    	<div class="col-sm-3">
											<button type="button" id="transaction-btn"
												data-loading-text="Processing &lt;i class='fa fa-spinner fa-spin'/&gt;"  class="btn btn-primary btn-block">
												<i class="fa fa-files-o"></i>
												Transaction
											</button>
										</div>
										<div class='col-sm-9'>
								            <div class="form-group">
								                <div class='input-group'>
								                    <div class="input-group-addon">
								                    Bundle
								                    <span class="loadingStar">*</span>
								                    </div>
								                    <textarea class="form-control" id="transaction-body" style="white-space: nowrap; overflow: auto;" placeholder="(place transaction bundle body here)" rows="1">
								                    	<th:block th:if="${transactionBundle} != null" th:text="${transactionBundle}"/>
								                    </textarea>
								                </div>
								            </div>
								        </div>											
								        <script type="text/javascript">
							        		var textAreaChanger = function() {
							        			createBodyOriginalHeight = $('#transaction-body').height();
							        			$('#transaction-body').animate({height: "200px"}, 500);
							        		}								        	
								        	$('#transaction-body').focus(textAreaChanger);
								            $('#transaction-btn').click(
												function() {
													var btn = $(this);
													btn.button('loading');
													var id = $('#transaction-id').val();
													if (id != null) btn.append($('<input />', { type: 'hidden', name: 'resource-create-id', value: id }));
													var body = $('#transaction-body').val();
													btn.append($('<input />', { type: 'hidden', name: 'transactionBody', value: body }));
													$("#outerForm").attr("method", "post");
													$("#outerForm").attr("action", "transaction").submit();
												});		
											$( document ).ready(function() {
/* 												if ($('#resource-create-id').val() != "") {
													buttonChanger();
													textAreaChanger();
													$('#transaction-body').focus();
												}
 */											});
								        </script>								        
								    </div>

								<!-- Get Tags -->
								
									<br clear="all"/>
									<div class="row-fluid">
										Show all of the tags currently in use on the server										
									</div>
								    <div class="row-fluid">
								    	<div class="col-sm-3 form-group">
											<button type="button" id="get-server-tags-btn"
												data-loading-text="Loading &lt;i class='fa fa-spinner fa-spin'/&gt;"  class="btn btn-primary btn-block">
												<i class="fa fa-tags"></i>
												Get Tags
											</button>
											<script type="text/javascript">
												$('#get-server-tags-btn').click(
														function() {
															var btn = $(this);
															btn.button('loading');
															$("#outerForm").attr("action", "get-tags").submit();
														});
											</script>
										</div>
									</div>

								<!-- Next Server Action? -->
								    
								</div>
							</div>
						</div>

				</div>
			</div>
		</div>

	</form>
	
	<div th:replace="tmpl-footer :: footer" ></div>
</body>
</html>
