<!DOCTYPE html>
<html>
<head>
	<title>PMDynaform</title>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
	
	<link rel="stylesheet" href="../libs/bootstrap-3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/PMDynaform.css">
	<script type="text/javascript" src="../libs/jquery/jquery-1.11.js"></script>
	
	<script type="text/javascript" src="../libs/bootstrap-3.1.1/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="../libs/underscore/underscore-1.6.js"></script>
	<script type="text/javascript" src="../libs/backbone/backbone-min.js"></script>	
	<script type="text/javascript" src="../libs/restclient/restclient.js"></script>	
	
</head>
<body>
    
	<div class="container">

    <div class="bs-callout bs-callout-danger">
    <h4>Information for RestClient</h4>
    <p>Inputs workpace, project, server and tokens for<code>RestClient</code></p>

        <div class="bs-example">
        <form class="form" role="form">
            <div class="row" >
              <div class="form-group col-md-2">
                <label class="sr-only" for="exampleInputEmail2">Processid</label>
                <input type="text" class="form-control" id="processid" placeholder="processid">
              </div>
              <div class="form-group col-md-2">
                <label class="sr-only" for="exampleInputPassword2">Workspace</label>
                <input type="text" class="form-control" id="workspace" placeholder="workspace">
              </div>
              <div class="form-group col-md-5">
                <label class="sr-only" for="exampleInputPassword2">Tokens</label>
                <input type="text" class="form-control" id="tokens" placeholder="tokens">
              </div>
              <div class="form-group col-md-2">
                <label class="sr-only" for="exampleInputPassword2">Server</label>
                <input type="text" class="form-control" id="server" placeholder="server">
              </div>
              <div class="form-group col-md-1">
                <button type="submit" class="btn btn-primary" onClick="pressClick(); return false;">Save Data</button>
              </div>
            </div>
        </form>
        </div>
    </div>
	<script type="text/template" id="fieldset-template">
	<fieldset>
	    <legend>Options</legend>
	    
	        <div class='col-sm-12'>
	            <div class='form-group'>
	            </div>
	        </div>
	</fieldset>
</script>

<script type="text/template" id="tpl-panelfield">
	<div class="col-xs-<%- colSpan %>">		  			 			 
	</div>
</script>

<script type="text/template" id="tpl-row">
	<div class="pmdynaform-field row show-grid">	      
	</div>
</script>

<script type="text/template" id="tpl-validator">
	<div class="alert alert-danger" role="alert">
		<span class="glyphicon glyphicon-exclamation-sign" aria-hidden="true"></span>
		<span class="sr-only">Error:</span>
	  	<% for (var item in message) {%>
			<span><%-message[item]%> </span>
		<%}%>
	</div>
</script>

<script type="text/template" id="tpl-messageWarning">
	<div class="alert alert-danger" role="alert">
    	<%-message%>
  	</div>
</script>
<script type="text/template" id="tpl-text">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%-namespace%>-<%-mode%>-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%>  pmdynaform-field<%}%>">
        <% if(group === "form") {%>
        	<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
	            <label for="form[<%-id%>]" class="control-label pmdynaform-label">
	            	<span data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-tooltipLabel%>" class="textlabel"><%=label%></span>
		            <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
	            </label>
        	</div>
		<%}%>
		<div <%if (group === 'form'){ %>
	  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
	  		<%} else if (layout === "responsive") {%>
	  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
	  		<%}%>
		>
			<div class="control-group">
				<input
					<% if  ( group === "grid") { %>
						id= "form<%-id%>"
						name= "form<%-name%>"
					<%} else{%>
						<% if (type === "suggest"){ %>
							id= "form[<%-id%>_label]"
							name="form[<%-name%>_label]"
						<%}else{%>
							id= "form[<%-id%>]"
							name="form[<%-name%>]"
						<%}%>
					<%}%>
					type = <%-type%>
					class="<%-namespace%>-control-<%-type%> form-control"
					placeholder= "<%-placeholder%>"
					<%if(type === "suggest"){%>
						value = "<%-data['label']%>"
					<%}else{%>
						value = "<%-data['value']%>"
					<%}%>
					<% if(disabled === true){%>disabled<%}%>
					<% if (autoComplete === "on" || autoComplete === "off") { %>
						autocomplete = "<%-autoComplete%>"
					<%} else{%>
						autoComplete = "off"
					<%}%>
					<%if(tabIndex !== ""){%>
						tabindex="<%-tabIndex%>"
					<%}%>
					<%if(ariaLabel !== ""){%>
						aria-label="<%-ariaLabel%>"
					<%}%>
				>
				<% if (group === "form") { %>
					<%if (hint !== "" && hint !== null){%>
						<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
					<%}else{%>
						<span class="pmdynaform-spaceHint"></span>
					<%}%>
				<% } %>
				<span class="content-print"></span>
			</div>

				<% if (type === "suggest"){ %>
					<input type="hidden" value="<%-data['value']%>"
						<% if  ( group === "grid") { %>
							id = "form<%-id%>"
							name ="form<%-name%>"
						<%} else{%>
							id = "form[<%-id%>]"
							name ="form[<%-name%>]"
						<%}%>
					>
				<%}%>
				<% if (group === "form") { %>
					<%if (type === "suggest"){%>
						<span class="spinner-icon"></span>
					<%}%>
				<% } %>
				<% if (type !== "suggest"){ %>
					<input type="hidden"
						<% if  ( group === "grid") { %>
							id = "form<%-id%>"
							name ="form<%-name%>"
						<%} else{%>
							id = "form[<%-id%>_label]"
							name ="form[<%-name%>_label]"
							value = "<%-data['label']%>"
						<%}%>
					>
				<%}%>

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

<script type="text/template" id="tpl-textarea">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
        	<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label for="form[<%-id%>]" class="control-label pmdynaform-label">
					<span class="textlabel"><%=label%></span>
					<%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
				</label>
			</div>
		<%}%>
		<div <%if (group === 'form'){ %>
		  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		  		<%} else if (layout === "responsive") {%>
		  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
				  <%}%>>
			<div class="control-group">
				<textarea
                    <% if  ( group === "grid") { %>
                        id = "form<%-id%>"
                        <%if(name !== ""){%>
                            name ="form<%-name%>"
                        <%}%>
                    <%} else{%>
                        <%if(name !== ""){%>
                            id = "form[<%-id%>]"
                            name ="form[<%-name%>]"
                        <%}%>
                    <%}%>
                    class="<%-namespace%>-control-<%-type%> form-control"
                    <% if ((new RegExp('^[0-9]+$')).test(rows)) { %>
                        rows="<%- rows %>"
                    <% } else { %>
                        rows= "2"
                    <% } %>
                    placeholder= "<%- placeholder %>"
                    <% if(disabled === true){%>disabled<%}%>
                    <%if(tabIndex !== ""){%>
                        tabindex="<%-tabIndex%>"
                    <%}%>
                    <%if(ariaLabel !== ""){%>
                        aria-label="<%-ariaLabel%>"
                    <%}%>
                    ><%-value%></textarea>

					<% if (group === "form") { %>
						<%if (hint !== "" && hint !== null){%>
							<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
						<%}else{%>
							<span class="pmdynaform-spaceHint"></span>
						<%}%>
					<% } %>
				<input type="hidden"
					<% if  ( group === "grid") { %>
						id = "form<%-id%>_label"
						name ="form<%-name%>_label"
						value="<%-data['label']%>"
					<%} else{%>
						id = "form[<%-id%>_label]"
						name ="form[<%-name%>_label]"
						value="<%-data['label']%>"
					<%}%>
				>
				<span class="content-print" style="white-space: pre-wrap"></span>
			</div>

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

<script type="text/template" id="tpl-checkgroup">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
    	<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
		    	<label for="form[<%-id%>]" class="control-label pmdynaform-label">
		    		<span class="textlabel"><%= label %></span>
		    		<%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
		    	</label>
			</div>
	    <%}%>
    	<div <%if (group === 'form'){ %>
		  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		  		<%} else if (layout === "responsive") {%>
		  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		  		<%}%>>
			<div class="control-group">
				<div class="pmdynaform-control-checkbox-list form-control">
					<div class="pmdynaform-checkbox-items">
						<% for(var i=0; i<options.length; i+=1) { %>
							<div class="checkbox">
								<label>
									<input
										<% if  ( group === "grid") { %>
											id = "form<%-id%>"
											name ="form<%-name%>"
										<%} else {%>
											id = "form[<%-id%>][<%-options[i].value%>]"
											name ="form[<%-name%>][]"
										<%}%>
										class="<%-namespace%>-control-<%-type%>"
										value="<%-options[i].value%>"
										type="checkbox"

										<% if(data.value && data.value.length){
											for(var j=0; j< data.value.length; j+=1) {
													if(data.value[j] == options[i].value){%>
													checked
													<%if(ariaLabelVisible){%>
														aria-label="<%-options[i].label%>"
													<%}%>
										<%}}}%>

										<% if(disabled === true){%>disabled<%}%>
										<%if(tabIndex !== ""){%>
											tabindex="<%-tabIndex%>"
										<%}%>

									>
									<%if(dataType !== "boolean"){%>
										<span><%-options[i].label%></span>
									<%}%>
								</label>
							</div>
						<% } %>
					</div>
					<% if (group === "form") { %>
						<%if (hint !== "" && hint !== null){%>
							<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
						<%}else{%>
							<span class="pmdynaform-spaceHint"></span>
						<%}%>
					<% } %>
				</div>
				<input type="hidden"
					<% if  ( group === "grid") { %>
						id = "form<%-id%>_label"
						name ="form<%-name%>_label"
					<%} else{%>
						id = "form[<%-id%>_label]"
						name ="form[<%-name%>_label]"
					<%}%>
				>
				<ul class="content-print">
					<% var items = JSON.parse(data.label) %>
					<% for(var i=0; i < items.length; i += 1) { %>
						<li><%-items[i]%></li>
					<% } %>
				</ul>
			</div>

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

