{{define "tab-content"}}
<div class="tab-card card" id="tabTestProtocols">
    <nav class="navbar navbar-light action-bar p-3">
        <div class="input-group flex-nowrap">
            <button class="btn btn-secondary mr-2" id="buttonBack">
                <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                <span class="d-none d-sm-inline"> Back</span>
            </button>
        </div>
    </nav>
    <div class="row tab-side-bar-row">
        <div class="col-md-9 p-3">
            <h4 class="mb-3">
                <span id="contentTestCaseResult" class="text-muted"></span>
                <span id="protocolName">Protocol</span>
            </h4>
            <div id="contentTestCaseNotesContainer" class="form-group d-none">
                <label><strong>Notes</strong></label>
                <p id="contentTestCaseNotes" class="text-muted">
                    No Notes
                </p>
            </div>
            <div class="form-group">
                <label><strong>Test Case Description</strong></label>
                <p id="contentTestCaseDescription" class="text-muted">
                    No Description
                </p>
            </div>
            <div class="form-group">
                <label><strong>Test Case Preconditions</strong></label>
                <p id="contentTestCasePreconditions" class="text-muted">
                    No Conditions
                </p>
            </div>
            <div class="form-group">
                <label><strong>Test Step Results</strong></label>
                <ul class="list-group" id="testStepsResultAccordion">
                </ul>
            </div>
        </div>
        <div class="col-md-3 p-3 tab-side-bar">
            <div class="form-row">
                <div class="col-12">
                    <strong>Execution Date</strong>
                </div>
                <div class="col-12">
                    <p id="contentTestCaseExecutionDate" class="text-muted">

                    </p>
                </div>
                <div class="col-12">
                    <strong>Tester</strong>
                </div>
                <div class="col-12">
                    <p id="contentTestCaseTester" class="text-muted">
                        some user
                    </p>
                </div>
                <div class="col-12">
                    <strong>System Variant</strong>
                </div>
                <div class="col-12">
                    <p id="contentTestCaseSUTVariant" class="text-muted">
                        some variant
                    </p>
                </div>
                <div class="col-12">
                    <strong>System Version</strong>
                </div>
                <div class="col-12">
                    <p id="contentTestCaseSUTVersion" class="text-muted">
                        some system version
                    </p>
                </div>
                <div class="col-12">
                    <strong>Case Version</strong>
                </div>
                <div class="col-12">
                    <p id="contentTestCaseVersion" class="text-muted">
                        some version
                    </p>
                </div>
            </div>
        </div>
    </div>
    <script src="/static/js/testprotocols.js"></script>
    <script>
        $( document ).ready(function() {
            console.log("Elephant")
            fillTestCaseResult();
            jQuery("time.timeago").timeago();
        });
    </script>
</div>
{{end}}


