{% extends 'base_AdminLTE.html' %}

{% block title %}Docklet | Create Workspace{% endblock %}

{% block css_src %}
<!--<style>
.divcontent { overflow-y:scroll; height:200px;}
</style>-->
<link href="//cdn.bootcss.com/datatables/1.10.11/css/dataTables.bootstrap.min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/datatables/1.10.11/css/jquery.dataTables_themeroller.css" rel="stylesheet">
<link href="/static/dist/css/modalconfig.css" rel="stylesheet">

{% endblock %}

{% block panel_title %}Workspace Info{% endblock %}

{% block panel_list %}
<ol class="breadcrumb">
  <li>
      <a href="/dashboard/"><i class="fa fa-dashboard"></i>Home</a>
  </li>
</ol>
{% endblock %}

<div>
{% block content %}
<div class="row">
                <div class="col-lg-12">
                  <div class="box box-info">
                       <div class="box-header with-border">
                         <h3 class="box-title">Workspace Add</h3>

                         <div class="box-tools pull-right">
                           <button type="button" class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i>
                           </button>
                           <button type="button" class="btn btn-box-tool" data-widget="remove"><i class="fa fa-times"></i></button>
                         </div>
                       </div>
                        <div class="box-body">
				<form id="form" class="form-horizontal" action="/workspace/{{masterips[0].split("@")[0]}}/add/" method="POST">

				    <div class="form-group"><label class="col-sm-2 control-label">Workspace Name</label>
					    <div class="col-sm-10"><input type="text" class="form-control" name="clusterName" id="clusterName"></div>
				    </div>
				    <div class="hr-line-dashed"></div>
                    <br/>
		    		    <div class="form-group"><label class="col-sm-2 control-label">Location</label>
					    <div class="col-sm-10"><select id="masterselector" class="form-control">
						{% for master in masterips %}
						<option value="{{master.split("@")[0]}}">{{master.split("@")[1]}}</option>
						{% endfor %}
					    </select></div>
				    </div>
					<br/>
					<div class="form-group"><label class="col-sm-2 control-label"></label>
					    <div class="col-sm-10"><p id="masterdesc">{{masterdesc}}</p></div>
				    </div>
					<br/>
				    <div class="form-group"><label class="col-sm-2 control-label">Image Choose</label>
					    <div class="col-sm-10">
					    	<table id="imagetable" class="table table-striped table-bordered table-hover table-image" >
						    <thead>
						    <tr>
						    	<th>ImageName</th>
							<th>Type</th>
							<th>Owner</th>
							<th>Description</th>
							<th>Choose</th>
						    </tr>
						    </thead>
						    <tbody>
						    <tr>
							<td>base</td>
							<td>public</td>
							<td>docklet</td>
							<td>A base image for you</td>
							<td><div class="i-checks"><label><input type="radio" name="image" value="base_base_base" checked="checked"></label></div></td>
						    </tr>
						    {% for image in images['private'] %}
						    <tr>
							<td>{{image['name']}}</td>
							<td>private</td>
							<td>{{user}}</td>
							<td><a href="/image/{{masterips[0].split("@")[1]}}/description/{{image['name']}}_{{user}}_private/" target="_blank">{{image['description']}}</a></td>
							<td><div class="i-checks"><label><input type="radio" name="image" value="{{image['name']}}_{{user}}_private"></label></div></td>
						    </tr>
						    {% endfor %}
						    {% for p_user,p_images in images['public'].items() %}
						    	{% for image in p_images %}
						    	<tr>
								<td>{{image['name']}}</td>
								<td>public</td>
								<td>{{p_user}}</td>
								<td><a href="/image/{{masterips[0].split("@")[1]}}/description/{{image['name']}}_{{p_user}}_public/" target="_blank">{{image['description']}}</a></td>
								<td><div class="i-checks"><label><input type="radio" name="image" value="{{image['name']}}_{{p_user}}_public"></label></div></td>
						    	</tr>
							{% endfor %}
						    {% endfor %}
						    </tbody>
					        </table>
					    </div>
                    </div>

				    <div class="hr-line-dashed"></div>
				    <div class="panel-group" id="accordion">
                        <div class="panel panel-default">
                            <div class="panel-heading">
                                <h4 class="panel-title">
					<a data-toggle="collapse" data-panel="#accordion" href="#collapseOne">
                                        show advanced options
                                    </a>
                                </h4>
                            </div>
			    <div id="collapseOne" class="panel-collapse collapse">
                                <div class="panel-body">
				                    <div class="form-group">
                                        <label class="col-sm-2 control-label">CPU</label>
                                        <div class="col-sm-3"><input type="number" class="form-control" name="cpuSetting" id="cpuSetting" value = {{defaultsetting['cpu']}}  /> {{usage['cpu']}}CORE/{{quota['cpu']}}CORE
                                        </div>
                                    </div>
				                    <div class="form-group">
                                        <label class="col-sm-2 control-label">MEMORY</label>
                                        <div class="col-sm-3"><input type="number" class="form-control" name="memorySetting" id="memorySetting" value = {{defaultsetting['memory']}}  /> {{usage['memory']}}MB/{{quota['memory']}}MB
                                        </div>
                                    </div>
				                    <div class="form-group">
                                        <label class="col-sm-2 control-label">DISK</label>
                                        <div class="col-sm-3"><input type="number" class="form-control" name="diskSetting" id="diskSetting" value= {{defaultsetting['disk']}}  /> {{usage['disk']}} MB/{{quota['disk']}}MB
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <br/>
				    <div class="hr-line-dashed"></div>
				    <div class="row">
				    <div class="form-group">
					    <div class="col-sm-4 col-sm-offset-2">
						    <button class="btn btn-primary" type="submit">Create</button>
					    </div>
				    </div>
				    </div>
                            </form>
                        </div>
                    </div>
                    </div>