<script type="text/template" id="tpl-checkbox_yes_no">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
		<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
			<label for="form[<%-id%>]" class="control-label pmdynaform-label">
				<span class="textlabel"><%= label %></span>
				<%if(required){%>
				<span class="pmdynaform-field-required">*</span>
				<%}%>
			</label>
		</div>
		<%} else if((group !== "form") && (layout === "form")){%>
		<label for="<%-name%>" class="hidden-lg hidden-md hidden-sm visible-xs control-label pmdynaform-label col-xs-<%-colSpanLabel%>">
			<span class="textlabel"><%= label %></span>
		</label>
		<%}%>
		<div <%if (group === 'form'){ %>
		class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		<%} else if (layout === "responsive") {%>
		class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		<%}%>>
		<div class="pmdynaform-control-checkbox-list form-control">
			<div class="pmdynaform-checkbox-items">
				<% for(var i=0; i<options.length; i+=1) { %>
				<div class="checkbox"
				<%if( i > 0){%>
				style = "display:none"
				<%}%>
				>
				<label>
					<input
					<% if  ( group === "grid") { %>
					id = "form<%-id%>"
					name ="form<%-name%>"
					<%} else {%>
					id = "form[<%-id%>]"
					name ="form[<%-name%>][]"
					<%}%>
					class="<%-namespace%>-control-<%-type%>"
					value="<%-options[i].value%>"
					type="checkbox"
					<% if(options[i].selected){%>checked<%}%>
					<% if(disabled === true || mode === 'view'){%>disabled<%}%>
					<%if(tabIndex !== ""){%>
						tabindex="<%-tabIndex%>"
					<%}%>
					>
				</label>
			</div>
			<% } %>
		</div>
		<% if (group === "form") { %>
			<%if (hint !== "" && hint !== null){%>
				<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
			<%}else{%>
				<span class="pmdynaform-spaceHint"></span>
			<%}%>
		<% } %>
	</div>
	<input type="hidden"
	<% if  ( group === "grid") { %>
	id = "form<%-id%>_label"
	name ="form<%-name%>_label"
	<%} else{%>
	id = "form[<%-id%>_label]"
	name ="form[<%-name%>_label]"
	<%}%>
	>
	<span class="content-print"></span>
	</div>
	</div>
</script>

<script type="text/template" id="tpl-checkbox_view_mode">
	<div class="<%-namespace%>-field-<%-type%>" style="text-align: center;">
			<input
			id = "form<%-id%>"
			name ="form<%-name%>"
			value="<%-value%>"
			type="checkbox"
			<% if(data.value == '1'){ %>checked <%}%>
			disabled
			>
	</div>
</script>

<script type="text/template" id="tpl-radio">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
		<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
			<label for="form[<%-name%>]" class="control-label pmdynaform-label">
				<span class="textlabel"><%= label %></span>
				<%if(required){%>
				<span class="pmdynaform-field-required">*</span>
				<%}%>
			</label>
		</div>
		<%}%>
		<div <%if (group === 'form'){ %>
		class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		<%} else if (layout === "form"){ %>
		class="col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
		<%} else if (layout === "responsive") {%>
		class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		<%}%>>
		<div class="control-group">
			<div class="pmdynaform-control-radio-list">
				<div class="pmdynaform-radio-items">
					<% for(var i=0; i<options.length; i+=1) { %>
					<div class="radio">
						<label>
							<input
							<% if  ( group === "grid") { %>
							id = "form<%-id%>"
							name ="form<%-name%>"
							<%} else{%>
							id = "form[<%-id%>]"
							name ="form[<%-name%>]"
							<%}%>
							class="<%-namespace%>-control-<%-type%>"
							value="<%-options[i].value%>"
							type="<%-type%>"
							<% if(data["value"] == options[i].value){%>checked<%}%>
							<% if(disabled === true){%>disabled<%}%>
							<%if(tabIndex !== ""){%>
								tabindex="<%-tabIndex%>"
							<%}%>
							<%if(data["value"]  === options[i].value && ariaLabelVisible){%>
								aria-label="<%-options[i].label%>"
							<%}%>
							>
							<span><%-options[i].label%></span>
						</label>
					</div>
					<% } %>
				</div>
				<input type="hidden" value="<%-data['label']%>"
				<% if  ( group === "grid") { %>
				id = "form<%-id%>_label"
				name ="form<%-name%>_label"
				<%} else{%>
				id = "form[<%-id%>_label]"
				name ="form[<%-name%>_label]"
				<%}%>
				>
				<input type="hidden" value="<%-data['value']%>"
					<% if  ( group === "grid") { %>
						id = "form<%-id%>"
						name ="form<%-name%>"
					<%} else{%>
						id = "form[<%-id%>]"
						name ="form[<%-name%>]"
					<%}%>
				>
				<% if (group === "form") { %>
					<%if (hint !== "" && hint !== null){%>
						<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
					<%}else{%>
						<span class="pmdynaform-spaceHint"></span>
					<%}%>
				<% } %>
			</div>
			<span class="content-print"></span>
		</div>
	</div>
	</div>
</script>

<script type="text/template" id="tpl-dropdown">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
		<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
			<label for="form[<%-id%>]" class="control-label pmdynaform-label">
				<span class="textlabel"><%=label%></span>
				<%if(required && enableValidate){%>
				<span class="pmdynaform-field-required">*</span>
				<%}%>
			</label>
		</div>
		<%}%>
		<div
			<%if (group === 'form'){ %>
				class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
			<%} else if (layout === "form"){ %>
				class="pmdynaform-dropdown-control col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
			<%} else if (layout === "responsive") {%>
				class="pmdynaform-dropdown-control col-xs-12 col-sm-12 col-md-12 col-lg-12"
			<%}%>>
			<div class="control-group">
				<select
					<% if  ( group === "grid") { %>
						id = "form<%-id%>"
						name ="form<%-name%>"
					<%} else{%>
						id = "form[<%-id%>]"
						name ="form[<%-name%>]"
					<%}%>
					class="<%-namespace%>-control-<%-type%> form-control"
					<% if(disabled === true){%>disabled<%}%>
					<%if(tabIndex !== ""){%>
						tabindex="<%-tabIndex%>"
					<%}%>
					<%if(ariaLabel !== ""){%>
						aria-label="<%-ariaLabel%>"
					<%}%>
					>
					<%if(therePlaceholder && placeholderOption){%>
						<option disabled id="placeholder-option" value=<%-placeholderOption["value"]%> ><%-placeholderOption["label"]%></option>
					<%}%>
					<% for(var i=0; i<options.length; i+=1) { %>
						<option value="<%-options[i].value%>"
						<%if( options[i].value == data["value"]){%>
							selected<%}%>
						><%-options[i].label%></option>
					<% } %>
				</select>
				<% if (group === "form") { %>
					<%if (hint !== "" && hint !== null){%>
						<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
					<%}else{%>
						<span class="pmdynaform-spaceHint"></span>
					<%}%>
				<% } %>
				<input type="hidden" value="<%-data['label']%>"
					<% if  ( group === "grid") { %>
						id = "form<%-id%>_label"
						name ="form<%-name%>_label"
					<%} else{%>
						id = "form[<%-id%>_label]"
						name ="form[<%-name%>_label]"
					<%}%>
				>
			<span class="content-print"></span>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-button">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> text-center">
		<button id="form[<%-id%>]" type=<%-type%> class="btn btn-primary"
			<% if(disabled === true){%>disabled<%}%>
			<%if(tabIndex !== ""){%>
				tabindex="<%-tabIndex%>"
			<%}%>
			<%if(ariaLabel !== ""){%>
				aria-label="<%-ariaLabel%>"
			<%}%>
			>
			<span><%=label%></span>
		</button>
	</div>
</script>

