{{define "tab-content"}}
<div class="modal fade" id="helpModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Create Test Case</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span>&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <table class="help-table">
                    <tr>
                        <td colspan="2">
                            You can fill in all the relevant data for a new test case in this form.
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><h5>Buttons</h5></td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-secondary">
                                <i class="fa fa-times" aria-hidden="true"></i>
                                <span class="d-none d-sm-inline"> Abort</span>
                            </button>
                        </td>
                        <td>Aborts the creation process.</td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-success">
                                <i class="fa fa-floppy-o" aria-hidden="true"></i>
                                <span class="d-none d-sm-inline"> Save</span>
                            </button>
                        </td>
                        <td>Confirms the form content and proceeds with creation.</td>
                    </tr>
                    <tr>
                        <td colspan="2"><h5>Form Fields</h5></td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Test Case Name</strong>
                        </td>
                        <td>Enter a short but descriptive name for the test case.</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Test Case Description</strong>
                        </td>
                        <td>Describe the purpose of that test case in some sentences.</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Test Case Conditions</strong>
                        </td>
                        <td>State some conditions that must be fulfilled prior to test case execution.</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Test Steps</strong>
                        </td>
                        <td>Add some test steps here.</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Variants & Versions</strong>
                        </td>
                        <td>Select some versions under which the test case can be executed for each relevant variant.</td>
                    </tr>
                    <tr>
                        <td>
                            <strong>Estimated Test Time (hh:mm)</strong>
                        </td>
                        <td>Enter an estimated amount of time that is needed to execute the whole test.</td>
                    </tr>
                </table>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>
