{{/*
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">Test Case List</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">
                            <ul>
                                <li>Choose test cases to display them in detail.</li>
                            {{ if .Member }}
                                <li>Add a new test case (see button below).</li>{{ end }}
                            </ul>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><h5>Buttons</h5></td>
                    </tr>
                    <tr>
                        <td>
                            <button class="order-3 btn btn-primary align-middle">
                                + <span class="d-none d-sm-inline">New Test Case</span>
                            </button>
                        </td>
                        <td>Add a new test case.</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="testCaseForm">
        <nav class="navbar navbar-light action-bar p-3 d-print-none">
            <label class="sr-only">Search</label>
            <div class="input-group flex-nowrap">
                <span tabindex="0" data-toggle="tooltip" data-placement="bottom" title="This feature will be available in a future version">
                    <input style="width: 100%;" type="search" name="s" class="order-1 search-field form-control float-left"
                           placeholder="Search..." disabled>
                </span>
            {{ if .Member }}
                <button class="order-3 btn btn-primary align-middle ml-4 float-right" id="buttonNewTestCase">
                    + <span class="d-none d-sm-inline">New Test Case</span>
                </button>
                {{ else }}
                <button class="order-3 btn btn-primary align-middle ml-4 float-right cursor-not-allowed disabled" type="button"
                        id="buttonNewTestCaseDisabled" data-toggle="tooltip" data-placement="bottom"
                        title="You have to be a member of the project to create a new test case">
                    + <span class="d-none d-sm-inline">New Test Case</span>
                </button>
                {{ end }}

                <span class="order-2 input-group-btn">
                    <button class="search-submit btn btn-outline-success disabled" disabled data-toggle="tooltip" data-placement="bottom"
                            title="" data-original-title="This feature will be available in a future version">
                        <i class="fa fa-search" aria-hidden="true"></i>
                        <span class="d-none d-sm-inline"> Search</span>
                    </button>
                </span>
            </div>
        </nav>
        <div class="row tab-side-bar-row">
            <div class="col-md-9 p-3">
                <h4 class="mb-3">
                    Test Cases
                    {{ if .Filtered }}
                    with label 
                    {{ range .Filtered }} 
                    <span class="badge badge-primary" id="{{ .Name }}" style="background-color: #{{ .Color }};">{{ .Name }}
                        <strong>
                            <span class="closeX filterBadge clickIcon" id="{{ .Name }}" aria-hidden="true">&times;</span>
                        </strong>
                    </span>
                    {{ end }}
                    {{ else }}
                    (All)
                    {{ end }}</h4>
                <ul class="list-group">
                    {{ range .TestCases }}
                    <li class="list-group-item testCaseLine" id="{{ .Name }}">
                    {{ .Name }}
                    {{ range .Labels }}
                        <span class="badge badge-primary filterBadge pull-right" id="{{ .Name }}" style="background-color: #{{ .Color }};">{{ .Name }}</span>
                    {{ end }}
                    </li>
                {{else}}
                    <p class="text-center empty-project-list">
                        <span class="text-muted text-center">
                            There are no test cases yet. {{ if .Member }}
                            Do you want to create a new test case? {{ end }}
                        </span>
                        <br/><br/>
                    {{ if .Member }}
                        <button class="btn btn-primary align-middle" id="buttonFirstTestCase">
                            + New Test Case
                        </button>
                        {{ end }}
                    </p>
                {{end}}
                </ul>
            </div>
            <div class="col-md-3 p-3 tab-side-bar d-print-none">
                <h4>
                    Labels
                {{ if .Member }}
                    <button type="button" class="btn btn-primary btn-sm mb-2" data-toggle="modal" data-target="#modal-manage-labels" >
                        <i class="fa fa-wrench" aria-hidden="true"></i>
                    </button>
                    {{ end }}
                </h4>
                <p id="labelContainer">
                {{ with .Project }}
                {{ range .Labels }}
                    <span class="badge badge-primary filterBadge clickIcon" id="{{ .Name }}" style="background-color: #{{ .Color }};">{{ .Name }}</span>
                {{ else }}
                    <span class="text-muted">No Labels</span>
                {{ end }}
                {{ end }}
                </p>
            </div>
        </div>
        {{template "modal-manage-labels" . }}
    </form>
    <script src="/static/js/project/testcases.js"></script>
    <script src="/static/js/util/common.js"></script>
    <script>
        assignButtonsTestCase();
        $("#printerIcon").removeClass("d-none");
        $("#helpIcon").removeClass("d-none");

        function printer() {
            window.open(currentURL().appendSegment('print').toString(),
                    'newwindow',
                    'width=600,height=800');
            return false;
        }
    </script>
    <script src="/static/js/project/labels.js"></script>
</div>
{{end}}