<script type="text/template" id="tpl-submit">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> text-center">
		<button id="form[<%-id%>]" type=<%-type%> class="btn btn-default"
			<% if(disabled === true){%>disabled<%}%>
			<%if(tabIndex !== ""){%>
				tabindex="<%-tabIndex%>"
			<%}%>
			<%if(ariaLabel !== ""){%>
				aria-label="<%-ariaLabel%>"
			<%}%>
			>
			<span> <%=label%> </span>
		</button>
	</div>
</script>

<script type="text/template" id="tpl-file">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label for="form[<%-name%>]" class="control-label pmdynaform-label">
					<span class="textlabel"><%= label %></span>
					<%if(required){%>
					<span class="pmdynaform-field-required">*</span>
					<%}%>
				</label>
			</div>
		<%}%>
		<div <%if(group === 'form'){ %> class="pmdynaform-file-control col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control" <%}%> >
		<div class="pmdynaform-file-container col-xs-12 col-sm-12 col-md-12 col-lg-12">
			<div class="control-group">
			<div class="pmdynaform-file-btn-container">
				<button type="button" class="<%-namespace%>-control-<%-type%> form-control"
					<% if(disabled === true){%>disabled<%}%>
						<% if(mode === "view"){%>style="display:none;"<%}%>
						<%if(tabIndex !== ""){%>
							tabindex="<%-tabIndex%>"
						<%}%>
						<%if(ariaLabel !== ""){%>
							aria-label="<%-ariaLabel%>"
						<%}%>
				>
					<%-labelButton%>
				</button>
			</div>
			<input
				<% if (group === "grid") { %>
					id = "form<%-id%>"
					name ="form<%-name%>"
				<%} else{%>
					id = "form[<%-name%>]"
					name ="form[<%-name%>]"
				<%}%>
				type="file" style="visibility:hidden;display:none;"
				<% if(disabled === true){%>disabled<%}%>
				<% if(multiple === true){%>multiple<%}%>
			>
				<% if (group === "form") { %>
					<%if (hint !== "" && hint !== null){%>
						<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
					<%}else{%>
						<span class="pmdynaform-spaceHint"></span>
					<%}%>
				<% } %>
				<input type="hidden"
					<% if (group === "grid") { %>
						id = "form<%-id%>_label"
						name ="form<%-name%>_label"
					<%} else {%>
						id = "form[<%-id%>_label]"
						name ="form[<%-name%>_label]"
					<%}%>
				>
			</div>
				<%if(data['value'].length){%>
					<div class= "col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> link-container pmdynaform-field-control">
						<% for(var i = 0; i < data['label'].length; i+=1) { %>
							<a style="float:left"
				   				href = "<%-data['value'][i]%>" class="btn btn-link <%-namespace%>-control-<%-type%>">
								<span> <%-data['label'][i]%></span>
							</a>
						<% } %>
					</div>
				<%}%>
		</div>
		<span class="content-print"></span>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-suggest-list">
	<ul class="list-group col-lg-11 col-sm-11 col-md-11 col-xs-10 pmdynaform-suggest-list">
	</ul>
</script>

<script type="text/template" id="tpl-suggest-element">
	<span data-value="<%-value %>" class="list-group-item"><%- label %></span>
</script>

<script type="text/template" id="tpl-link">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%>  <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
        <% if(group === "form") {%>
        	<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
	            <label class="control-label pmdynaform-label">
	            	<span class="textlabel"><%=label%></span>
		            <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
	            </label>
        	</div>
		<%}%>
		<div <%if (group === 'form'){ %>
		  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		  		<%} else if (layout === "form"){ %>
		  			class="col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
		  		<%} else if (layout === "responsive") {%>
		  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		  		<%}%>>
		<div class="control-group">
			<a
				<% if  ( group === "grid") { %>
					id = "form<%-id%>"
				<%} else{%>
					id = "form[<%-id%>]"
				<%}%>
				class = "pmdynaform-link form-control"
				href="<%-href%>" target="<%-target%>" rel="<%-rel%>" class="btn btn-link <%-namespace%>-control-<%-type%>"
				<% if(disabled === true){%>disabled<%}%>
				<%if(tabIndex !== ""){%>
					tabindex="<%-tabIndex%>"
				<%}%>
				<%if(ariaLabel !== ""){%>
					aria-label="<%-ariaLabel%>"
				<%}%>
				>
				<span> <%-text%> </span>
			</a>
			<span class="content-print"></span>
			<% if (group === "form") { %>
				<%if (hint !== "" && hint !== null){%>
					<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
				<%}else{%>
					<span class="pmdynaform-spaceHint"></span>
				<%}%>
			<% } %>
		</div>
		</div>
    </div>
 </script>

<script type="text/template" id="tpl-empty">
	<div class="form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> tpl-empty">
	</div>
</script>

<script type="text/template" id="tpl-label-title">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> pmdynaform-field">
		<h4 id="form[<%-id%>]">
			<p class="<%-className[type]%>">
				<span class="textlabel"
				<%if(ariaLabel !== ""){%>
					aria-label="<%-ariaLabel%>"
				<%}%>
				><%=label%></span>
			</p>
		</h4>
	</div>
</script>

<script type="text/template" id="tpl-label-subtitle">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> pmdynaform-field">
		<h5 id="form[<%-id%>]">
			<p class="<%-className[type]%>">
				<span class="textlabel"
				<%if(ariaLabel !== ""){%>
					aria-label="<%-ariaLabel%>"
				<%}%>
				><%=label%></span>
			</p>
		</h5>
	</div>
</script>

<script type="text/template" id="tpl-label">
	<div id="<%-id%>" name="field-<%-name%>" class="<%-namespace%>-field-<%-originalType%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label class="control-label pmdynaform-label">
					<span class="textlabel"
					<%if(ariaLabel !== ""){%>
						aria-label="<%-ariaLabel%>"
					<%}%>
					><%=label %></span>
					<%if(required){%>
					<span class="pmdynaform-field-required">*</span>
					<%}%>
				</label>
			</div>
		<%} else if((group !== "form") && (layout === "form")){%>
		<label class="hidden-lg hidden-md hidden-sm visible-xs control-label pmdynaform-label col-xs-<%-colSpanLabel%>">
			<span class="textlabel"><%=label %></span>
		</label>
		<%}%>
		<div <%if (group === 'form'){ %>
		class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		<%} else if (layout === "form"){ %>
		class="col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
		<%} else if (layout === "responsive") {%>
		class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		<%}%>>
		<div class="pmdynaform-label-options form-control">
			<%if(originalType=="suggest"){%>
			<%}%>
			<%for(var k=0; k<fullOptions.length; k+=1){%>
			<span title="<%-fullOptions[k]%>"
			<%if(originalType !== '') {%>
			class = "label-<%-originalType%>"
			<%} else {%>
			class = "label-control"
			<%}%>
			><%-fullOptions[k]%></span>
			<%}%>
            <% if (originalType === "checkgroup") {
            _.each(data['value'], function (item, index) { %>
                <input type="hidden" value="<%-item%>" name="form[<%-name%>][]" id="form[<%-id%>][<%-index%>]"/>
            <% });
            } else {
            %>
                <input class="value-hidden" type="hidden" value="<%-data['value']%>"
                <% if  ( group === "grid") { %>
                id = "form<%-id%>"
                name ="form<%-name%>"
                <%} else{%>
                id = "form[<%-id%>]"
                name ="form[<%-name%>]"
                <%}%>
                >
            <% } %>
			<input class="label-hidden" type="hidden" value="<%-data['label']%>"
			<% if  ( group === "grid") { %>
			id = "form<%-id%>_label"
			name ="form<%-name%>_label"
			<%} else{%>
			id = "form[<%-id%>_label]"
			name ="form[<%-name%>_label]"
			<%}%>
			>
		</div>
		<% if (group === "form") { %>
			<%if (hint !== "" && hint !== null){%>
				<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
			<%}else{%>
				<span class="pmdynaform-spaceHint"></span>
			<%}%>
		<% } %>
	</div>
	</div>
</script>

