{#  -*- coding: utf-8 -*- #} {# NOT DID ALREADY!!! #}
{% extends 'baseadmin.tmpl' %}
{% block content %}


		<!-- Modal Delete Group of Computer -->
		<div class="modal fade" id="delGroup" tabindex="-1" role="dialog" aria-labelledby="delGroupLabel" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		  <form method="get" action="/admin/computer/delgroup">
			<div class="modal-content">
			  <div class="modal-header">
				<h5 class="modal-title" id="delGroupLabel">Delete group from computer {{computername}}</h5>
			  </div>
			  <div class="modal-body">
				 <div class="form-group">
				 	<input type="text" readonly="readonly" class="form-control" hidden="hidden" name="computeriddel" id="computeriddel" value="{{computerid}}"/>
					<p>Are you sure?<br>
					<label for="computername" class="col-form-label">Group:</label>
				  </div>
					<input type="text" readonly="readonly" class="form-control" name="groupnamedel" id="groupnamedel">
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-danger">Delete</button>
			  </div>
			</div>
			</form>
		  </div>
		</div>
		
		<!-- Modal Add Group to Computer To Group -->
		<div class="modal fade" id="addGroup" tabindex="-1" role="dialog" aria-labelledby="addGroupLabel" aria-hidden="true">
		  <div class="modal-dialog" role="document">
		  <form method="get" action="/admin/computer/addgroup">
			<div class="modal-content">
			  <div class="modal-header">
				<h5 class="modal-title" id="addGroupLabel">Add group to computer {{computername}}</h5>
			  </div>
			  <div class="modal-body">
				 <div class="form-group">
					<p>Add group to computer {{computername}}<br>
					<input type="text" readonly="readonly" class="form-control" hidden="hidden" name="computeridadd" value="{{computerid}}"/>
					<label for="computername2" class="col-form-label">Group:</label>
					  <select class="form-control" name="groupidadd" id="groupidadd">
						{% for item in allgroups %}
						<option value="{{item.0}}">{{item.1}}</option>
						{% endfor %}
					  </select>
				  </div>
			  </div>
			  <div class="modal-footer">
				<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
				<button type="submit" class="btn btn-primary">Add</button>
			  </div>
			</div>
			</form>
		  </div>
		</div>


      <h2>Computer {{computername}}</h2>
		  <br>
		  <h2>Groups of {{computername}}</h2>
          <div class="table-responsive">
            <table class="table table-striped table-sm">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Group Name</th>
                  <th>Cooks</th>
                  <th></th>
                </tr>
              </thead>
              <tbody>
			  {% for item in groups %} {#['ID_G','Name','Cooks[CookName]']#}
                <tr>
                  <td><a href="/admin/group?ID_G={{item.0}}">{{item.0}}</a></td>
                  <td><a href="/admin/group?ID_G={{item.0}}">{{item.1}}</a></td>
                  <td style='width:50%;'>
                  {% for x in item.2 %}
                    {{x.0}},
                  {% endfor %}
                  </td>
				  <td><a class="btn btn-outline-danger btn-sm" data-wgroup="{{item.1}}" data-toggle="modal" data-target="#delGroup">Delete group {{item.1}} from {{computername}}</a></td>
                </tr>
              {% endfor %}
              <tr>
              <td>#</td>
              <td colspan="3"> <a class="btn btn-outline-success btn-sm" data-wcomp="{{computername}}" data-toggle="modal" data-target="#addGroup">Add Group to {{computername}}</a></td>
              </tbody>
            </table>
		  <br>


      	<script>
		  $('#delGroup').on('show.bs.modal', function (event) {
			  var button = $(event.relatedTarget) // Button that triggered the modal
			  var recipient = button.data('wgroup') // Extract info from data-* attributes
			  var modal = $(this)
			  //modal.find('.modal-title').text('New message to ' + recipient)
			  modal.find('#groupnamedel').val(recipient)
			})
			</script>
{% endblock %}