{{/*
This file is part of SystemTestPortal.
Copyright (C) 2017  Institute of Software Technology, University of Stuttgart

SystemTestPortal is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.

SystemTestPortal is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.

You should have received a copy of the GNU General Public License
along with SystemTestPortal.  If not, see <http://www.gnu.org/licenses/>.
*/}}

{{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">Tools</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>
                            <button class="btn btn-secondary mr-2 help-modal-button">
                                <i class="fa fa-step-backward" aria-hidden="true"></i>
                            </button>
                        </td>
                        <td>Get back to the previous test step.</td>
                    </tr>
                    <tr>
                        <td>
                            <button class="btn btn-success mr-2 help-modal-button">
                                <i class="fa fa-step-forward" aria-hidden="true"></i>
                            </button>
                        </td>
                        <td>Continue to the nex step.</td>
                    </tr>
                    <tr>
                        <td><strong>Actual Result</strong></td>
                        <td>Describe the results.</td>
                    </tr>
                    <tr>
                        <td><strong>Notes</strong></td>
                        <td>Add notes if you have something to note.</td>
                    </tr>
                    <tr>
                        <td>
                            <div class="custom-controls-stacked">
                                <label class="custom-control custom-radio text-success">
                                    <input name="testResults" type="radio" class="custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">successful</span>
                                </label>
                                <label class="custom-control custom-radio text-warning">
                                    <input name="testResults" type="radio" class="custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">failed partly</span>
                                </label>
                                <label class="custom-control custom-radio text-danger">
                                    <input name="testResults" type="radio" class="custom-control-input">
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">failed</span>
                                </label>
                                <label class="custom-control custom-radio text-muted">
                                    <input name="testResults" type="radio" class="custom-control-input" checked>
                                    <span class="custom-control-indicator"></span>
                                    <span class="custom-control-description">not evaluated</span>
                                </label>
                            </div>
                        </td>
                        <td>Choose the approriate result.</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">
    <nav class="navbar navbar-light action-bar p-3">
        <button class="btn btn-danger mr-2" 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-secondary mr-2" id="buttonBackward">
            <i class="fa fa-step-backward" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> Previous</span>
        </button>
        <button class="btn btn-success mr-4" id="buttonExecuteNextTestStep" >
            <i class="fa fa-step-forward" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> Next</span>
        </button>
        <div class="progress mr-4" style="flex-grow: 100;">
            <div class="progress-bar" role="progressbar" style="width: {{ .ProgressBarPercent }}%;"
            aria-valuenow="{{ .ProgressBarPercent }}" aria-valuemin="0" aria-valuemax="100">
                {{ .ProgressBarCurrent }}/{{ .ProgressBarTotal }}
            </div>
        </div>
        <span class="navbar-text" id="timeTracker">
            <span id="timeHours">{{ .hours }}</span>:<span id="timeMinutes">{{ .minutes }}</span>:<span id="timeSeconds">{{ .seconds }}</span>
        </span>
        <button class="btn btn-sm btn-secondary ml-2" id="buttonPause">
            <i class="fa fa-pause" aria-hidden="true" id="buttonPauseIcon"></i>
        </button>
    </nav>
    <div class="row tab-side-bar-row">
        <div class="col-md-9 p-3">
            <div class="form-group">
                <p id="testStepAction">
                    {{ .Action }}
                </p>
                <label><strong>Expected Result </strong></label>
                <p id="testStepExpectedResult">
                    {{ .ExpectedResult }}
                </p>
                <label><strong>Actual Result </strong></label>
                <textarea class="form-control" id="inputTestStepActualResult" rows="4"
                          placeholder="Describe the results"></textarea>
                <label><strong>Notes</strong></label>
                <textarea class="form-control" id="inputTestStepNotes" rows="2" ></textarea>
                <input type="hidden" class="" id="inputTestStepNumber" value="{{ .step }}">
                <input type="hidden" class="" id="inputTestCaseNumber" value="{{ .case }}">
                <div class="custom-controls-stacked mt-4">
                    <label><strong>Result</strong></label>
                    <label class="custom-control custom-radio text-success">
                        <input id="successfulTest" name="testResults" type="radio" class="custom-control-input" value="Pass">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">passed</span>
                    </label>
                    <label class="custom-control custom-radio text-warning">
                        <input id="failedPartlyTest" name="testResults" type="radio" class="custom-control-input" value="PassWithComment">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">passed with comment</span>
                    </label>
                    <label class="custom-control custom-radio text-danger">
                        <input id="failedTest" name="testResults" type="radio" class="custom-control-input" value="Fail">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">failed</span>
                    </label>
                    <label class="custom-control custom-radio text-muted">
                        <input id="notEvaluatedTest" name="testResults" type="radio" class="custom-control-input" value="NotAssessed" checked>
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">not assessed</span>
                    </label>
                </div>
            </div>
        </div>
        <!--<div class="col-md-3 p-3 tab-side-bar">
        </div>-->
    </div>
    <script src="/static/js/execute.js"></script>
</div>
{{ end }}