{{/*
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"}}
{{template "modal-generic-error" .}}

<div class="modal fade" id="helpModal">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">{{T "Test Case Step" .}}</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">
                    <!-- Will be generated by js -->
                </table>
                <span class="mt-3 float-left">{{T "For more information visit our" .}} <a href="http://docs.systemtestportal.org" target="_blank">{{T "documentation" .}}</a>.</span>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">{{T "Close" .}}</button>
            </div>
        </div>
    </div>
</div>
{{template "execution-abort-modal" .}}
<div class="tab-card card" id="tabTestCases">
    <nav class="navbar navbar-light action-bar p-3">
        <button type="button" class="btn btn-danger mr-2" id="buttonAbort" title="Stop execution and discard protocol." data-shortcut="Esc">
            <i class="fa fa-times" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> {{T "Abort" .}}</span>
        </button>
        <button type="button" class="btn btn-secondary mr-4" data-placement="bottom"
                id="buttonPreviousStep" title="Go back to previous step" data-shortcut="<- , Backspace">
            <i class="fa fa-step-backward" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> {{T "Previous" .}}</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 mr-4" id="timeTracker">
            <span id="timeHours">{{ .hours }}</span>:<span id="timeMinutes">{{ .minutes }}</span>:<span
                id="timeSeconds">{{ .seconds }}</span>
        </span>
        <button type="button" class="btn btn-secondary mr-2" id="buttonPause" title="Resume/Pause the execution timer." data-shortcut="Space">
            <i class="fa fa-fw fa-pause buttonPauseIcon" aria-hidden="true"></i>
        </button>
        <button type="button" class="btn btn-success" id="buttonExecuteNextTestStep"
                title="Go to next step or to the summary-page respectively." data-shortcut="->">
            <i class="fa fa-step-forward" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> {{T "Next" .}}</span>
        </button>
    </nav>
    <div class="row tab-side-bar-row">

        <div class="col-md-12 p-3">
            <div class="form-group">

                <div class="row">

                    <!-- Description -->
                    <div class="col-md-6 p-3">
                        <label><strong>{{T "Description" .}}</strong></label>
                        <p id="testStepAction">
                        {{printMarkdown .Action }}
                        </p>
                    </div>

                    <!-- Result radio selection -->
                    <div class="col-md-6 p-3 align-top">
                        <label><strong>{{T "Assessment" .}}</strong></label>

                        <div>
                            <!-- Not assessed -->
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="0" name="testResults" class="custom-control-input active "
                                       value="NotAssessed" title="Mark test not assessed." checked>
                                <label class="custom-control-label text-muted active" for="0">{{T "Not assessed" .}}</label>
                            </div>

                            <!-- Failed -->
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="3" name="testResults" class="custom-control-input"
                                       value="Fail" title="Mark test as failed.">
                                <label class="custom-control-label text-danger" for="3">{{T "Failed" .}}</label>
                            </div>

                            <!-- Partially passed -->
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="2" name="testResults" class="custom-control-input"
                                       value="PartiallySuccessful" title="Mark test as successful but with reservations.">
                                <label class="custom-control-label text-warning" for="2">{{T "Partially successful" .}}</label>
                            </div>
                            
                            <!-- Passed -->
                            <div class="custom-control custom-radio custom-control-inline">
                                <input type="radio" id="1" name="testResults" class="custom-control-input"
                                       value="Pass" title="Mark test as successful.">
                                <label class="custom-control-label text-success" for="1">{{T "Passed" .}}</label>
                            </div>

                        </div>

                    </div>

                </div>

                <hr/>

                <div class="row">

                    <!-- Expected Result -->
                    <div class="col-md-6 p-3">
                        <label><strong>{{T "Expected Result" .}}</strong></label>
                        <p id="testStepExpectedResult">
                        {{printMarkdown .ExpectedResult }}
                        </p>
                    </div>

                    <!-- Actual Result -->
                    <div class="col-md-6 p-3">
                        <label><strong>{{T "Actual Result" .}} </strong></label>
                        <div class="md-area">
                            <textarea class="form-control markdown-textarea" id="inputTestStepActualResult" rows="4"
                                  placeholder="Describe the results"></textarea>
                            <div class="md-area-bottom-toolbar">
                                <div style="float:left">{{T "Markdown supported" .}}</div>
                                <div style="float:right">
                                <label id="attachImage" class="md-area-attach-file">Attach a file
                                    <input id="resultFileInput" style="display: none;" class="" type="file" accept=".png,.jpg,.jpeg">
                                </label>
                                </div>
                            </div>
                        </div>
                    </div>

                </div>

                <hr/>

                <!-- Note -->
                <label for="inputTestStepNotes"><strong>{{T "Notes" .}}</strong></label>
                <div class="md-area">
                    <textarea class="form-control markdown-textarea" id="inputTestStepNotes" rows="4" placeholder="{{T "Notes for this test step" .}}"></textarea>
                    <div class="md-area-bottom-toolbar">
                        <div style="float:left">{{T "Markdown supported" .}}</div>
                    </div>
                </div>
                <input type="hidden" class="" id="inputTestStepNumber" value="{{ .step }}">
                <input type="hidden" class="" id="inputTestCaseNumber" value="{{ .case }}">

            </div>

        </div>
        <!--<div class="col-md-3 p-3 tab-side-bar">
        </div>-->
    </div>
</div>

<!-- Import Scripts here -->
<script src="/static/js/project/execute.js"></script>
<script src="/static/js/util/generate_help.js"></script>

<script>
    window.onload = fillWithData;
    caseProtocol.CurrentStep = {{.step}};
    if (caseProtocol.StepProtocols != null && caseProtocol.StepProtocols[caseProtocol.CurrentStep -1 ] != null){
        let time = caseProtocol.StepProtocols[caseProtocol.CurrentStep -1 ].NeededTime;
        stepProtocol = {{ .stepProtocol }};
        stepProtocol.NeededTime = time;
    }else{
        stepProtocol = {{ .stepProtocol }};
    }
    initHours = {{ .hours }};
    initMinutes = {{ .minutes }};
    initSeconds = {{ .seconds }};
    //Initializes the Execution buttons
    initializeExecutionClickListener();

    // Generate help
    $(function() {
        generateHelp($("#tabTestCases"));
    });

    /**
     * Fills the data if teststep already got executed
     */
    (function () {
        fillWithData()

    })();
</script>
{{ end }}