<!-- Tabs navs -->
<div class="row">
    <div class="col-12">
        <ul class="nav nav-tabs nav-tabs-table duration border-0" id="tableTab" role="tablist">
            <li class="nav-item nav-item-table ">
                <a class="nav-link nav-link-table" id="tableTab-detailsTab" data-toggle="tab" href="#tableTab-tabs-detailsTab" role="tab" aria-controls="tableTab-tabs-detailsTab" aria-selected="true">
                    Details
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table active" id="tableTab-tab-recoverySet" data-toggle="tab" href="#tableTab-tabs-recoverySet" role="tab" aria-controls="tableTab-tabs-recoverySet" aria-selected="false">
                    Recovery Settings
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table" id="tableTab-tab-instances" data-toggle="tab" href="#tableTab-tabs-instances" role="tab" aria-controls="tableTab-tabs-instances" aria-selected="false">
                    Instances
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table" id="tableTab-tab-tasks" data-toggle="tab" href="#tableTab-tabs-tasks" role="tab" aria-controls="tableTab-tabs-tasks" aria-selected="false">
                    Tasks
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table" id="tableTab-tab-traffic" data-toggle="tab" href="#tableTab-tabs-traffic" role="tab" aria-controls="tableTab-tabs-traffic" aria-selected="false">
                    Traffic
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table" id="tableTab-tab-diskUsg" data-toggle="tab" href="#tableTab-tabs-diskUsg" role="tab" aria-controls="tableTab-tabs-diskUsg" aria-selected="false">
                    Disk Usage
                </a>
            </li>
            <li class="nav-item nav-item-table">
                <a class="nav-link nav-link-table" id="tableTab-tab-RPO" data-toggle="tab" href="#tableTab-tabs-RPO" role="tab" aria-controls="tableTab-tabs-RPO" aria-selected="false">
                    RPO Violations
                </a>
            </li>
        </ul>
    </div>
</div>
<!-- Tabs navs -->

<!-- Tabs content -->
<div class="tab-content" id="tableTab-content">
    <div class="tab-pane fade" id="tableTab-tabs-detailsTab" role="tabpanel" aria-labelledby="tableTab-detailsTab">
        <!-- Tab 1 content -->
        @include('/outgoingReplications/information/details')
    </div>
    <div class="tab-pane fade show active" id="tableTab-tabs-recoverySet" role="tabpanel" aria-labelledby="tableTab-tab-recoverySet">
        <!-- Tab 2 content -->
        @include('/outgoingReplications/information/recoverySettings')
    </div>
    <div class="tab-pane fade" id="tableTab-tabs-instances" role="tabpanel" aria-labelledby="tableTab-tab-instances">
        <!-- Tab 3 content -->
        @include('/outgoingReplications/information/instances')
    </div>
    <div class="tab-pane fade" id="tableTab-tabs-tasks" role="tabpanel" aria-labelledby="tableTab-tab-tasks">
        <!-- Tab 4 content -->
        @include('/outgoingReplications/information/tasks')
    </div>
    <div class="tab-pane fade" id="tableTab-tabs-traffic" role="tabpanel" aria-labelledby="tableTab-tab-traffic">
        <!-- Tab 4 content -->
        @include('/outgoingReplications/information/traffic')
    </div>
    <div class="tab-pane fade" id="tableTab-tabs-diskUsg" role="tabpanel" aria-labelledby="tableTab-tab-diskUsg">
        <!-- Tab 4 content -->
        @include('/outgoingReplications/information/diskUsage')
    </div>
    <div class="tab-pane fade" id="tableTab-tabs-RPO" role="tabpanel" aria-labelledby="tableTab-tab-RPO">
        <!-- Tab 4 content -->
        @include('/outgoingReplications/information/rpoViolations')
    </div>
</div>
<!-- Tabs content -->