<script type="text/template" id="tpl-label-extension">
	<div id="<%-id%>" name="field-<%-name%>" class="<%-namespace%>-field-<%-originalType%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label class="control-label pmdynaform-label">
					<span class="textlabel"
					<%if(ariaLabel !== ""){%>
						aria-label="<%-ariaLabel%>"
					<%}%>
					><%=label %></span>
					<%if(required){%>
					<span class="pmdynaform-field-required">*</span>
					<%}%>
				</label>
			</div>
		<%} else if((group !== "form") && (layout === "form")){%>
		<label class="hidden-lg hidden-md hidden-sm visible-xs control-label pmdynaform-label col-xs-<%-colSpanLabel%>">
			<span class="textlabel"><%=label %></span>
		</label>
		<%}%>
		<div <%if (group === 'form'){ %>
		class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		<%} else if (layout === "form"){ %>
		class="col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
		<%} else if (layout === "responsive") {%>
		class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		<%}%>>
		<div class="pmdynaform-label-options form-control">
			<span title="<%-data['label']%>"
			class = "label-<%-type%>"
			><%-data['label']%></span>

            <% if (originalType === "checkgroup") {
            _.each(data['value'], function (item, index) { %>
                <input type="hidden" value="<%-item%>" name="form[<%-name%>][]" id="form[<%-id%>][<%-index%>]"/>
            <% });
            } else {
            %>
                <input class="value-hidden" type="hidden" value="<%-data['value']%>"
                <% if  ( group === "grid") { %>
                id = "form<%-id%>"
                name ="form<%-name%>"
                <%} else{%>
                id = "form[<%-id%>]"
                name ="form[<%-name%>]"
                <%}%>
                >
            <% } %>
			<input class="label-hidden" type="hidden" value="<%-data['label']%>"
			<% if  ( group === "grid") { %>
			id = "form<%-id%>_label"
			name ="form<%-name%>_label"
			<%} else{%>
			id = "form[<%-id%>_label]"
			name ="form[<%-name%>_label]"
			<%}%>
			>
		</div>
		<% if (group === "form") { %>
			<%if (hint !== "" && hint !== null){%>
				<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
			<%}else{%>
				<span class="pmdynaform-spaceHint"></span>
			<%}%>
		<% } %>
	</div>
	</div>
</script>

<script type="text/template" id="tpl-hidden">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> pmdynaform-field">
		<input
		<% if  ( group === "grid") { %>
		id = "form<%-id%>"
		name ="form<%-name%>"
		<%} else{%>
		id = "form[<%-id%>]"
		name ="form[<%-name%>]"
		<%}%>
		class="<%-namespace%>-control-<%-type%> form-control"
		type="hidden"
		value= "<%-value%>">
		<input type="hidden" value="<%-data['value']%>"
		<% if  ( group === "grid") { %>
		id = "form<%-id%>_label"
		name ="form<%-name%>_label"
		<%} else{%>
		id = "form[<%-id%>_label]"
		name ="form[<%-name%>_label]"
		<%}%>
		>
	</div>
</script>

<script type="text/template" id="tpl-image">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
        <div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
	        <label class="control-label pmdynaform-label">
	        	<span class="textlabel"><%=label %></span>
	        </label>
        </div>
        <div class="<%-namespace%>-control-<%-type%> col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control">
        	<p class="<%-namespace%>-control-<%-type%> control">
				<img id="PMD-<%-id%>" class="img-responsive <%-shape%>" src="<%-src%>" alt="<%-alternateText%>" title="<%-alt%>" scale="0" tabIndex="<%-tabIndex%>"
				<%if(ariaLabel !== ""){%>
					aria-label="<%-ariaLabel%>"
				<%}%>
				>
        		<span class="pmdynaform-image-comment text-primary"><%-comment%></span>
        	</p>
			<% if (group === "form") { %>
				<%if (hint !== "" && hint !== null){%>
					<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
				<%}else{%>
					<span class="pmdynaform-spaceHint"></span>
				<%}%>
			<% } %>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-audio">
	<audio class="embed-responsive-item" src="<%-path%>" width="200" height="200" autobuffer autoplay controls>
		<p>Your browser does not support the audio element </p>
	</audio>
</script>

<script type="text/template" id="tpl-video">
	<video class="embed-responsive-item" src="<%-path%>"  width="200" height="200" autoplay autobuffer controls>
		<p>Your browser does not support the video element </p>
	</video>
</script>

<script type="text/template" id="tpl-form">
	<div name="field-<%-name%>" class="<%-namespace%>-field-<%-type%> <%-namespace%>-<%-mode%>-<%-type%> col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%>">
	</div>
</script>

<script type="text/template" id="tpl-loading">
	<div class="pmdynaform-form-message-loading">
		<h3><%-title%></h3>
		<div class="alert alert-warning" role="alert">
			<span class="glyphicon glyphicon-refresh glyphicon-refresh-animate"></span>
			<strong><%-msg%></strong>
		</div>

	</div>
	<div id="shadow-form"></div>
</script>

<script type='text/template' id='tpl-datetime2'>
    <div id='<%-id%>' class='<%-namespace%>-field-<%-type%> <%-namespace%>-<%-mode%>-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> pmdynaform-field <%}%> '>
		<% if(group === 'form') {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
	            <label for='form[<%-name%>]' class='control-label pmdynaform-label'>
					<span data-toggle='tooltip' data-container="body" data-placement='bottom' class="textlabel"><%=label%></span>
		            <%if(required){%>
			  			<span class='pmdynaform-field-required'>*</span>
			  		<%}%>
	            </label>
			</div>
		<%}%>
		<div <%if (group === 'form'){ %>
	  			class='col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control'
	  		<%} else if (layout === 'form'){ %>
	  			class='col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12'
	  		<%} else if (layout === 'responsive') {%>
	  			class='col-xs-12 col-sm-12 col-md-12 col-lg-12'
				<%}%>>
				<div class="control-group">
						<div class='datetime-container'>
						<div id ='datetime-container-control' class='input-group date' <%if (group === 'form'){ %>
									class='form-control'
								<%} else if (layout === 'form'){ %>
									class='col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12'
								<%} else if (layout === 'responsive') {%>
									class='col-xs-12 col-sm-12 col-md-12 col-lg-12'
								<%}%>>


									<input type='text' class='pmdynaform-control-<%-type%> form-control' readonly="readonly"
								<% if  ( group === 'grid') { %>
									id = 'form<%-id%>'
									name ='form<%-name%>'
								<%} else{%>
									id = 'form[<%-id%>]'
									name ='form[<%-name%>_label]'
								<%}%>
										class='<%-namespace%>-control-<%-
										type%> form-control'
										type='text'
										placeholder= '<%- placeholder %>'
									value= '<%-value%>'
										<% if(disabled === true){%>disabled<%}%>
										<%if(tabIndex !== ""){%>
											tabindex="<%-tabIndex%>"
										<%}%>
										<%if(ariaLabel !== ""){%>
											aria-label="<%-ariaLabel%>"
										<%}%>
										>
								</input>
							<input type='hidden'
								<% if  ( group === 'grid') { %>
									id = 'form<%-id%>'
									name ='form<%-name%>'
								<%} else{%>
									id = 'form[<%-id%>_label]'
									name ='form[<%-name%>]'
									value = '<%-data['label']%>'
								<%}%>
							>
									<span class='input-group-addon'><span class='<%if (format === 'LT'){%>glyphicon glyphicon-time<%}else{%>glyphicon glyphicon-calendar<%}%>'>
										</span>
							</span>
						</div>
					</div>
					<% if (group === "form") { %>
						<%if (hint !== "" && hint !== null){%>
							<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
						<%}else{%>
							<span class="pmdynaform-spaceHint"></span>
						<%}%>
					<% } %>
			</div>
			<span class="content-print"></span>

		</div>
	</div>
</script>
<!--This template, repaint the remotes options to dropdown control
is called to PMDynaform.view.Dropdown method "_setOptions()"
-->
<script type='text/template' id='tpl-dropdown-options'>
	<%if(therePlaceholder && placeholderOption){%>
	<option disabled id="placeholder-option" value=<%-placeholderOption["value"]%> ><%-placeholderOption["label"]%></option>
	<%}%>
	<% for(var i=0; i<options.length; i+=1) { %>
	<option value= "<%-options[i].value%>"><%-options[i].label%></option>
	<% } %>
</script>

<!--This template, repaint the remotes options radiobutton control
is called to PMDynaform.view.Radio method "_setOptions()"
-->
<script type='text/template' id='tpl-radio-options'>
	<% for(var i=0; i<options.length; i+=1) { %>
	<div class="radio">
		<label>
			<input
					id= "form[<%-id%>][<%-i%>]"
					name= "form[<%-name%>]"
					class= "pmdynaform-control-<%-type%>"
					value= "<%-options[i].value%>"
					type= "<%-type%>"
			<% if(disabled) {%> disabled <%}%>
			>
			<span><%-options[i].label%></span>
		</label>
	</div>
	<% } %>
</script>

<script type='text/template' id='tpl-checkgroup-options'>
	<% for(var i=0; i<options.length; i+=1) { %>
	<div class="checkbox">
		<label>
			<input
					id= "form[<%-id%>][<%-i%>]"
					name= "form[<%-name%>][]"
					class= "pmdynaform-control-<%-type%>"
					value= "<%-options[i].value%>"
					type= "<%-type%>"
			<% if(disabled) {%> disabled <%}%>
			>
			<span><%-options[i].label%></span>
		</label>
	</div>
	<% } %>
</script>

<script type='text/template' id='tpl-suggest-options'>
	<% for(var i=0; i<options.length; i+=1) { %>
		<li class="list-group-item">
			<a href="#" data-value="<%-options[i].value%>" data-label="<%if(options[i].text){%><%-options[i].text%><%}else{%><%-options[i].label%><%}%>" selected="false">
				<%if(options[i].text){%>
				<%-options[i].text%>
				<%}else{%>
				<%-options[i].label%>
				<%}%>
			</a>
		</li>
	<% } %>
