<?php
if (!defined('APP_INIT')) {
    exit;
}

$jsScriptLoadData['/src/js/sentri/activeTabOnRefresh.js'] = true;

?>
<div class="card-body activeTabOnRefresh">
    <div class="row">
        <div class="col-md-1">
            <div class="nav flex-column nav-pills nav-secondary nav-pills-no-bd nav-pills-icons" id="v-pills-tab-with-icon" role="tablist" aria-orientation="vertical">

                <a class="nav-link active" id="overview-tab" data-bs-toggle="pill" href="#overview" role="tab" aria-controls="overview" aria-selected="true">
                    <i class="fa-solid fa-ear-listen"></i><?php echo __('overview'); ?>
                </a>
                <a class="nav-link" id="monitoring-tab" data-bs-toggle="pill" href="#monitoring" role="tab" aria-controls="monitoring">
                    <i class="fa-solid fa-magnifying-glass"></i><?php echo __('monitoring'); ?>
                </a>
            </div>
        </div>
        <div class="col-md-11">
            <div class="tab-content" id="v-pills-with-icon-tabContent">
                <div class="tab-pane fade show active" id="overview" role="tabpanel" aria-labelledby="overview-tab">
                    <div class="row mb-3">
                        <div class="col-4">
                            <h2>
                                <i class="fa-solid fa-ear-listen"></i> &nbsp; <?php echo __('overview') ?>
                            </h2>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            to be made
                        </div>
                    </div>
                </div>
                <div class="tab-pane fade" id="monitoring" role="tabpanel" aria-labelledby="monitoring-tab">
                    <div class="row mb-3">
                        <div class="col-4">
                            <h2>
                                <i class="fa-solid fa-magnifying-glass"></i> &nbsp; <?php echo __('monitoring') ?>
                            </h2>
                        </div>
                    </div>
                    <div class="card">
                        <div class="card-body">
                            to be made
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>