<!--
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
Copyright (c) 2014 Mozilla Corporation

Contributors:
Jeff Bryner jbryner@mozilla.com
-->

<!--edit investigation form -->
<template name="editinvestigationform">
<style>
    
    .daterangepicker td{
        color:black;
    }
 
    .tabcontent {
        display:none;
    }

    .tabcontent.active {
        display:block;
    }

    textarea {
        overflow: auto; 
        vertical-align: top; /* Improves readability, alignment */
    }    

</style>
<div class="container">
    <div class="row col-xs-4 col-xs-offset-3 alert alert-info">
          <div class="col-xs-2"><button class="btn btn-primary" id="saveInvestigation">save</button></div>
          <span class="col-xs-2" id="saveMessage"></span>
    </div>
</div>
<div class="container">
    <div class="row col-xs-10 center ">
        <ul class="nav nav-tabs">
            <li class="tabnav active"><a href="#maintab">Main</a></li>
            <li class="tabnav"><a href="#indicatorstab">Indicators</a></li>
            <li class="tabnav"><a href="#evidencetab">Evidence</a></li>
            <li class="tabnav"><a href="#notestab">Notes</a></li>
            <li class="tabnav"><a href="#referencestab">References</a></li>
            <li class="tabnav"><a href="#theoriestab">Theories</a></li>
            <li class="tabnav"><a href="#timestampstab">Timestamps</a></li>
            <li class="tabnav"><a href="#mitigationstab">Mitigations</a></li>
            <li class="tabnav"><a href="#lessonstab">Lessons Learned</a></li>
        </ul>
    </div>
