{{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 Sequence 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 sequences to display them in detail.</li>
                                {{ if .LoggedIn }}<li>Add a new test sequence (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 Sequence</span>
                            </button>
                        </td>
                        <td>Add a new test sequence.</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="tabTestSequences">
    <form id="testSequencesForm">
        <nav class="navbar navbar-light action-bar p-3">
            <label class="sr-only">Search</label>
            <div class="input-group flex-nowrap">
                <input type="search" name="s" class="order-1 search-field form-control float-left"
                       placeholder="Search..."  data-toggle="tooltip" data-placement="bottom"
                       title="" data-original-title="This feature will be available in a future version">
                {{ if .LoggedIn }}
                <button class="order-3 btn btn-primary align-middle ml-4 float-right" id="buttonNewTestSequence">
                    + <span class="d-none d-sm-inline">New Test Sequence</span>
                </button>
                {{ else }}
                <button class="order-3 btn btn-primary align-middle ml-4 float-right disabled not-allowed" type="button"
                        id="buttonNewTestSequenceDisabled" data-toggle="tooltip" data-placement="bottom" title="Login to create a new test case">
                    + <span class="d-none d-sm-inline">New Test Sequence</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 Sequences</h4>
                <ul class="list-group">
                    {{range .TestSequences }}
                    <li class="list-group-item testSequenceLine" id="{{ .ID }}">
                    {{ .Name }}
                    </li>
                    {{else}}
                    <p class="text-center empty-project-list">
                        <span class="text-muted text-center">
                            There are no test sequences yet. {{ if .LoggedIn }}Do you want to create a new test sequence? {{ end }}
                        </span>
                        <br/><br/>
                        {{ if .LoggedIn }}
                        <button class="btn btn-primary align-middle" id="buttonFirstTestSequence">
                            + New Test Sequence
                        </button>
                        {{ end }}
                    </p>
                    {{end}}
                </ul>
            </div>
            <div class="col-md-3 p-3 tab-side-bar">
                <h4>
                    Labels
                    {{ if .LoggedIn }}
                    <button class="btn btn-outline-primary btn-sm align-middle ml-auto disabled"
                            id="buttonNewLabel" disabled  data-toggle="tooltip" data-placement="bottom"
                            title="" data-original-title="This feature will be available in a future version">
                        + <span class="d-none d-lg-inline">New Label</span>
                    </button>
                    {{ end }}
                </h4>
                <ul class="list-group">
                    <span class="text-muted">No Labels</span>
                </ul>
            </div>
        </div>
    </form>
    <script src="/static/js/testsequences.js"></script>
</div>
{{end}}