</script>

<script type='text/template' id='tpl-navBarButtons'>
	<div class="pmdynaform-navBarButtons" style="float:<%if(isRTL){%> left <%}else{%>right<%}%>">
		<button class="btn btn-info" id = "<%-idPrev%>"><%-textPrev%></button>
		<button class="btn btn-info" id = "<%-idNext%>"><%-textNext%></button>
	</div>
</script>

<script type="text/template" id='tpl-label-fullOptions'>
	<%for(var k=0; k<fullOptions.length; k+=1){%>
	<span title="<%-fullOptions[k]%>"
	<%if(originalType !== '') {%>
	class = "label-<%-originalType%>"
	<%} else {%>
	class = "label-control"
	<%}%>
	><%-fullOptions[k]%></span>
	<%}%>
</script>

<script type='text/template' id='tpl-suggest2'>
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label for="form[<%-id%>]" class="control-label pmdynaform-label">
					<span data-toggle="tooltip" data-placement="bottom" title="<%-tooltipLabel%>" class="textlabel"><%=label%></span>
					<%if(required && enableValidate){%>
						<span class="pmdynaform-field-required">*</span>
					<%}%>
				</label>
			</div>
		<%}%>
		<div
			<%if (group === 'form'){ %>
				class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%>
				pmdynaform-field-control"
			<%} else if (layout === "responsive") {%>
				class="pmdynaform-field-control col-xs-12 col-sm-12 col-md-12 col-lg-12"
			<%}%>
		>
			<div class="control-group">
				<select
					<% if ( group === "grid") { %>
						id="form<%-id%>"
						name= "form<%-name%>"
					<%} else{%>
						id="form[<%-id%>]"
						name="form[<%-name%>]"
					<%}%>
					type = <%-type%> class="<%-namespace%>-control-<%-type%> form-control"
					placeholder= "<%-placeholder%>" value = "<%-data['value']%>"
					<% if(disabled === true){%>disabled<%}%>
					<% if (autoComplete === "on" || autoComplete === "off") { %>
						autocomplete = "<%-autoComplete%>"
					<%} else{%>
						autoComplete = "off"
					<%}%>
					<%if(tabIndex !== ""){%>
						tabindex="<%-tabIndex%>"
					<%}%>
					<%if(ariaLabel !== ""){%>
						aria-label="<%-ariaLabel%>"
					<%}%>
				>
				</select>
				<% if (group === "form") { %>
					<%if (hint !== "" && hint !== null){%>
						<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
					<%}else{%>
						<span class="pmdynaform-spaceHint"></span>
					<%}%>
				<% } %>
				<span class="content-print"></span>
			</div>
			<input type="hidden"
				<% if ( group === "grid") { %>
					id = "form<%-id%>"
					name ="form<%-name%>"
					value="<%-data['label']%>"
				<%} else{%>
					id = "form[<%-id%>_label]"
					name ="form[<%-name%>_label]"
					value="<%-data['label']%>"
				<%}%>
			>
		</div>
	</div>
</script>
<script type="text/template" id="tpl-grid">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%-namespace%>-<%-mode%>-<%-type%> <%-layout%>">
		<div class="<%-namespace%>-<%-type%>-new">
			<p class="pmdynaform-grid-title"><span><%-title%></span>
				<%if (required) {%>
				<span class="pmdynaform-field-required">*</span>
				<%}%>
				<%if (hint !== "" && hint !== null) {%>
					<span style="float:right; margin-left:30px;" class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
				<%}%>
			</p>
			<% if  ( mode !== "view" && mode !== "disabled" && addRow) { %>
				<button type="button" class="<%-namespace%>-<%-type%>-newitem" aria-label="<%-addAriaLabel%>">
					<span class="pmdynaform-grid-plus glyphicon glyphicon-plus glyphicon btn btn-default btn-sm"></span>
					<span class="pmdynaform-grid-text-plus"><%-addRowText%></span>
				</button>

			<%}%>
		</div>
		<div class="pmdynaform-grid-fields">
			<div class="pmdynaform-grid">
				<div class="row pmdynaform-grid-thead"></div>
				<div id="<%-id%>-body" <% if(pager) {%> class="carousel slide" data-ride="carousel" <%}%> >
					<div class="<% if(pager) {%>carousel-inner <%}%> pmdynaform-grid-tbody pmdynaform-form"></div>
					<%if (functions) {%>
						<%if (layout === "static"){%>
							<div class="containerStaticGrid" style="overflow:hidden">
						<%}%>
						<div class="pmdynaform-grid-functions"></div>
						<%if (layout === "static"){%>
							</div>
						<%}%>
					<%}%>
					<%if (pager) {%>
						<div class="pmdynaform-grid-pagination">
						</div>
					<%}%>
				</div>
			</div>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-grid-pagination">
 	<ul class="pagination">
		<li class="toFirst"><a data-target="#<%-id%>" data-slide-to="0" href="#">&laquo;</a></li>
		<%
		var pointer;
		var display = "";
		var sectionSize = 5;
		var name;
		for (var i=0; i<paginationItems; i+=1) {
		    pointer = i+1;
    		if(pointer > sectionSize && !paginationRotate) {
                display = "none";
    		}
		%>
			<%
				name = "sec_" + i
			%>
			<li
				<%if(i === 0){%>
					class = "sec_<%=i+1%>"
				<%}else{%>
					class = "sec_<%=i+1%>"
				<%}%>
			>
			    <a data-target="#<%-id%>" data-slide-to="<%-i%>" href=""><%-pointer%></a>
			</li>
		<%}%>
		<li class="toLast"><a data-target="#<%-id%>" data-slide-to="<%-paginationItems-1%>" href="">&raquo;</a></li>
	</ul>
</script>

<script type="text/template" id="tpl-grid-totalcolumn">
	<%for(var j=0; j<totalrow.length; j+=1){%>
		<div class="col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%>">
			<span> <%=totalrow[j]? totalrow[j] : 0 %> </span>
		</div>
	<%}%>
</script>
<!--template show container when grid is empty-->
<script type="text/template" id="tpl-grid-empty">
	<div class="grid-empty">
		<span class="grid-empty-message"> <%=message%> </span>
	</div>
</script>

<script type="text/template" id="tpl-map">
	<div id="<%=id%>" name="<%=name%>" class="pmdynaform-field-geomap <%=namespace%>-<%=mode%>-<%=type%> form-group col-sm-<%=colSpan%> col-md-<%=colSpan%> col-lg-<%=colSpan%> pmdynaform-field">
		<label class="col-sm-<%=colSpanLabel%> col-md-<%=colSpanLabel%> col-lg-<%=colSpanLabel%> control-label pmdynaform-label">
        	<span data-toggle="tooltip" data-container="body" data-placement="bottom" class="textlabel"><%=label%></span>
            <%if(required){%>
	  			<span class="pmdynaform-field-required">*</span>
	  		<%}%>
        </label>
        <div class="col-sm-<%=colSpanControl%> col-md-<%=colSpanControl%> col-lg-<%=colSpanControl%> pmdynaform-field-control">
            <% if(disabled === true) {%>
                <div class="pmdynaform-map-layer-disabled"></div>
            <%}%>
        	<div id="PMD-<%-id%>" class="pmdynaform-map-canvas">
        	</div>
        	<%if (hint !== "" && hint !== null){%>
                <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%=hint%>"></span>
			<%}%>
        </div>
	</div>
</script>

<script type="text/template" id="tpl-annotation">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> pmdynaform-field" role="alert">
		<span>
			<p class="<%-namespace%>-control-<%-type%>">
				<span 
				<%if(ariaLabel !== ""){%>
					aria-label="<%-ariaLabel%>"
				<%}%>	
				><%=label%></span>
			</p>
		</span>				
	</div>
</script>



<script type="text/template" id="tpl-Geomap_mobile">
	<div id="<%-id%>" name="field-<%-name%>" class="<%=namespace%>-field-<%=type%> form-group col-sm-<%=colSpan%> col-md-<%-colSpan%> col-lg-<%=colSpan%> alert alert-warning" role="alert">
		<span>
			<p class="<%-namespace%>-control-<%-type%>">
				<span><%=label%></span>
			</p>
		</span>				
	</div>
</script>

<script type="text/template" id="tpl-Qrcode_mobile">
	<div id="<%-id%>" name="field-<%-name%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> alert alert-warning" role="alert">
		<span>
			<p class="<%-namespace%>-control-<%-type%>">
				<span><%= label %></span>
			</p>
		</span>				
	</div>
</script>

<script type="text/template" id="tpl-Signature_mobile">
	<div id="<%-id%>" name="field-<%-name%>" class="<%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> alert alert-warning" role="alert">
		<span>
			<p class="<%-namespace%>-control-<%-type%>">
				<span><%= label %></span>
			</p>
		</span>				
	</div>
