{{/*
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">Summary</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>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">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.">
            <i class="fa fa-times" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> Abort</span>
        </button>
        <button type="button" class="btn btn-secondary mr-4 disabled" data-toggle="tooltip" data-placement="bottom"
            id="buttonBackward" title="This feature will be available in a future version">
            <i class="fa fa-step-backward" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> 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>
        {{if not .isSequence}}
        <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">
            <i class="fa fa-fw fa-pause buttonPauseIcon" aria-hidden="true"></i>
        </button>
        {{end}}
        <button type="button" class="btn btn-success" id="buttonSummaryFinish" title="Finish execution and save protocol.">
            <i class="fa {{if and .isInSequenceExecution (not .isSequence)}}fa-step-forward{{else}}fa-check{{end}}" aria-hidden="true"></i>
            <span class="d-none d-sm-inline"> {{if and .isInSequenceExecution (not .isSequence)}}Next{{else}}Finish{{end}}</span>
        </button>
    </nav>
    <div class="row tab-side-bar-row">

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

            <!-- Summary header -->
            <h4 class="mb-3">Summary of {{.TestObject.Name}}</h4>

            <!-- Results section-->
            <label><strong>Test {{if .isSequence}}Case{{else}}Step{{end}} Results</strong></label>
            <div class="form-group mb-4">
                {{ if .SubObjects }}
                <ol class="list-group" id="testStepsAccordion" data-children=".li">
                    {{ range $index, $element := .SubObjects }}
                    <li class="list-group-item">
                        <a data-toggle="collapse" data-parent="#testStepsAccordion" href="#testStepsAccordion{{ $index }}"
                            aria-expanded="true" aria-controls="testStepsAccordion{{ $index }}">
                            {{if eq .Result 1 }}
                                <i class="text-success fa fa-check-circle" aria-hidden="true"></i>
                            {{end}}
                            {{if eq .Result 2 }}
                                <i class="text-warning fa fa-exclamation-triangle" aria-hidden="true"></i>
                            {{end}}
                            {{if eq .Result 3 }}
                                <i class="text-danger fa fa-exclamation-circle" aria-hidden="true"></i>
                            {{end}}
                            {{if eq .Result 0 }}
                                <i class="text-secondary fa fa-question-circle" aria-hidden="true"></i>
                            {{end}}
                            {{if $.isSequence}}{{.Name}}{{else}}{{ .Action }}{{end}}
                            <div class="float-right">{{ .NeededTime }}</div>
                        </a>
                        <div id="testStepsAccordion{{ $index }}" class="collapse" role="tabpanel">
                            {{if not $.isSequence}}
                            <p class="mb-1">
                            Actual Result: {{if .ObservedBehavior}}{{ .ObservedBehavior }}{{else}}-{{end}}
                            </p>
                            {{end}}
                            <p class="mb-1">
                                Note: {{if .Comment}}{{.Comment}}{{else}}-{{end}}
                            </p>
                        </div>
                    </li>
                    {{ end }}
                </ol>
                {{ else }}
                <p class="text-muted">No Test {{if .isSequence}}Case{{else}}Step{{end}}</p>
                {{ end }}
            </div>

            <!-- Result radio selection -->
            {{ if not .isSequence}}
                <label><strong>Overall Assessment</strong></label>
                <div class="mb-3">
                    <label class="custom-control custom-radio text-success">
                        <input id="1" 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="2" name="testResults" type="radio" class="custom-control-input" value="PartiallySuccessful">
                        <span class="custom-control-indicator"></span>
                        <span class="custom-control-description">partially successful</span>
                    </label>
                    <label class="custom-control custom-radio text-danger">
                        <input id="3" 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="0" 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>
            {{end}}

            <!-- Note -->
            <div class="form-group">
                {{if not .isSequence }}
                    <label for="inputTestComment"><strong>Notes</strong></label>
                    <textarea class="form-control" id="inputTestComment" rows="4"></textarea>
                {{ end }}
                <input type="hidden" class="" id="inputTestStepNumber" value="{{ .step }}">
                <input type="hidden" class="" id="inputTestCaseNumber" value="{{ .case }}">
            </div>

        </div>
    </div>
    <script src="/static/js/project/execute.js"></script>
    <script src="/static/js/util/generate_help.js"></script>
    <script>
        isInSequenceExecution = {{ .isInSequenceExecution }}
        isSequence = {{ .isSequence }}

        {{ if .isSequence }} 
        $('#buttonAbort').hide();
        $('#buttonBackward').hide();
        {{ end }}


        initHours = {{ .hours }}
        initMinutes = {{ .minutes }}
        initSeconds = {{ .seconds }} 
        //Initializes the Execution buttons
        initializeExecutionClickListener();


        // Generate help
        $(function() {
            generateHelp($("#tabTestCases"));
        });
    </script>
</div>
{{ end }}