</div>
<div class="container">
    <div id="maintab" class="tabcontent active ">
        <div class="row col-xs-12">
            <div class="col-xs-9">
            <form id="editinvestigationform" class="form-horizontal  col-xs-10 col-xs-offset-2">
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="summary">Summary</label>
                    <div class="col-xs-10">
                        <input id="summary" name="summary" placeholder="short description" class="summary form-control" required type="text" value="{{summary}}">
                    </div>
                </div>
    
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="description">Description</label>
                    <div class="col-xs-10">
                        <textarea id="description" name="description" placeholder="long description" class="form-control description" rows=4>{{description}}</textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="dateOpened">Date Opened</label>
                    <div class="col-xs-10">
                    <div class="input-group">
                        <span class="add-on input-group-addon"><i class="icon-calendar fa fa-calendar"></i></span>
                        <input class="dateOpened calendarfield form-control" name="dateOpened" id="dateOpened" type="text" placeholder="today" value="{{uiDateFormat dateOpened}}">
                    </div>
                    </div>
                </div>
                
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="dateClosed">Date Closed</label>
                    <div class="col-xs-10">
                    <div class="input-group">
                        <span class="input-group-addon"></span>
                        <input class="form-control dateClosed calendarfield form-control" name="dateClosed" id="dateClosed" type="text" value="{{uiDateFormat dateClosed}}">
                    </div>
                    </div>
                </div>                
                <!-- Phase -->
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="phase">Phase</label>
                    <div class="col-xs-10">
                      <select id="phase" name="phase" class="form-control">
                          <option {{ isselected 'Identification' phase }}>Identification</option>
                          <option {{ isselected 'Evidence' phase }}>Evidence</option>
                          <option {{ isselected 'Holding' phase }}>Holding</option>
                          <option {{ isselected 'Escalation' phase }}>Escalation</option>
                          <option {{ isselected 'Closed' phase }}>Closed</option>
                      </select>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-xs-2 control-label" for="tags">Tags</label>                
                    <div class="tags col-xs-10">
                        <span class="form-control alert alert-info">drag here to add a tag
                            <ul class="pull-left list-unstyled">
                            {{#each tags}}
                                <li class="list-unstyled pull-left">
                                    <div class="form-control">{{.}}<button type="button" class="tagdelete close pull-left" aria-hidden="false">&times;</button></div>
                                </li>
                            {{/each}}
                            </ul>
                        </span>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="dateReported">Timeline</label>
                    <div class="col-xs-10">
                        <div class="input-prepend input-group input-append">
                            <span class="add-on input-group-addon"><i class="icon-calendar fa fa-calendar"></i></span>
                            <input class="form-control dateReported calendarfield form-control" name="dateBegin" id="dateBegin" type="text" value="{{uiDateFormat dateBegin}}">
                            <span class="input-group-addon" style="padding-right:12px">Begin</span>
                        </div>
                        <div class="input-prepend input-group input-append">
                            <span class="add-on input-group-addon"><i class="icon-calendar fa fa-calendar"></i></span>
                            <input class="form-control dateVerified calendarfield form-control" name="dateEnd" id="dateEnd" type="text" value="{{uiDateFormat dateEnd}}">
                            <span class="input-group-addon" style="padding-right: 23px">End</span>
                        </div>
                    </div>
                </div>
            </form>
            </div>
            <div class="vtagholders col-xs-3">
                {{>veristags}}
            </div>
        </div>
    </div>
    
    <div id="referencestab" class="tabcontent">
        <div class="row col-xs-8">
            <form id="referencesform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <div class="row">
                        <label class="control-label col-xs-2" for="newReference">Reference</label>
                        <div class="col-xs-8">
                          <input id="newReference" class="form-control" type="text" value="">
                        </div>
                        <div class="col-xs-2">
                            <button id="saveReference" type="submit" class="form-control btn btn-primary submit">Save</button>
                        </div>
                    </div>
                    <div class="row">
                        <ul class="list-unstyled col-xs-offset-2">
                            {{#each references}}
                            <li>
                                {{#if isURL . }}
                                    <div class="col-xs-12"><a href="{{.}}" class="brightURL" target="_blank">{{.}}</a><button type="button" class="referencedelete close btn btn-danger pull-left" aria-hidden="false">&times;</button></div>
                                
                                {{else}}
                                    <div class="col-xs-12">{{.}}<button type="btn" class="referencedelete close pull-left" aria-hidden="false">&times;</button></div>    
                                {{/if}}
                            </li>
                            {{/each}}
                        </ul>
                    </div>
                </div>
            </form>
        </div>
    </div>
    
    <div id="theoriestab" class="row tabcontent">
        <div class="row col-xs-8">
        <form id="theoriesform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="theorySummary">Theory:</label>
                    <div class="col-xs-9">
                        <input id="theorySummary" class="form-control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="theoryDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="theoryDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="theoryStatus">Status:</label>
                    <div class="col-xs-5">
                        <input id="theoryStatus" placeholder="status" class="form-control" type="text">
                    </div>
                </div>                
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveTheory" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                    <label class="pull-left" >Existing Theories:</label>
                    <table id="theories" class="table table-striped table-hover table-condensed">
                        <thead>
                            <tr>
                                <td></td>
                                <td>Summary</td>
                                <td>Description</td>
                                <td>Status</td>
                            </tr>
                        </thead>
                        <tbody>
                        {{#each theories}}
                            <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                                <td><button class="btn btn-primary theoryedit" data-theoryid={{_id}}>edit</button></td>
                                <td>{{summary}}</td>
                                <td>{{description}}</td>
                                <td>{{status}}</td>
                                <td><button class="btn btn-danger theorydelete" data-theoryid={{_id}}>delete</button></td>
                            </tr>
                        {{/each}}
                        </tbody>
                    </table>
                </div>
        </form>
        </div>
    </div>

    <div id="timestampstab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="timestampsform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="timestampText">Timestamp:</label>
                    <div class="col-xs-9">
                        <input id="timestampText" class="form-control" type="text" value="" placeholder="date/time" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="timestampDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="timestampDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveTimestamp" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing Timestamps:</label>
                <table id="timeline" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Timestamp</td>
                            <td>Description</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each timestamps}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-default timestampedit" data-timestampid={{_id}}>edit</button></td>
                            <td>{{timestamp}}</td>
                            <td>{{description}}</td>
                            <td><button class="btn btn-danger timestampdelete" data-timestampid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>    

    <div id="mitigationstab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="mitigationsform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="mitigationSummary">Mitigation:</label>
                    <div class="col-xs-9">
                        <input id="mitigationSummary" class="form-control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="mitigationTemporary">Temporary?</label>
                    <div class="col-xs-2">
                        <input type="checkbox"  class="form-control" id="mitigationTemporary">
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="mitigationDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="mitigationDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <label class="control-label col-xs-2" for="mitigationStatus">Status:</label>
                    <div class="col-xs-5">
                        <input id="mitigationStatus" placeholder="status" class="form-control" type="text">
                    </div>
                </div>

                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveMitigation" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing Mitigations:</label>
                <table id="mitigations" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Summary</td>
                            <td>Description</td>
                            <td>Temporary?</td>
                            <td>Status</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each mitigations}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-primary mitigationedit" data-mitigationid={{_id}}>edit</button></td>
                            <td>{{summary}}</td>
                            <td>{{description}}</td>
                            <td>{{temporary}}</td>
                            <td>{{status}}</td>
                            <td><button class="btn btn-danger mitigationdelete" data-mitigationid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>
    
    <div id="lessonstab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="lessonsform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="lessonSummary">Lesson:</label>
                    <div class="col-xs-9">
                        <input id="lessonSummary" class="form-control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>              
                <div class="form-group">
                    <label class="control-label col-xs-2" for="lessonDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="lessonDescription" placeholder="long description" class="form-control" rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveLesson" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing Lessons:</label>
                <table id="lessons" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Summary</td>
                            <td>Description</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each lessons}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-primary lessonedit" data-lessonid={{_id}}>edit</button></td>
                            <td>{{summary}}</td>
                            <td>{{description}}</td>
                            <td><button class="btn btn-danger lessondelete" data-lessonid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>

    <div id="notestab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="notesform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="noteSummary">Note:</label>
                    <div class="col-xs-9">
                        <input id="noteSummary" class="form-=control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>              
                <div class="form-group">
                    <label class="control-label col-xs-2" for="noteDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="noteDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveNote" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing Notes:</label>
                <table id="notes" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Summary</td>
                            <td>Description</td>
                            <td>Status</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each notes}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-primary noteedit" data-noteid={{_id}}>edit</button></td>
                            <td>{{summary}}</td>
                            <td>{{description}}</td>
                            <td>{{status}}</td>
                            <td><button class="btn btn-danger notedelete" data-noteid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>

    <div id="indicatorstab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="indicatorsform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="indicatorSummary">indicator:</label>
                    <div class="col-xs-9">
                        <input id="indicatorSummary" class="form-=control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>              
                <div class="form-group">
                    <label class="control-label col-xs-2" for="indicatorDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="indicatorDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveIndicator" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing indicators:</label>
                <table id="indicators" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Summary</td>
                            <td>Description</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each indicators}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-primary indicatoredit" data-indicatorid={{_id}}>edit</button></td>
                            <td>{{summary}}</td>
                            <td>{{description}}</td>
                            <td><button class="btn btn-danger indicatordelete" data-indicatorid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>
    <div id="evidencetab" class="row tabcontent">
        <div class="row col-xs-8">
            <form id="evidenceform" class="form-horizontal col-xs-12 col-xs-offset-3" >
                <div class="form-group">
                    <label class="control-label col-xs-2" for="evidenceSummary">Summary:</label>
                    <div class="col-xs-9">
                        <input id="evidenceSummary" class="form-control" type="text" value="" placeholder="short summary" required>
                    </div>
                </div>              
                <div class="form-group">
                    <label class="control-label col-xs-2" for="evidenceDescription">Description:</label>
                    <div class="col-xs-10">
                        <textarea id="evidenceDescription" placeholder="long description" class="form-control"  rows=4 required></textarea>
                    </div>
                </div>
                <div class="form-group">
                    <div class="col-xs-2 col-xs-offset-2">
                        <button id="saveEvidence" type="submit" class="btn btn-primary submit">Save</button>
                    </div>
                </div>
                <!-- table of existing items-->
                <div class="form-group">
                <label class="pull-left" >Existing evidence:</label>
                <table id="evidence" class="table table-striped table-hover table-condensed">
                    <thead>
                        <tr>
                            <td></td>
                            <td>Summary</td>
                            <td>Description</td>
                        </tr>
                    </thead>
                    <tbody>
                    {{#each evidence}}
                        <tr class="tooltip-wrapper info-row" title="{{creator}} at {{dateCreated}}" data-toggle="tooltip">
                            <td><button class="btn btn-primary evidenceedit" data-evidenceid={{_id}}>edit</button></td>
                            <td>{{summary}}</td>
                            <td>{{description}}</td>
                            <td><button class="btn btn-danger evidencedelete" data-evidenceid={{_id}}>delete</button></td>
                        </tr>
                    {{/each}}
                    </tbody>
                </table>
                </div>
            </form>
        </div>
    </div>
</div>
</template>