<div class="tab-card card" id="tabTestCases">
    <form id="testCaseEditForm">
        <nav class="navbar navbar-light action-bar p-3">
            <div class="input-group flex-nowrap">
                <button class="btn btn-secondary" id="buttonAbort">
                    <i class="fa fa-times" aria-hidden="true"></i>
                    <span class="d-none d-sm-inline"> Abort</span>
                </button>
                <button class="btn btn-success ml-2" id="buttonSaveNew">
                    <i class="fa fa-floppy-o" aria-hidden="true"></i>
                    <span class="d-none d-sm-inline"> Save</span>
                </button>
            </div>
        </nav>
        <div class="row tab-side-bar-row">
            <div class="col-md-9 p-3">
                <h4 class="mb-3">Create Test Case</h4>
                <div class="form-group">
                    <label for="inputTestCaseName"><strong>Test Case Name</strong></label>
                    <input class="form-control" id="inputTestCaseName"
                           placeholder="Enter test case name" required>
                </div>
                <div class="form-group">
                    <label for="inputTestCaseDescription"><strong>Test Case Description</strong></label>
                    <textarea class="form-control" id="inputTestCaseDescription" rows="4"
                              placeholder="Describe the test case"></textarea>
                </div>
                <div class="form-group">
                    <label for="inputTestCasePreconditions"><strong>Test Case Conditions</strong></label>
                    <textarea class="form-control" id="inputTestCasePreconditions" rows="4"></textarea>
                </div>

                <div class="form-group">
                    <label for="inputTestSteps">Test Steps</label>
                    <button type="button" class="btn btn-sm btn-primary ml-auto mb-2" id="buttonAddTestStep"
                                                data-toggle="modal" data-target="#modal-teststep-edit">
                                            Add Test Step
                                        </button>
                    <ol class="list-group" id="testStepsAccordion" data-children=".li"></ol>
                     {{template "modal-teststep-edit" .}}
                </div>
            </div>
            <div class="col-md-3 p-3 tab-side-bar">
                <div class="form-row">
                    <div class="col-12">
                        <strong>SUT-Version</strong>
                        <button class="btn btn-primary btn-sm disabled mb-2" disabled>
                            <i class="fa fa-wrench" aria-hidden="true"></i>
                        </button>
                    </div>
                    <div class="col-2 col-sm-1 col-md-12 col-lg-3">
                        <label for="inputTestCaseSUTVersionFrom">
                            <abbr title="The first version of the system under test which can be tested by this version of the test case">
                                <strong>From</strong>
                            </abbr>
                        </label>
                    </div>
                    <div class="col-10 col-sm-11 col-md-12 col-lg-9">
                        <select class="custom-select mb-2" id="inputTestCaseSUTVersionFrom">
                            <option class="dropdown-item" selected>Oldest Version</option>
                            {{ range .Project.SUTVersions }}
                            <option class="dropdown-item">{{ . }}</option>
                            {{ end }}
                            <option class="dropdown-item">Current Version</option>
                        </select>
                    </div>
                    <div class="col-2 col-sm-1 col-md-12 col-lg-3">
                        <label for="inputTestCaseSUTVersionTo">
                            <abbr title="The last version of the system under test which can be tested by this version of the test case">
                                <strong>To</strong>
                            </abbr>
                        </label>
                    </div>
                    <div class="col-10 col-sm-11 col-md-12 col-lg-9">
                        <select class="custom-select" id="inputTestCaseSUTVersionTo">
                            <option class="dropdown-item">Oldest Version</option>
                            {{ range .Project.SUTVersions }}
                            <option class="dropdown-item">{{ . }}</option>
                            {{ end }}
                            <option class="dropdown-item" selected>Current Version</option>
                        </select>
                    </div>
                </div>
                <div class="form-group mt-4">
                    <label for="inputHours"><strong>Estimated Test Time (hh:mm)</strong></label>
                    <div class="row m-0">
                        <div class="col-lg-6 col-md-12 col-sm-3 col-6 p-0 pb-md-2">
                            <div class="input-group mb-2 mb-sm-0 ">
                                <input type="number" class="form-control pt-0 pb-0" id="inputHours" placeholder="h"
                                       min="0" oninput="checkHours(this)">
                                <div class="btn-group-vertical">
                                    <button type="button" id="hour-plus" class="input-group-addon btn btn-primary">
                                        <span>&#x2b;</span>
                                    </button>
                                    <button type="button" id="hour-minus" class="input-group-addon btn btn-primary">
                                        <span>&#x2212;</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                        <div class="col-lg-6 col-md-12 col-sm-3 col-6 p-0 pl-2 pl-md-0 pl-lg-2">
                            <div class="input-group mb-2 mb-sm-0 ">
                                <input type="number" class="form-control pt-0 pb-0" id="inputMinutes" placeholder="min"
                                       min="0" max="59" oninput="checkMins(this)">
                                <div class="btn-group-vertical">
                                    <button type="button" id="minute-plus" class="input-group-addon btn btn-primary">
                                        <span>&#x2b;</span>
                                    </button>
                                    <button type="button" id="minute-minus" class="input-group-addon btn btn-primary">
                                        <span>&#x2212;</span>
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </form>
    <script src="/static/js/testcases.js"></script>

</div>
<div class="invisible" id="emptyTestStepElement">
<li class="list-group-item" id="testStep00000">
    <span id="ActionField" data-toggle="collapse" data-parent="#testStepsAccordion"
          href="#testStepsAccordion00000"
          aria-expanded="true" aria-controls="testStepsAccordion00000">
    </span>
    <div id="testStepsAccordion00000" class="collapse" role="tabpanel">
        <span id="ExpectedResultField" class="text-muted"></span>
        <button type="button" class="btn btn-danger ml-2 list-line-item btn-sm buttonDeleteTestStep">
            <i class="fa fa-trash-o" aria-hidden="true"></i>
            <span class="d-none d-sm-inline">Delete</span>
        </button>
        <button type="button" class="btn btn-danger ml-2 d-none list-line-item btn-sm buttonDeleteTestStepConfirm"
                data-toggle="modal"
                data-target="#deleteModal">
            <i class="fa fa-check" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> Confirm delete</span>
        </button>
        <button type="button" class="btn btn-primary ml-auto list-line-item btn-sm buttonEditTestStep">
            <i class="fa fa-pencil-square-o" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> Edit</span>
        </button>
    </div>
</li>
</div>
{{end}}


