<!DOCTYPE html>

<html lang="zh-hant-TW" class="root-text-lg">

<head>
    <meta charset="utf-8">
    <meta name="description" content="Marketing Dashboard">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no, user-scalable=no, minimal-ui">
    <!-- Call App Mode on ios devices -->
    <meta name="apple-mobile-web-app-capable" content="yes" />
    <!-- Remove Tap Highlight on Windows Phone IE -->
    <meta name="msapplication-tap-highlight" content="no">
    <!-- base css -->
    <link id="vendorsbundle" rel="stylesheet" media="screen, print" href="lib/vendors.bundle.css">
    <link id="appbundle" rel="stylesheet" media="screen, print" href="lib/app.bundle.css">
    <link id="mytheme" rel="stylesheet" media="screen, print" href="#">
    <link id="myskin" rel="stylesheet" media="screen, print" href="lib/skins/skin-master.css">
    <link rel="stylesheet" href="lib/notifications/toastr/toastr.min.css" />
    <!-- Place favicon.ico in the root directory -->
    <link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="img/favicon/favicon-32x32.png">
    <link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">
    <!-- Font Awesome -->
    <link href="lib/fontawesome-free/css/all.min.css" rel="stylesheet" />
    <link rel="stylesheet" media="screen, print" href="lib/datagrid/datatables/datatables.bundle.css">
    <link rel="stylesheet" href="css/site.css" />
    <link rel="stylesheet" href="css/yourteam/plugins/yt-tooltip/yt-tooltip.css" />
</head>

<body
    class="mod-bg-1 mod-nav-link mod-skin-dark mod-hide-info-card nav-function-top nav-function-fixed mod-lean-subheader desktop chrome webkit pace-done blur">

    <main id="js-page-content" role="main" class="page-content">

        <div class="row">
            <div class="col-sm-12 col-xl-12">

                <h1 class="p-2 mb-0">圖資管理</h1>

                <div class="row bg-dark p-2">
                    <div class="col-auto">
                        <div class="btn-group">
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">建築</button>
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">電力管線</button>
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">水力管線</button>
                            <button type="button" class="btn btn-secondary waves-effect waves-themed">控制系統</button>
                        </div>
                    </div>

                    <div class="col-auto">
                        <div class="form-group">
                            <input type="text" id="simpleinput" class="form-control" placeholder="關鍵字">
                        </div>
                    </div>

                    <div class="col-auto">
                        <a href="#" class="btn btn-info">查詢</a>
                    </div>
                    <hr>
                </div>

                <div class="row bg-dark p-2 mb-5 align-items-center">
                    <div class="col-auto">
                        <a href="#" class="btn btn-info">全選</a>
                    </div>

                    <div class="col-auto">
                        <div class="frame-wrap">
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline1">
                                <label class="custom-control-label" for="defaultInline1">施工詳圖</label>
                            </div>
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline2">
                                <label class="custom-control-label" for="defaultInline2">設備規範</label>
                            </div>
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline3">
                                <label class="custom-control-label" for="defaultInline3">工程介面圖說</label>
                            </div>
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline4">
                                <label class="custom-control-label" for="defaultInline4">門禁規範</label>
                            </div>
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline5">
                                <label class="custom-control-label" for="defaultInline5">監控平面圖</label>
                            </div>
                            <div class="custom-control custom-checkbox custom-control-inline">
                                <input type="checkbox" class="custom-control-input" id="defaultInline6">
                                <label class="custom-control-label" for="defaultInline6">其它</label>
                            </div>
                        </div>
                    </div>
                </div>

                <div class="row">
                    <div class="mb-3">
                        <a href="#" class="btn btn-success">+ 上傳</a>
                    </div>

                    <table class="table table-bordered table-striped text-center m-0">
                        <thead class="thead-themed">
                            <tr>
                                <th>圖號</th>
                                <th>圖名</th>
                                <th>原設計</th>
                                <th>竣工圖</th>
                                <th>功能</th>
                            </tr>
                        </thead>

                        <tbody>
                            <tr>
                                <td>TEST03</td>
                                <td>TEST03</td>
                                <td>A-01.dwg</td>
                                <td></td>
                                <td>
                                    <a href="#" class="btn btn-info">編輯</a>
                                    <a href="#" class="btn btn-danger">刪除</a>
                                </td>
                            </tr>
                            <tr>
                                <td>TEST06</td>
                                <td>TEST06</td>
                                <td>A-01.dwg</td>
                                <td>AS-01.dwg</td>
                                <td>
                                    <a href="#" class="btn btn-info">編輯</a>
                                    <a href="#" class="btn btn-danger">刪除</a>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>

            </div>
        </div>

    </main>

    <!-- TEST Button trigger modal -->
    <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
        Launch static backdrop modal
    </button>

    <!-- TEST Modal -->
    <div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1"
        aria-labelledby="staticBackdropLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Understood</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade modal-backdrop-transparent" id="modal-shortcut" tabindex="-1" role="dialog"
        aria-labelledby="modal-shortcut" aria-hidden="true">
        <div class="modal-dialog modal-dialog-top modal-transparent" role="document">
            <div class="modal-content">
                <div class="modal-body">
                    <ul class="app-list w-auto h-auto p-0 text-left">
                        <li>
                            <a href="intel_introduction.html" class="app-list-item text-white border-0 m-0">
                                <div class="icon-stack">
                                    <i class="base base-7 icon-stack-3x opacity-100 color-primary-500 "></i>
                                    <i class="base base-7 icon-stack-2x opacity-100 color-primary-300 "></i>
                                    <i class="fal fa-home icon-stack-1x opacity-100 color-white"></i>
                                </div>
                                <span class="app-list-name">
                                    Home
                                </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>