</div>
</div>
{% endblock %}

{% block script_src %}
    <!-- Custom and plugin javascript -->
    <script src="/static/js/inspinia.js"></script>

    <script src="http://cdn.bootcss.com/pace/1.0.2/pace.min.js"></script>

    <!-- Steps -->
    <script src="http://cdn.bootcss.com/jquery-steps/1.1.0/jquery.steps.min.js"></script>

    <!-- Jquery Validate -->
    <script src="http://cdn.bootcss.com/jquery-validate/1.15.0/jquery.validate.min.js"></script>


	<script src="http://cdn.bootcss.com/datatables/1.10.11/js/jquery.dataTables.js"></script>
	<script src="http://cdn.bootcss.com/datatables/1.10.11/js/dataTables.bootstrap.js"></script>
	<script src="http://cdn.bootcss.com/datatables-tabletools/2.1.5/js/TableTools.min.js"></script>


    <script type="text/javascript">
		$("select#masterselector").change(function() {
			var masterip=$(this).children('option:selected').val();
			var mastername=$(this).children('option:selected').html();
			console.log(masterip);
			document.getElementById("form").action="/workspace/"+masterip+"/add/";
			var host = window.location.host;
			$.post("http://"+host+"/getmasterdesc/"+mastername+"/", {}, function(data) {
				$("#masterdesc").html(data);
			});
			$.post("http://"+host+"/image/"+masterip+"/list/",{},function(data){
				var images = data.images;
				var imagehtml =
					"<thread>"
					+"<tr>"
					+"<th>ImageName</th>"
					+"<th>Type</th>"
					+"<th>Owner</th>"
					+"<th>Description</th>"
					+"<th>Choose</th>"
                                        +"</tr>"
					+"</thead>"
					+"<tbody>"
					+"<tr>"
					+"<td>base</td>"
					+"<td>public</td>"
					+"<td>docklet</td>"
					+"<td>A base image for you</td>"
					+'<td><div class="i-checks"><label><input type="radio" name="image" value="base_base_base" checked="checked"></label></div></td>'
					+"</tr>";
				for(var index in images.private) {
					var image = images.private[index];
					imagehtml +=
						"<tr>"
						+"<td>"+image.name+"</td>"
						+"<td>private</td>"
						+"<td>{{user}}</td>"
						+'<td><a href="/image/' + masterip + '/description/' + image.name + '_' + '{{user}}' + '_private/" target="_blank">' + image.description + '</a></td>'
						+'<td><div class="i-checks"><label><input type="radio" name="image" value="' + image.name + '_{{user}}_private"><label></div></td>'
						+"</tr>";
				}
				for(var p_user in images.public) {
					for(var index in images.public[p_user]) {
						image=images.public[p_user][index];
						imagehtml +=
							"<tr>"
							+"<td>"+image.name+"</td>"
							+"<td>public</td>"
							+"<td>" + p_user + "</td>"
							+'<td><a href="/image/' + masterip + '/description/' + image.name + "_" + p_user + '_public/" target="_blank">' + image.description + '</a></td>'
							+'<td><div class="i-checks"><label><input type="radio" name="image" value="' + image.name + "_" + p_user + '_public"><label></div></td>';
					}
				}
				$("#imagetable").html(imagehtml);
		},"json");
	});
    </script>
{% endblock %}