{% extends "base.html" %}

{% block extraheadcontent %}
<style>
  /* Style the execution buttons */
  button.execute { height:50px;width:210px;background-color:#4CAF50;text-align:center; border:2px #f69c55;border-radius: 12px; }
  button:disabled {
    cursor: not-allowed;
  }

  /* Define the columns that floats next to each other */
  .column1 {
      float: left;
      width: 280px;
      padding: 10px;
  }
  .column2 {
      float: left;
      width: 150px;
      padding: 10px;
  }

  /* Clear floats after the columns */
  .row:after {
      content: "";
      display: table;
      clear: both;
  }
</style>
{% endblock %}

{% load projecttags %}

{% block title %} {{object.name}} - SRTool {% endblock %}

{% block pagecontent %}

<div class="row">
  <!-- Breadcrumbs -->
	<div class="col-md-12">
		<ul class="breadcrumb" id="breadcrumb">
			<li><a href="{% url 'landing' %}">Home</a></li><span class="divider">&rarr;</span>
			<li><a href="{% url 'investigations' %}">Investigations</a></li><span class="divider">&rarr;</span>
			<li>{{object.name}}</li>
		</ul>
	</div>
</div>

<!-- Begin container -->

<div class="row">
  <div class="col-md-12">
    <div class="page-header build-data">
        <span class="srt_h1">Investigation {{object.name}} {% if not object.public %} <font color="red">[PRIVATE]</font> {% endif %}</span>
        {% if request.user.is_creator %}
            <span style="padding-left:30px;"><button id="select-quickedit" class="btn btn-default" type="button">Edit Status...</button></span>
            <span style="padding-left:30px;"><button id="select-notification" class="btn btn-default" type="button">Create Notification ...</button></span>
            <span style="padding-left:30px;"><button id="select-delete" class="btn btn-default" type="button" x-data="{{object.id}}">Delete</button></span>
        {% endif %}
    </div>
  </div>
</div>

<!-- include SRtool Metadata/Notification -->
{% include "srtool_metadata_include.html" with default_category="INVESTIGATION" default_url="investigation" %}

<div class="col-md-12">
 <div id="details-defect" style="border: 1px solid Blue; background-color:LightBlue; padding-left: 25px; padding-right: 20px; display:none;">
  <p><p>
  <div class="row">
  <button class="execute" id="submit-createdefect"> Submit New Defect </button>
  <button id="select-canceldefect"> Cancel </button>
  </div>
  <div class="row">
    <div class="column1">
      <p><b><label id="priority">Set Priority:</label></b>
      <div id="priority-list" class="scrolling" style="width: 120px;">
          <div class="checkbox"> <label>
              <input type="radio" name="priority" value="4" type="checkbox">  High
          </label><p></div>
          <div class="checkbox"> <label>
              <input type="radio" name="priority" value="3" type="checkbox" checked="yes">  Medium
          </label><p></div>
          <div class="checkbox"> <label>
              <input type="radio" name="priority" value="2" type="checkbox">  Low
          </label><p></div>
      </div>
    </div>
    <div class="column2">
      <p><b><label id="components">Set Components:</label></b>
      <div id="all-components" class="scrolling" style="width: 150px;">
      {% for component in components %}
          <div class="checkbox">
            <label>
              <input class="checkbox-components" name="{{component}}" type="checkbox">{{component}}
              {% if "Userspace" == component %}<hr>{% endif %}
            </label>
            <p>
          </div>
      {% endfor %}
      </div>
    </div>
  </div>
  Reason: <input type="text" id="input-defect-reason" name="defect-reason" size="20" placeholder="(optional)"> (e.g. "Security Advisory [- REASON -] CVE-2020-1234")
  <p><p>
 </div>
</div>

<HR ALIGN="center" WIDTH="100%">

<div class="row" style="padding-left: 25px;">
  <div class="col-md-5">
	<div class="well">
	<h2>Quick Info</h2>
		<dl class="dl-horizontal">
			<dt>Product:</dt>
			<dd><a href="{% url 'product' object.product.id %}">{{object.product.long_name}}</a></dd>

			<dt>Vulnerability:</dt>
			<dd><a href="{% url 'vulnerability' object.vulnerability.id %}">{{object.vulnerability.get_long_name}}</a></dd>

			<dt>Defect:</dt>
			  <dd>
				{% for ij in object.investigation_to_defect.all %}
				  {% if not forloop.first %}| {% endif %}<a href="{% url 'defect' ij.defect.id %}" target="_blank">{{ij.defect.name}} </a>
				{% endfor %}
				<p>
				{% if request.user.is_creator %}
				  <a class="btn btn-default navbar-btn " id="select-attachdefect">Attach Defect</a>
				  <a class="btn btn-default navbar-btn " id="select-createdefect">Create Defect</a>
				  <a class="btn btn-default navbar-btn " id="select-detachdefect">Detach Defect</a>
				{% endif %}
			</dd>

			<div id="details-attachdefect" style="display:none; border: 1px solid; padding:20px; width:400px; margin-bottom:25px; margin-left:150px">
				<p><b><label>Select Defect by Key:</label></b>
				<div id="input-attachdefect" style="padding-left: 50px">
					<p><input type="text" id="text-attachdefect" placeholder="Issue Key (ex. {{defect_example}})" size="20">	<button class="execute" id="submit-attachdefect"> Submit </button></p>
				</div>
			</div>

			<div id="details-detachdefect" style="display:none; border: 1px solid; padding:20px; width:400px; margin-bottom:25px; margin-left:150px">
				<p><b><label>Select Defect(s):</label></b>
				<div id="select-detachdefectlist" style="padding-left: 50px">
			    <div class="row">
			      <div id="all-investigation-to-defects" class="scrolling" style="width: 300px;">
			      {% for obj in investigation_to_defect %}
			  		<div class="checkbox">
			  		  <label>
			  			<input class="checkbox-defects" name="defect-list" value="{{obj.defect.id}}" type="checkbox">{{obj.defect.name}}
			  		  </label>
			  		  <p>
			  		</div>
			  		{% endfor %}
			      </div>
						<button class="execute" id="submit-detachdefect"> Detach </button>
			    </div>
			  </div>
			</div>

			<dt>Release Version:</dt>
			<dd>
				{% for ij in object.investigation_to_defect.all %}
				  {% if not forloop.first %}| {% endif %}<a href="{{ij.defect.url}}" target="_blank">{{ij.defect.release_version}} </a>
				{% endfor %}
			</dd>
	   </dl>
	</div>
  </div>
</div>

<hr>

<div class="row" style="padding-left: 25px;">
	<h3>Comments
		{% if request.user.is_creator %}
			<button id="select-newcomment" class="btn btn-default" type="button">Add comment ...</button>
		{% endif %}
	</h3>

	<div id="input-newcomment" style="padding-left: 50px; display:none;">
		<p><input type="text" id="text-newcomment" size="40">	<button class="execute" id="submit-newcomment"> Submit </button></p>
	</div>

	<table class="table table-striped table-condensed" data-testid="vuln-hyperlinks-table">
		<thead>
			<tr>
				<th>Comment</th>
				<th>Date</th>
				<th>Author</th>
				{% if request.user.is_creator %}
					<th>Manage</th>
				{% endif %}
			</tr>
		</thead>

		{% if object.investigation_comments.all %}
		  {% for c in object.investigation_comments.all %}
			<tr>
				<td>{{ c.comment }}</td>
				<td>{{ c.date }}</td>
				<td>{{ c.author }}</td>
				{% if request.user.is_creator or c.author == request.user.username %}
					<td>
						<span id="config_var_entry_'+configvars_sorted[i][2]+'" class="js-config-var-name"></span>
						<span class="glyphicon glyphicon-edit edit-comment" id="affected_edit_'+{{c.id}}+'" x-data="{{c.id}}"></span>
						<span class="glyphicon glyphicon-trash trash-comment" id="comment_trash_'+{{c.id}}+'" x-data="{{c.id}}"></span>
					</td>
				{% endif %}
			</tr>
		  {% endfor %}
		{% else %}
			<tr>
				<td>No comments found</td>
			</tr>
		{% endif %}
	</table>

</div>

<div class="row" style="padding-left: 25px;">
	<h3>Attachments
		{% if request.user.is_creator %}
			<a class="btn btn-default navbar-btn " id="select-addattachment">Add attachment ... </a>
		{% endif %}
	</h3>

	<div id="details-addattachment" style="padding-left: 50px; display:none;">
		<p><p>
		<div class="row">
			<form id="uploadbanner" enctype="multipart/form-data" method="post">{% csrf_token %}
				 <input id="fileDescription" name="fileDescription" type="text" placeholder="Enter Description" />
			   <input id="fileUpload" name="fileUpload" type="file" />
				 <input type="hidden" id="action" name="action" value="upload">
			   <input type="submit" value="submit file" id="submit-addattachment" />
			</form>
		</div>
	</div>

	<table class="table table-striped table-condensed" data-testid="vuln-hyperlinks-table">
		<thead>
			<tr>
				<th>Comment</th>
				<th>Name</th>
				<th>Size</th>
				<th>Date</th>
				<th>Author</th>
				<th>Manage</th>
			</tr>
		</thead>

		{% if object.investigation_uploads.all %}
		  {% for u in object.investigation_uploads.all %}
		  <tr>
			<td>{{ u.description }}</td>
			<td>{{ u.path|basename }}</td>
			<td>{{ u.size }}</td>
			<td>{{ u.date }}</td>
			<td>{{ u.author }}</td>
			<td>
				<span id="attachment_entry_'+{{u.id}}+'" class="js-config-var-name"></span>
				<form id="downloadbanner" enctype="multipart/form-data" method="post" >{% csrf_token %}
					<input type="hidden" id="action" name="action" value="download">
					<input type="hidden" id="record_id" name="record_id" value={{u.id}}>
					<span class="glyphicon glyphicon-download-alt submit-downloadattachment" id="attachment_download_'+{{u.id}}+'" x-data="{{u.id}}"></span>
					{% if request.user.is_creator %}
						<span class="glyphicon glyphicon-trash trash-attachment" id="attachment_trash_'+{{u.id}}+'" x-data="{{u.id}}"></span>
					{% endif %}
				</form>
			</td>
		  </tr>
		  {% endfor %}
		{% else %}
			<tr>
				<td>No comments found</td>
			</tr>
		{% endif %}
	</table>
</div>

<br/>
<hr/>

{% if request.user.is_creator %}
	<div class="row" style="padding-left: 25px;">
		<h3>Change Notifications
			{% if request.user.is_creator %}
				<button id="select-addusernotify" class="btn btn-default" type="button">Add user notification ...</button>
			{% endif %}
		</h3>

		<div id="details-addusernotify" style="padding-left: 50px; display:none;">
	  	<p><p>
	    <button class="execute" id="submit-addusernotify"> Submit </button>
	    <div class="row">
	      <p>
	      <div id="all-users" class="scrolling" style="width: 300px;">
	      {% for user in users %}
	  		<div class="checkbox">
	  		  <label>
	  			<input class="checkbox-users" name="update-users" value="{{user.pk}}" type="checkbox">{{user.name}}
	  		  </label>
	  		  <p>
	  		</div>
	  		{% endfor %}
	      </div>
	    </div>
	  </div>

		<table class="table table-striped table-condensed" data-testid="vuln-hyperlinks-table">
			<thead>
				<tr>
					<th>User</th>
					<th>Email</th>
					{% if request.user.is_creator %}
						<th>Manage</th>
					{% endif %}
				</tr>
			</thead>

			{% if object.investigation_notification.all %}
			  {% for u in object.investigation_notification.all %}
				<tr>
					<td>{{ u.user.name }}</td>
					<td>{{ u.user.email }}</td>
					{% if request.user.is_creator or u.user.name == request.user.username %}
						<td>
							<span id="attachment_entry_'+{{u.id}}+'" class="js-config-var-name"></span>
							<span class="glyphicon glyphicon-edit edit-usernotification" id="affected_edit_'+{{u.id}}+'" x-data="{{u.id}}"></span>
							<span class="glyphicon glyphicon-trash trash-usernotification" id="attachment_trash_'+{{u.id}}+'" x-data="{{u.id}}"></span>
						</td>
					{% endif %}
				</tr>
			  {% endfor %}
			{% else %}
				<tr>
					<td>No users found</td>
				</tr>
			{% endif %}
		</table>

	</div>

	<div class="row" style="padding-left: 25px;">
		<h3>User Access
			{% if request.user.is_creator %}
				<button id="select-adduseraccess" class="btn btn-default" type="button">Add user access ...</button>
			{% endif %}
		</h3>

		<div id="details-adduseraccess" style="padding-left: 50px; display:none;">
			<p><p>
			<button class="execute" id="submit-adduseraccess"> Submit </button>
			<div class="row">
				<p>
				<div id="all-users" class="scrolling" style="width: 300px;">
				{% for user in users %}
				<div class="checkbox">
					<label>
					<input class="checkbox-users" name="access-users" value="{{user.pk}}" type="checkbox">{{user.name}}
					</label>
					<p>
				</div>
				{% endfor %}
				</div>
			</div>
		</div>

		<table class="table table-striped table-condensed" data-testid="vuln-hyperlinks-table">
			<thead>
				<tr>
					<th>User</th>
					{% if request.user.is_creator %}
						<th>Manage</th>
					{% endif %}
				</tr>
			</thead>

			{% if object.public %}
			<tr>
				<td>All</td>
				<td>
				</td>
			</tr>
			{% endif %}

			{% if object.investigation_users.all %}
			  {% for u in object.investigation_users.all %}
				<tr>
					<td>{{ u.user.name }}</td>
					{% if request.user.is_creator %}
						<td>
							<span id="attachment_entry_'+{{u.id}}+'" class="js-config-var-name"></span>
							<span class="glyphicon glyphicon-edit edit-useraccess" id="affected_edit_'+{{u.id}}+'" x-data="{{u.id}}"></span>
							<span class="glyphicon glyphicon-trash trash-useraccess" id="attachment_trash_'+{{u.id}}+'" x-data="{{u.id}}"></span>
						</td>
					{% endif %}
				</tr>
			  {% endfor %}
			{% else %}
			  {% if not object.public %}
				<tr>
					<td>No users found</td>
				</tr>
			  {% endif %}
			{% endif %}
		</table>

	</div>
{% endif %}

<div class="row" style="padding-left: 25px;">
	<h3>History</h3>
	<table class="table table-striped table-condensed" data-testid="vuln-hyperlinks-table">
		<thead>
			<tr>
				<th>Comment</th>
				<th>Date</th>
				<th>Author</th>
			</tr>
		</thead>
		{% if object.investigation_history.all %}
		  {% for c in object.investigation_history.all %}
			<tr>
				<td>{{ c.comment }}</td>
				<td>{{ c.date }}</td>
				<td>{{ c.author }}</td>
			</tr>
		  {% endfor %}
		{% else %}
			<tr>
				<td>No history found</td>
			</tr>
		{% endif %}
	</table>
</div>

<script>
	var selected_newcomment=false;
	var selected_addusernotify=false;
	var selected_adduseraccess=false;
	var selected_addattachment=false;
	var selected_attachdefect=false;
	var selected_detachdefect=false;

    var selected_quickedit=false;
    var selected_notifyedit=false;

	$(document).ready(function() {
		function onCommitAjaxSuccess(data, textstatus) {
			if (window.console && window.console.log) {
				console.log("XHR returned:", data, "(" + textstatus + ")");
			} else {
				alert("NO CONSOLE:\n");
				return;
			}
			if (data.error != "ok") {
				alert("error on request:\n" + data.error);
				return;
			}
			// reload the page with the updated tables
			location.reload(true);
		}

		function onCommitAjaxError(jqXHR, textstatus, error) {
			console.log("ERROR:"+error+"|"+textstatus);
			alert("XHR errored1:\n" + error + "\n(" + textstatus + ")");
		}

		/* ensure cookie exists {% csrf_token %} */
		function postCommitAjaxRequest(reqdata) {
			reqdata["investigation_id"] = {{ object.id }}
			var ajax = $.ajax({
					type:"POST",
					data: reqdata,
					url:"{% url 'xhr_investigation_commit' %}",
					headers: { 'X-CSRFToken': $.cookie("csrftoken")},
					success: onCommitAjaxSuccess,
					error: onCommitAjaxError,
			});
		}

		/* Defect management */

		$('#select-attachdefect').click(function(){
			if (selected_attachdefect) {
				selected_attachdefect=false;
				$("#details-attachdefect").slideUp();
			} else {
				if (selected_detachdefect) {
					selected_detachdefect = false;
				}
				selected_attachdefect=true;
				$("#details-detachdefect").slideUp();
				$("#details-attachdefect").slideDown();
			}
		})

		$('#select-detachdefect').click(function(){
			if (selected_detachdefect) {
				selected_detachdefect=false;
				$("#details-detachdefect").slideUp();
			} else {
				if (selected_attachdefect) {
					selected_attachdefect = false;
				}
				selected_detachdefect=true;
				$("#details-detachdefect").slideDown();
				$("#details-attachdefect").slideUp();
			}
		})

		// Open Create-Defect Action
		$('#select-createdefect').click(function(){
			$("#details-defect").slideDown();
		});
		$('#select-canceldefect').click(function(){
			$("#details-defect").slideUp();
		});

		$('#submit-createdefect').click(function(){
			var component_list=[];
			$('#all-components input:checked').each(function(){
			  component_list.push($(this).attr('name'));
			});
			/* components are space delimited */
			component_list = component_list.join(" ");
			var priority=0
			$('#priority-list input:checked').each(function(){
			  priority = $(this).attr('value');
			});
			postCommitAjaxRequest({
				"action" : 'submit-createdefect',
				"defect_reason" : $("#input-defect-reason").val(),
				"components": component_list,
				"priority": priority,
			});
		})

		$('#submit-attachdefect').click(function(){
			var query=$('#text-attachdefect').val().trim()
			if (query=="") {
				alert("No query given");
				return;
			}
			postCommitAjaxRequest({
				"action" : 'submit-attachdefect',
				"query" : query,
			});
		});

		$('#submit-detachdefect').click(function(){
			var defect_list=[];
 		    $('input[name="defect-list"]').each(function(){
			  if ($(this).is(':checked')) {
			    defect_list.push($(this).prop('value'));
			  }
			});
            defect_list = defect_list.join(",");
		    if ("" == defect_list) {
				alert("No defects were selected");
				return;
		  }
		  postCommitAjaxRequest({
				"action" : 'submit-detachdefect',
				"defects" : defect_list,
		  });
		});

		/* Comment management */

		$('#select-newcomment').click(function(){
			if (selected_newcomment) {
				selected_newcomment=false;
				$("#input-newcomment").slideUp();
			} else {
				selected_newcomment=true;
				$("#input-newcomment").slideDown();
			}
		});

		$('#submit-newcomment').click(function(){
			var comment=$('#text-newcomment').val().trim()
			if (comment=="") {
				alert("No comment was written");
				return;
			}
			postCommitAjaxRequest({
				"action" : 'submit-newcomment',
				"comment" : comment,
			})
		});

		$('.trash-comment').click(function(){
			var result = confirm("Are you sure?");
			if (result){
				postCommitAjaxRequest({
					"action" : 'submit-trashcomment',
					"record_id" : $(this).attr('x-data'),
					});
			}
		});

		/* Attachement management */

		$('#select-addattachment').click(function() {
			if (selected_addattachment) {
				selected_addattachment=false;
				$("#details-addattachment").slideUp();
			} else {
				selected_addattachment=true;
				$("#details-addattachment").slideDown();
			}
		});

		$('.submit-downloadattachment').click(function() {
			$("#downloadbanner").submit();
		});

		$('.trash-attachment').click(function() {
			var result = confirm("Are you sure?");
			if (result){
				postCommitAjaxRequest({
					"action"	:	'submit-trashattachment',
					"record_id" : $(this).attr('x-data'),
				});
			}
		});

		/* User notify management */

		$('#select-addusernotify').click(function(){
		  if (selected_addusernotify) {
			selected_addusernotify=false;
			$("#details-addusernotify").slideUp();
		  } else {
			selected_addusernotify=true;
			$("#details-addusernotify").slideDown();
		  }
		});

		$('#submit-addusernotify').click(function(){
		  var user_list=[];
		  $('input[name="update-users"]').each(function(){
			if ($(this).is(':checked')) {
			  user_list.push($(this).prop('value'));
			}
		  });
          user_list = user_list.join(",");
		  if ("" == user_list) {
			alert("No users were selected");
			return;
		  }
		  postCommitAjaxRequest({
			"action" : 'submit-addusernotify',
			"users" : user_list,
			});
		});

		$('.trash-usernotification').click(function(){
			var result = confirm("Are you sure?");
			if (result){
				postCommitAjaxRequest({
					"action" : 'submit-trashusernotification',
					"record_id" : $(this).attr('x-data'),
					});
			}
		});

		/* User access management */

		$('#select-adduseraccess').click(function(){
			if (selected_adduseraccess) {
				selected_adduseraccess=false;
				$("#details-adduseraccess").slideUp();
			} else {
				selected_adduseraccess=true;
				$("#details-adduseraccess").slideDown();
			}
		});

		$('#submit-adduseraccess').click(function(){
			var user_list=[];
		    $('input[name="access-users"]').each(function(){
				if ($(this).is(':checked')) {
					user_list.push($(this).prop('value'));
				}
			});
            user_list = user_list.join(",");
			if ("" == user_list) {
				alert("No users were selected");
				return;
			}
			postCommitAjaxRequest({
				"action" : 'submit-adduseraccess',
				"users" : user_list,
				});
		});

		$('.trash-useraccess').click(function(){
			var result = confirm("Are you sure?");
			if (result){
				postCommitAjaxRequest({
					"action" : 'submit-trashuseraccess',
					"record_id" : $(this).attr('x-data'),
					});
			}
		});

		$('#select-quickedit').click(function(){
			if (selected_quickedit) {
				selected_quickedit=false;
				$("#details-quickedit").slideUp();
				$("#display-status").slideDown();
                document.getElementById("select-quickedit").innerText = "Edit status...";
                $("#select-quickedit").removeClass("blueborder");
			} else {
				selected_quickedit=true;
				$("#display-status").slideUp();
				$("#details-quickedit").slideDown();
                document.getElementById("select-quickedit").innerText = "Close edit status...";
                $("#select-quickedit").addClass("blueborder");
                document.getElementById("select-status-state").focus();
			}
		});

		$('#submit-quickedit').click(function(){
			var note=$('#text-note').val().trim()
			var private_note=$('#text-private-note').val().trim()
            var priority=$('#select-priority-state').val();
            var status=$('#select-status-state').val();
            var outcome=$('#select-outcome-state').val();
			postCommitAjaxRequest({
				"action" 		:	'submit-quickedit',
				"note"		: note,
				"private_note"  : private_note,
				"status" 		:	status,
				"outcome" 	:	outcome,
				"priority"	:	priority,
				});
		});

        $('#select-notification').click(function(){
            if (selected_notifyedit) {
                selected_notifyedit=false;
                $("#details-notify-edit").slideUp();
				$("#display-status").slideDown();
                document.getElementById("select-notification").innerText = "Create Notification ...";
                $("#select-notification").removeClass("blueborder");
            } else {
                selected_notifyedit=true;
				$("#display-status").slideUp();
                $("#details-notify-edit").slideDown();
                document.getElementById("select-notification").innerText = "Close notification";
                $("#select-notification").addClass("blueborder");
                document.getElementById("select-category-notify").focus();
            }
        });

        $('#submit-notification').click(function(){
            var category=$('#select-category-notify').val();
            var priority=$('#select-priority-notify').val();
            var note=$('#notification-note').val().trim();
            var url=$('#notification-url').val().trim();
			var user_list=[];
			$('input[name="notification-users"]').each(function(){
				if ($(this).is(':checked')) {
					user_list.push($(this).prop('value'));
				}
			});
            user_list = user_list.join(",");
			if ("" == user_list) {
				alert("No users were selected");
				return;
			}
            postCommitAjaxRequest({
                "action"        : 'submit-notification',
                "category"      : category,
                "priority"      : priority,
                "note"          : note,
                "url"           : url,
                "users"         : user_list,
                });
        });

        $('#select-delete').click(function(){
 			var result = confirm("Are you sure?");
			if (result){
				postCommitAjaxRequest({
					"action" : 'submit-trashinvestigation',
					"record_id" : $(this).attr('x-data'),
					});
			}
        });



		/* Set the report link */
		$('#report_link').attr('href',"{% url 'report' request.resolver_match.url_name %}?record_list={{object.id}}");
	});
</script>

{% endblock %}