<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="fragments/comm/commLayout :: commHead"></th:block>

    <!--    <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/tabulator/css/tabulator.min.css'" rel="stylesheet"/>-->
    <link th:href="${#httpServletRequest.getContextPath()}+'/plugins/tabulator/css/bootstrap/tabulator_bootstrap4.min.css'"
          rel="stylesheet"/>
    <link th:href="${#httpServletRequest.getContextPath()}+'/css/search/search.css'"
          rel="stylesheet"/>
    <style>
        .tabulator {
            --bs-gutter-x: 0;
            --bs-gutter-y: 0;
        }

    </style>
</head>

<body class="">
<div class="page">

    <div class="flex-fill">
        <div class="content">
            <div class="container">
                <div class="my-3 my-md-5">
                    <div class="card">
                        <div class="card-header">
                            <div class="col-5"><b>CPU / Memory 사용량</b></div>
                        </div>
                        <div class="card-body">
                            <div class="row">
                                <div class="col-md-6">
                                    <p class="text-center">
                                        <strong>CPU</strong>
                                    </p>
                                    <div id="interactive-cpu" style="height: 200px;"></div>
                                    <div class="btn-group" id="realtime-cpu" data-toggle="btn-toggle">
                                        <button type="button" class="btn btn-default btn-xs active" data-toggle="on">
                                            On
                                        </button>
                                        <button type="button" class="btn btn-default btn-xs" data-toggle="off">Off
                                        </button>
                                    </div>
                                    <!-- /.chart-responsive -->
                                </div>
                                <div class="col-md-6">
                                    <p class="text-center">
                                        <strong>Memory</strong>
                                    </p>
                                    <div id="interactive" style="height: 200px;"></div>
                                    <div class="btn-group" id="realtime" data-toggle="btn-toggle">
                                        <button type="button" class="btn btn-default btn-xs active" data-toggle="on">
                                            On
                                        </button>
                                        <button type="button" class="btn btn-default btn-xs" data-toggle="off">Off
                                        </button>
                                    </div>
                                    <!-- /.chart-responsive -->
                                </div>
                            </div>
                            <!-- /.row -->
                        </div>
                    </div>
                    <div class="page-header">
                        <h4>D2v학습</h4>
                    </div>
                    <div class="row">

                        <div id="cardDiv" class="col-md-12 col-xl-12">
                            <div id="cardDiv2" class="card">
                                <div id="cardHeader" class="card-header">
                                    <div class="col-5"><b>Doc2Vec 정보 입력</b></div>
                                    <div class="col-7" id="progressDiv">
                                        <div class="clearfix">
                                            <div class="float-left">
                                                <strong id="progressText">0%</strong>
                                            </div>
                                            <div class="float-right">
                                                <strong id="progressCount" class="text-muted">0 / 0</strong>
                                            </div>
                                        </div>
                                        <div class="progress progress-xs">
                                            <div class="progress-bar bg-green" id="progressBar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width: 0%; height: 0.5rem;">
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div id="cardBody" class="card-body row">
                                    <div id="cardBodyCol" class="col-5">
                                        <div class="form-group">
                                            <label class="form-label">DB주소</label>
                                            <input type="text" id="dbUrl" class="form-control" name="example-text-input" placeholder="DB주소...">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Port</label>
                                            <input type="text" id="dbPort" class="form-control" name="example-text-input" placeholder="Port...">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">UserName</label>
                                            <input type="text" id="dbUserName" class="form-control" name="example-text-input" placeholder="ID...">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">Password</label>
                                            <input type="password" id="dbPassWd" class="form-control" name="example-password-input" placeholder="Password..">
                                        </div>
                                        <div class="form-group">
                                            <label class="form-label">SID</label>
                                            <input type="text" id="dbName" class="form-control" name="example-text-input" placeholder="DB이름...">
                                        </div>
                                        <input type="button" id="dbConnectTest" class="btn btn-primary" value="DB테스트">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <footer class="footer" th:include="fragments/comm/commLayout :: commFooter"></footer>

</div>
<!-- tabulator Plugin -->
<script th:src="${#httpServletRequest.getContextPath()}+'/plugins/tabulator/js/tabulator.min.js'"></script>


<script>


</script>
</body>
<th:block th:include="fragments/comm/commLayout :: commScript"></th:block>
<script th:src="${#httpServletRequest.getContextPath()}+'/js/cpumemUsage.js'"></script>
<script th:src="${#httpServletRequest.getContextPath()}+'/js/d2v/d2v.js'"></script>

</html>