</script>

<script type="text/template" id="tpl-panelField">
	<div id=<%-id%> class="panel panel-<%-typePanel%> <%-namespace%>-<%-type%>  <%-namespace%>-field-<%-type%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> pmdynaform-field" <% if (border) { %> style="border-width:<%-border%>" <%} %>>
		<div class="panel-heading" style="<%if(!showHeader){%>display:none;<%}%>">
			<h3 class="panel-title">
				<div class="header-content">
					<span><%-title%></span>
				</div>
			</h3>
		</div>
	<div class="panel-body">
		<div class = "content-body">

		</div>
	</div>
		<div class="panel-footer" style="<%if(!showFooter){%>display:none<%}%>">
			<div class="footer-content">

			</div>
		</div>
	</div>
</script>
<script type="text/template" id="tpl-ext-scannercode">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label class="control-label pmdynaform-label">
		        	<span class="textlabel"><%= label %></span>
		            <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
		        </label>
			</div>
		<%}%>
		<div <%if (group === 'form'){ %>
		  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		  		<%} else if (layout === "responsive") {%>
		  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		  		<%}%>>
		  		<scanner id="PMD-<%-id%>">
				<div class="pmdynaform-label-options">
							<span><%-value%></span>
				</div>
				</scanner>
		  		<button type="button" class="btn btn-default btn-md">
				  	<span class="glyphicon glyphicon-qrcode"></span> <%-labelButton%>
				</button>

			<%if (hint !== "" && hint !== null){%>
				<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
			<%}%>
		</div>
	</div>
</script>


<script type="text/template" id="tpl-extfile-plus">
	<div class="pmdynaform-file-containerimage">
		<buttonImage>
		<span class= "pmdynaform-file-preview">
			<div class = "pmdynaform-file-resizeimage-plus">+
			</div>
		</span>
		</buttonImage>
	</div>
</script>

<script type="text/template" id="tpl-ext-scanner-code">
	<span>
		<%=label%>
	</span>
</script>

<script type="text/template" id="tpl-extfile">
    <div id="<%-id%>"
         class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
        <% if(group === "form") {%>
        <div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
            <label class=" control-label pmdynaform-label">
                <span class="textlabel"><%= label %></span>
                <%if(required){%>
                <span class="pmdynaform-field-required">*</span>
                <%}%>
            </label>
        </div>
        <%}%>
        <div
        <%if(group === 'form'){ %>
        class="pmdynaform-file-control col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%>
        pmdynaform-field-control"
        <%}%> >
        <div class="pmdynaform-file-container<%if(dottedBox) { %>-dotted <%}%> pmdynaform-<%-type%>-container">
            <button type="button" class="<%-namespace%>-control-<%-type%> form-control" style="display:none">
                <%-labelButton%>
            </button>
            <input type="file" style="display:none;"
            <% if(disabled === true){%>disabled<%}%>
            <% if(multiple === true){%>multiple<%}%>
            >
            <%if (hint !== "" && hint !== null){%>
            <span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body"
                  data-placement="bottom" title="<%-hint%>"></span>
            <%}%>
            <% if(dnd) {%>
            <p style="float:left;" class="help-block"><%-dndMessage%></p>
            <%}%>
            <div class="pmdynaform-file-droparea-ext"></div>
        </div>
    </div>
    </div>
</script>

<script type="text/template" id="tpl-extvideo">
    <div class="pmdynaform-file-containervideo">
        <div class="pmdynaform-file-nameaudio">
            <span><%-name%></span>
        </div>
        <span class="pmdynaform-file-preview" style="float: left;">
			<div class="pmdynaform-file-resizevideo"></div>
		</span>
    </div>
</script>

<script type="text/template" id="tpl-extaudio">
    <div class="pmdynaform-file-containeraudio">
        <div class="pmdynaform-file-nameaudio">
            <span><%-name%></span>
        </div>
        <div class="pmdynaform-file-resizevideo"></div>
    </div>
</script>

<script type="text/template" id="tpl-extfile-plus-audio">
    <div class="pmdynaform-file-containerimage">
        <buttonImage>
			<span class="pmdynaform-file-preview">
				<div class="pmdynaform-file-resizeaudio-plus">
					<span class="glyphicon glyphicon-play-circle" style="margin:5px"></span>
				</div>
			</span>
        </buttonImage>
    </div>
</script>

<script type="text/template" id="tpl-extfile-plus-video">
    <div class="pmdynaform-file-containerimage">
        <buttonImage>
			<span class="pmdynaform-file-preview">
				<div class="pmdynaform-file-resizeaudio-plus">
					<span class="glyphicon glyphicon-film" style="margin:5px"></span>
				</div>
			</span>
        </buttonImage>
    </div>
</script>

<script type="text/template" id="tpl-extfile-plus-image">
    <div class="pmdynaform-file-containerimage file-plus">
        <buttonImage>
			<span class="pmdynaform-file-preview">
				<div class="pmdynaform-file-resizeaudio-plus">
					<span class="glyphicon glyphicon-picture" style="margin:5px"></span>
				</div>
			</span>
        </buttonImage>
    </div>
</script>

<script type="text/template" id="tpl-media-video">
    <div class="pmdynaform-media-videoContainer">
        <video src="<%-src%>" preload="none" controls="true">
            <p>Your browser does not support the video tag.</p>
        </video>
        <div class="pmdynaform-media-caption"></div>
        <div class="pmdynaform-media-control" display="none">
            <div class="pmdynaform-media-btmControl">
                <div class="btnPlay btn" title="Play/Pause video">
                    <span class="glyphicon glyphicon-play"></span>
                </div>
                <div class="pmdynaform-media-progress-bar">
                    <div class="pmdynaform-media-progress-external">
                    </div>
                    <div class="pmdynaform-media-progress">
                        <span class="pmdynaform-media-bufferBar"></span>
                        <span class="pmdynaform-media-timeBar"></span>
                    </div>
                    <div class="pmdynaform-media-progress-external">
                    </div>
                </div>
                <div class="sound sound2 btn" title="Mute/Unmute sound">
                    <span class="glyphicon glyphicon-volume-up"></span></div>
                <div class="btnFS btn" title="Switch to full screen">
                    <span class="glyphicon glyphicon-fullscreen"></span>
                </div>
            </div>

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

<script type="text/template" id="tpl-media-audio">
    <div class="pmdynaform-media-audioContainer">
        <audio preload="auto" src="<%-src%>">
            <source src="<%-src%>" type="audio/mp3">
            <source src="<%-src%>" type="audio/m4a">
            <p>Your browser does not support the video tag.</p>
        </audio>
        <div class="pmdynaform-media-caption"></div>
        <div class="pmdynaform-media-control">
            <div class="pmdynaform-media-btmControl">
                <div class="btnPlay btn" title="Play/Pause video">
                    <span class="glyphicon glyphicon-play"></span></div>
                <div class="pmdynaform-media-progress-bar">
                    <div class="pmdynaform-media-progress-external">
                    </div>
                    <div class="pmdynaform-media-progress">
                        <span class="pmdynaform-media-bufferBar"></span>
                        <span class="pmdynaform-media-timeBar"></span>
                    </div>
                    <div class="pmdynaform-media-progress-external">
                    </div>
                </div>
                <div class="sound sound2 btn" title="Mute/Unmute sound">
                    <span class="glyphicon glyphicon-volume-up"></span></div>
                <div class="btnFS btn" title="Switch to full screen">
                    <span class="glyphicon glyphicon-fullscreen"></span>
                </div>
            </div>

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

<script type="text/template" id="tpl-multimedia-renderingWeb">
    <%for(var i=0; i < elements.length; i+=1){%>
    <%if(type === 'imageMobile'){%>
    <img src="data:image/png;base64,<%-elements[i].base64%>"
         class='img-thumbnail'
         alt='Thumbnail Image'>
    <%}else{%>
    <div class='container-element'>
        <%if(ieVersion === 11 || ieVersion === 12){%>
        <a href="<%-elements[i].downloadLink%>" class="multimedia-open fa fa-download fa-2" aria-hidden='true'></a>
        <%}%>
        <%if (type === "videoMobile"){%>
        <video type='video/mp4'
        <%}else{%>
        <audio
        <%}%>
        class= "multimedia-web col-sm-12 col-md-12 col-lg-12"
        id="<%-elements[i].id%>"
        src= "<%-elements[i].filePath%>" controls
        >
    </div>
    <%}%>
    <%}%>
</script>


