{{#if navHeader}}
<p class="text-right">
    <button type="button" class="btn btn-default lab-results-prev" title="Press enter to load the previous lab result."><i class="fa fa-arrow-up"></i>&nbsp;Previous</button>
    <button type="button" class="btn btn-default lab-results-next" title="Press enter to load the next lab result."><i class="fa fa-arrow-down"></i>&nbsp;Next</button>
</p>
{{/if}}
<div class="table-responsive">
    <table class="table">
        <caption class="sr-only">Lab result table.</caption>
        <thead>
            <tr>
                <th scope="col">Date</th>
                <th scope="col">Lab Test</th>
                <th scope="col">Flag</th>
                <th scope="col">Result</th>
                <th scope="col">Unit</th>
                <th scope="col">Ref Range</th>
                <th scope="col">Facility</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>{{formatDate observed}}</td>
                <td>{{typeName}} - {{specimen}}</td>
                <td>
                    {{#if flagTooltip}}
                        <span class="label {{labelClass}}" title="{{flagTooltip}}">{{interpretationCode}}</span>
                    {{/if}}
                    {{#if showFlagIcon}}
                        <i class="fa fa-flag"></i>
                    {{/if}}
                </td>
                <td>{{result}}</td>
                <td>{{units}}</td>
                <td>
                    {{#if referenceRange}}
                        {{referenceRange}}
                    {{else}}
                        {{#if high}}
                            {{low}}-{{high}}
                        {{/if}}
                    {{/if}}
                </td>
                <td>{{facilityMoniker}}</td>
            </tr>
        </tbody>
    </table>
</div>
<form class="form-inline" role="form">
    <div id="dateRangeFilter"></div>
</form>
<div class="container-fluid">
    <div class="row">
        <div class="col-md-5" id="lrDataTableView">
            <div class="panel panel-primary">
                <div class="panel-heading">
                    <p class="pull-right">Total Tests: <span id="totalTests"></span></p>
                    <h5 class="panel-title">{{typeName}} - {{specimen}}</h5>
                </div>
                <div class="js-backgrid"></div>
            </div>
        </div>
        <div class="col-md-7" id="lrGraph">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h5 class="panel-title">{{typeName}} - {{specimen}}</h5>
                </div>
                <div class="panel-body">
                    <div id="js-chart"></div>
                </div>
            </div>
        </div>
    </div>
</div>