<script type="text/template" id="tpl-thumbnail-image">
    <div id="<%-idFile%>" class="pmdynaform-file-containerimage">
		<span class="pmdynaform-file-preview">
			<div id="<%-idFile%>" class="pmdynaform-file-resizeimage">
                    <div class="image-cancel" style="display:none">
                    <div class="image-cancel-icon"> <span class="icon-cancel"> <svg xmlns="http://www.w3.org/2000/svg"
                                                                                    fill="#000000" viewBox="0 0 24 24"
                                                                                    width="100%" height="100%">
                        <path
                                d="M12,2C6.47,2,2,6.47,2,12s4.47,10,10,10s10-4.47,10-10S17.53,2,12,2z M17,15.59L15.59,17L12,13.41L8.41,17L7,15.59 L10.59,12L7,8.41L8.41,7L12,10.59L15.59,7L17,8.41L13.41,12L17,15.59z"></path></svg> </span></div>
                    </div>
                    <img class="pmdynaform-image-ext" src=<%-src%>>

                    <span class="pmdynaform-file-overlay">
					    <span class="pmdynaform-file-updone"></span>
				    </span>

                <progress id="progressBar" value="0" max="100" style="width:100%;display:none"></progress>
			</div>
		</span>
    </div>
</script>


<script type="text/template" id="tpl-extgeo">
	<div id="<%=id%>" class="<%=namespace%>-field-<%=type%> <%if (group === 'form'){%> form-group col-sm-<%=colSpan%> col-md-<%=colSpan%> col-lg-<%=colSpan%> <%}%> <%=namespace%>-<%=mode%>-<%=type%> pmdynaform-field">
	    <% if(group === "form") {%>
		    <div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
			    <label class="control-label pmdynaform-label">
			    	<span class="textlabel"><%= label %></span>
			        <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
			    </label>
		    </div>
		<%} else if((group !== "form") && (layout === "form")){%>
			<label class="hidden-lg hidden-md hidden-sm visible-xs control-label pmdynaform-label col-xs-<%=colSpanLabel%>">
		  		<span><%= label %></span>
		  	</label>
		<%}%>
		<div <%if(group === 'form'){ %> class="pmdynaform-file-control col-lg-<%=colSpanControl%>" <%}%> >
			<div class="pmdynaform-geo-container">
			</div>
			<button type="button" class="btn btn-default btn-md">
				<span class="glyphicon glyphicon-map-marker"></span> <%=labelButton%>
			</button>
			<%if (hint){%>
			<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%=hint%>"></span>
			<%}%>
			<%if(preview) {%>
			<div class="pmdynaform-ext-geo" style="height:<%=height%>;"></div>
			<% } %>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-ext-scannercode">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
		<% if(group === "form") {%>
			<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
				<label class="control-label pmdynaform-label">
		        	<span class="textlabel"><%= label %></span>
		            <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
		        </label>
			</div>
		<%}%>
		<div <%if (group === 'form'){ %>
		  			class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
		  		<%} else if (layout === "responsive") {%>
		  			class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
		  		<%}%>>
		  		<scanner id="PMD-<%-id%>">
				<div class="pmdynaform-label-options">
							<span><%-value%></span>
				</div>
				</scanner>
		  		<button type="button" class="btn btn-default btn-md">
				  	<span class="glyphicon glyphicon-qrcode"></span> <%-labelButton%>
				</button>

			<%if (hint !== "" && hint !== null){%>
				<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
			<%}%>
		</div>
	</div>
</script>


<script type="text/template" id="tpl-extfile-plus">
	<div class="pmdynaform-file-containerimage">
		<buttonImage>
		<span class= "pmdynaform-file-preview">
			<div class = "pmdynaform-file-resizeimage-plus">+
			</div>
		</span>
		</buttonImage>
	</div>
</script>

<script type="text/template" id="tpl-ext-scanner-code">
	<span>
		<%=label%>
	</span>
</script>

<script type="text/template" id="tpl-ext-signature">
	<div id="<%-id%>" class="<%-namespace%>-field-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%> <%}%> <%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
	    <% if(group === "form") {%>
	    	<div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
			    <label class="control-label pmdynaform-label">
			    	<span class="textlabel"><%= label %></span>
			        <%if(required){%>
			  			<span class="pmdynaform-field-required">*</span>
			  		<%}%>
			    </label>
			</div>
		<%}%>
		<div <%if(group === 'form'){ %> class="pmdynaform-file-control col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%>  pmdynaform-field-control" <%}%> >
			<div id="PMD-<%-id%>" class="pmdynaform-signature-container">
				<button type="button" class="btn btn-default btn-md">
				  	<span class="glyphicon glyphicon-edit"></span><%-labelButton%></button>
				<%if (hint !== "" && hint !== null){%>
					<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-hint%>"></span>
				<%}%>
				<%if(preview) {%>
					<div class="pmdynaform-ext-signature" style="height:<%-height%>;"></div>
				<% } %>
			</div>
		</div>
	</div>
</script>

<script type="text/template" id="tpl-field-container">
    <div
            id="<%-id%>"
            name="field-<%-name%>"
            class="<%-namespace%>-field-<%-type%><%if (group === 'form'){%>form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%><%}%><%-namespace%>-<%-mode%>-<%-type%> pmdynaform-field">
        <%if(group === "form") {%>
        <label
            for="<%-name%>"
            class="col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%> control-label pmdynaform-label">
            <span
                class="textlabel">
                    <%=label%>
            </span>
            <%if(required){%>
            <span
                    class="pmdynaform-field-required">*
            </span>
            <%}%>
        </label>
        <%}%>
        <%if(layout === "form"){%>
        <label
                for="<%-name%>"
                class="hidden-lg hidden-md hidden-sm visible-xs control-label pmdynaform-label col-xs-<%-colSpanLabel%>">
            <span
                    class="textlabel">
                <%=label%>
            </span>
        </label>
        <%}%>
        <div
        <%if(layout === "form"){%>
        class="col-xs-<%-colSpanControl%> col-sm-12 col-md-12 col-lg-12"
        <%}else if (layout === "responsive"){%>
        class="col-xs-12 col-sm-12 col-md-12 col-lg-12"
        <%}else{%>
        class="col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
        <%}%>
        >
        <div class="pmdynaform-control-checkbox-list form-control">
            <div class="pmdynaform-checkbox-item field-container">
            <!--here append to control tag-->
            </div>
            <%if(group==="form" && hint){%>
                    <span
                            class="glyphicon glyphicon-info-sign"
                            data-toggle="tooltip"
                            data-container="body"
                            data-placement="bottom"
                            title="<%-hint%>">
                    </span>
            <%}%>
        </div>
        <input
            type = "hidden"
            id="<%-nameToPostLabelControl%>"
            name="<%-nameToPostLabelControl%>"
            value = "<%-data['label']%>"
        >
    </div>
    </div>
</script>

<script type="text/template" id="tpl-checkbox_boolean">
    <input
        type ="<%-type%>"
        id ="<%if(activePostForm){%><%-nameToPostControl%><%}else{%><%-id%><%}%>"
        class = "<%-namespace%>-control-<%-type%>"
        name ="<%if(activePostForm){%><%-nameToPostControl%><%}else{%><%-name%><%}%>"
        value =  "<%-value%>"
    <%if(disabled){%>
        disabled
    <%}%>
    <%if(selected){%>
        checked
    <%}%>
    >
    <span class="cloneUnchecked-container"></span>
</script>
<script type="text/template" id="tpl-flashMessage">
	<div class='alert alert-<%-type%> <%=(duration === 0) ? 'alert-dismissible' : ''%> fade in'>
		<% if (duration === 0) {%>
		<button type="button" class="close" data-dismiss="alert" aria-label="Close">
			<span aria-hidden="true">&times;</span>
		</button>
		<% } %>
		<%if(closable){%>
			<a href='#' class='close' data-dismiss='alert'></a>
		<%}%>
		<strong><%-emphasisMessage%></strong>
		<%-message%>
	</div>
</script>
<script type="text/template" id="tpl-modal-global">
    <div class="modal fade pm-modal-global" id="modalProgressBar" tabindex="-1" role="dialog">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-body">
                    <div class="pm-modal-loading"></div>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="tpl-progressbar">
        <div class="pm-progressbar col-xs-<%-col%>">
            <div class="progressbar-title">
                <div> <%-title%></div>
            </div>
            <div class="progress">
                <div class="progress-bar progress-bar-<%-type%>
                  <%if(striped){%>
                        progress-bar-striped
                  <%}%>
                  <%if(animate){%>
                        active
                  <%}%>
                 " role="progressbar" aria-valuenow="<%-value%>"
                     aria-valuemin="0"
                     aria-valuemax="100"
                     style="width: <%-value%>%;">
                    <%-value%>%
                </div>
            </div>
        </div>
</script>
<script type="text/template" id="tpl-multiplefile">
    <div id="<%-id%>" name="field-<%-name%>"
         class="<%-namespace%>-field-<%-type%> <%-namespace%>-<%-mode%>-<%-type%> <%if (group === 'form'){%> form-group col-sm-<%-colSpan%> col-md-<%-colSpan%> col-lg-<%-colSpan%>  pmdynaform-field<%}%>">
        <div class="row">
            <div class="col-sm-<%-colSpanLabel%> col-md-<%-colSpanLabel%> col-lg-<%-colSpanLabel%>">
                <label class="control-label pmdynaform-label">
                    <span data-toggle="tooltip" data-container="body" data-placement="bottom" class="textlabel"><%= label %></span>
                    <%if(required){%>
                    <span class="pmdynaform-field-required">*</span>
                    <%}%>
                </label>
            </div>
            <div
            <%if (group === 'form'){ %>
            class="col-sm-<%-colSpanControl%> col-md-<%-colSpanControl%> col-lg-<%-colSpanControl%> pmdynaform-field-control"
            <%}%>
            >
            <div class="pmdynaform-multiplefile-control">
                <%if (mode === 'disabled'){ %>
                <button type="button" class="btn btn-uploadfile-disabled"
                    <%if(tabIndex !== ""){%>
                        tabindex= "<%-tabIndex%>"
                    <%}%>
                    aria-label= "<%-ariaLabel%>"
                ><%- labelButton %></button>
                <%}else if(mode === 'edit') {%>
                <button type="button" class="btn btn-uploadfile"
                    <%if(tabIndex !== ""){%>
                        tabindex= "<%-tabIndex%>"
                    <%}%>
                    <%if(ariaLabel !== ""){%>
                        aria-label= "<%-ariaLabel%>"
                    <%}%>
                ><%- labelButton %></button>
                <%}%>
                <input type="file" multiple="multiple" accept="<%-extensions%>" style="display:none">
            </div>
            <ul class="content-print"></ul>
        </div>
    </div>
    <ul class="pmdynaform-multiplefile-box">
    </ul>
</script>

<script type="text/template" id="tpl-multiplefile-file">
    <li class="pmdynaform-mfile-wrapper">
        <div class="pmdynaform-mfile">
            <ul class="pmdynaform-mfile-actions">
                <li class="pmdynaform-mfile-action-item" data-action="download">
                    <a href="<%=downloadLink%>" class="fa fa-download" title="Download the file"></a>
                </li>
                <li class="pmdynaform-mfile-action-item" data-action="upload">
                    <a href="#" class="fa fa-pencil" title="Upload a new version"></a>
                </li>
                <li class="pmdynaform-mfile-action-item" data-action="delete">
                    <a href="#" class="fa fa-trash" title="Delete file and all its versions"></a>
                </li>
                <li class="pmdynaform-mfile-action-item" data-action="list">
                    <a href="#" class="fa fa-chevron-circle-down" title="Show versions"></a>
                </li>
                <li class="pmdynaform-mfile-action-item" data-action="abort">
                    <a href="#" class="fa fa-times" title="Cancel upload"></a>
                </li>
            </ul>
            <span class="pmdynaform-mfile-title" title="<%-filename%>">
                <div class="pmdynaform-mfile-icon fa fa-<%-iconClass%>"></div>
                <div class="pmdynaform-mfile-info">
                    <div class="pmdynaform-mfile-header">
                        <span class="pmdynaform-mfile-name"><%=filename%></span>
                        <span class="pmdynaform-mfile-version">
                            <% fileversion ? print('Version ' + fileversion) : print('')%>
                        </span>
                    </div>
                    <div class="pmdynaform-mfile-details"><%=details%></div>
                </div>
            </span>
            <%if (mode === "edit" && versionable) {%>
            <input type="file" class="pmdynaform-mfile-input" id="pmdynaform-input-<%-viewid%>" accept="<%-extensions%>"/>
            <%}%>
        </div>
    </li>
</script>

<script type="text/template" id="tpl-multiplefile-grid">
    <div class="pm-multiplefile-grid">
        <div class="pm-multiplefile-grid-label">
            <span class="multiple-file-grid-web"  data-toggle="tooltip" data-container="body" data-placement="top" title="Tooltip on top">Choose File</span>

        </div>
        <div class="pm-multiplefile-grid-icon">
            <a class="pm-multiplefile-upload"><i class="fa fa-upload" aria-hidden="true"></i></a>
        </div>
    </div>
    <ul class="content-print"></ul>
    <input name="form<%-id%>[0][appDocUid]" type="hidden" value="">
    <input name="form<%-id%>[0][name]" type="hidden" value="">
    <input name="form<%-id%>[0][version]" type="hidden" value="">
</script>

<script type="text/template" id="tpl-multiplefile-grid-field">
    <div class="pm-multiplefile-grid-label">
        <ul>
            <% if (gridDetailArray.length != 0) { %>
                <% for(var i = 0;i < gridDetailArray.length; i += 1) { %>
                    <li class="multiple-file-grid-web"  data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-gridDetailArray[i]%>"><%-gridDetailArray[i]%></li>
                <% } %>
            <% } else {%>
                <li class="multiple-file-grid-web"  data-toggle="tooltip" data-container="body" data-placement="bottom" title="<%-gridDetail%>"><%-gridDetail%></li>
            <% }%>
        </ul>
    </div>
    <div class="pm-multiplefile-grid-icon">
        <a class="pm-multiplefile-upload"><i class="fa fa-upload" aria-hidden="true"></i></a>
    </div>
</script>

<script type="text/template" id="tpl-multiplefile-version-loader">
    <li class="pmdynaform-mfile pmdynaform-mfile-loading-message"></li>
</script>

<script type="text/template" id="tpl-upload-modal">
    <div class="modal fade" id="modalUpload" tabindex="-1" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <span class="modal-title-upload-modal">&nbsp; </span>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="pm-modal-upload">
                            <%if (mode === 'disabled'){ %>
                            <button type="button" class="btn btn-uploadfile-disabled"><%- labelButton %></button>
                            <%}else if (mode === 'edit'){%>
                            <button type="button" class="btn btn-uploadfile"><%- labelButton %></button>
                            <%}%>
                            <input type="file" multiple="multiple" accept="<%-extensions%>" style="display:none">
                        </div>
                    </div>
                    <div class="row">
                        <ul class="pmdynaform-multiplefile-box"></ul>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal"><%- labelClose %></button>
                </div>
            </div>
        </div>
    </div>
</script>
<script type="text/template" id="tpl-spinner">
    <div class="col-xs-12">
           <div class="pm-field-loading"></div>
    </div>
</script>

	<script type="text/javascript" src="js/PMDynaform.js"></script>	
	<script>

    var variables;
	$(document).ready(function () {

        data1 =  {
                "name": "form-example",
                "items": [
                    {
                        "type":"panel",       
                        "mode": "edit",
                        "items": [
                            [
                                {
                                    "type": "grid",
                                    "colSpan": 12,
                                    "name": "Gridname1",
                                    "label": "Grid Label",
                                    "required": false,
                                    "rows": 1,
                                    "pageSize": 3,
                                    "mode": "edit",
                                    "hint": "This is a grid example",
                                    "pager": false,
                                    "columns": [
                                        {
                                            "variable": "country",
                                            "variable_uid": "943312492541b2101075730071729173",
                                            "dataType": "string",
                                            "name": "country",
                                            "id": "country",
                                            "label": "country",
                                            "defaultValue": "",
                                            "required": false,
                                            "hint": "",
                                            "dependentFields": [
                                              "subdivision",
                                              "location"
                                            ],
                                            
                                            "mode": "parent",
                                            "options": [],
                                            "title": "Country",
                                            "type": "dropdown"
                                        },
                                        {
                                            "type": "dropdown",
                                            "name": "subdivision",
                                            "label": "SubDivision",
                                            "title": "SubDivision",
                                            "dependentFields": ["location"],
                                            "maxLength": 10,
                                            "required": false,
                                            "readonly": false,
                                            "options":[],
                                            "hint":null,
                                            "variable_uid": "562853519541b20e79b6960026331275",
                                            "variable":"subdivision"
                                        },
                                        {
                                            "type": "dropdown",
                                            "name": "location",
                                            "label": "Location",
                                            "title": "Location",
                                            "dependentFields": [],
                                            "maxLength": 10,
                                            "required": false,
                                            "readonly": false,
                                            "options":[],
                                            "hint":null,
                                            "variable_uid": "448293955541b20b5e393c3052081446",
                                            "variable":"location"
                                        }
                                    ]
                                }
                            ]
                        ]
                               
                    }
                ]
            };
		
		
	});
	var pressClick = function (){
	    var keys= {
            "workspace": $("#workspace").val(),
            "process": $("#processid").val(),
            "token": $("#tokens").val(),
            "server": $("#server").val()
        };

        //Init the project
        project = new PMDynaform.core.Project({
            data: data1, 
            keys: {
                server: keys.server, //"http://michelangelo.pmos3.colosa.net/",
                projectId: keys.process, //"25084755253f3a016907523058545566",
                workspace: keys.workspace //"workflow3"
            },
            token: {
                accessToken: keys.token //"db0498b53483bb840e996a27d23ace1d49f1e35b"
            },
            renderTo: document.body
        });

        
	};		
	</script>
</body>
</html>