<!DOCTYPE html>
<html lang="ja-JP">

<head>
    <meta charset="utf-8">
    <title>ピックアップ</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <!-- favicons -->
    <link href="../common/img/favicon.ico" rel="icon">
    <link href="../common/img/apple-touch-icon.png" rel="apple-touch-icon">
    <!-- main css -->
    <link rel="stylesheet" type="text/css" href="../common/css/newdash/app.css">
    <link rel="stylesheet" type="text/css" href="../common/css/newdash/header.css">
    <link rel="stylesheet" type="text/css" href="../common/css/newdash/style.css">
    <!-- vender css -->
    <link rel="stylesheet" type="text/css" href="../common/css/newdash/fontawesome_relative_path.css">

    <!-- main js -->
    <script type="text/javascript" src="../js/pickup/pickup.js"></script>
</head>
    
<body onload="PICKUP.init();">
    
    <!-- header -->
    <?php include('common/header.html');?>

    <!-- pickup -->
    <main>
        <div class="container">
            <!-- breadcrumb -->
            <nav aria-label="breadcrumb">
                <ol class="breadcrumb px-0 mb-0">
                    <li class="breadcrumb-item"><a href="dashboard.html" class="text-decoration-none text-underline">ダッシュボード</a></li>
                    <li class="breadcrumb-item active" aria-current="page"><span>ピックアップ</span></li>
                </ol>
            </nav>

            <!-- title -->
            <h1 class="fs-14 font-weight-bold pt-sm-4 pt-2 pb-3 mb-0">ピックアップ</h1>

            <!-- tab -->
            <ul class="nav nav-tabs line" id="myTab" role="tablist">
                <li class="nav-item">
                  <a class="nav-link active" data-toggle="tab" href="#tab1" role="tab" aria-controls="tab1" aria-expanded="true">
                    <div class="text-center">新規追加</div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#tab2" role="tab" aria-controls="tab2">
                    <div class="text-center">工程作業</div>
                  </a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" data-toggle="tab" href="#tab3" role="tab" aria-controls="tab3">
                    <div class="text-center">警告を含む報告</div>
                  </a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab4" role="tab" aria-controls="tab4">
                      <div class="text-center">0件表示パターン</div>
                    </a>
                  </li>
              </ul>
              <!-- tab content-->
              <!-- new -->
              <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="tab1" role="tabpanel" aria-labelledby="1-tab">
                    <!-- view menu -->
                    <nav aria-label="view" class="view-menu mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="fs-9">20<span>件表示</span></div>
                            <div class="view">
                                <a href="#" class="text-decoration-none view-btn view-list-btn">
                                    <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示">
                                </a>
                                <a href="#" class="text-decoration-none view-btn view-block-btn active">
                                    <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示">
                                </a>
                            </div>
                        </div>
                    </nav>
                    <!-- task list -->
                    <ul class="p-0 mt-3 card-list task-list view-content view-block">
                        <li class="card mb-2">
                            <a href="#" class="d-block px-3 py-3 text-decoration-none text-dark">
                                <div class="fs-12 text-truncate">作業名が入ります。</div>
                            </a>
                        </li>
                        <li class="card mb-2">
                            <a href="#" class="d-block px-3 py-3 text-decoration-none text-dark">
                                <div class="fs-12 text-truncate">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- proccess -->
                <div class="tab-pane fade" id="tab2" role="tabpanel" aria-labelledby="2-tab">
                    <!-- view menu -->
                    <nav aria-label="view" class="view-menu mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="fs-9">100<span>件表示</span></div>
                            <div class="view">
                                <a href="#" class="text-decoration-none view-btn view-list-btn">
                                    <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示">
                                </a>
                                <a href="#" class="text-decoration-none view-btn view-block-btn active">
                                    <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示">
                                </a>
                            </div>
                        </div>
                    </nav>
                    <!-- task list -->
                    <ul class="p-0 mt-3 card-list task-list view-content view-block">
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="proccess"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">工程名が入ります。</div>
                                        <div class="fs-12 text-truncate">作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">code-9999</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="proccess"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">工程名が入ります。工程名が入ります。工程名が入ります。工程名が入ります。工程名が入ります。</div>
                                        <div class="fs-12 text-truncate">作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">code-9999</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- alert -->
                <div class="tab-pane fade" id="tab3" role="tabpanel" aria-labelledby="3-tab">
                    <!-- view menu -->
                    <nav aria-label="view" class="view-menu mt-2">
                        <div class="d-flex justify-content-between align-items-center">
                            <div class="fs-9">100<span>件表示</span></div>
                            <div class="view">
                                <a href="#" class="text-decoration-none view-btn view-list-btn">
                                    <img src="../common/img/icon_view_list.svg" alt="リスト表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="リスト表示">
                                </a>
                                <a href="#" class="text-decoration-none view-btn view-block-btn active">
                                    <img src="../common/img/icon_view_block.svg" alt="グリッド表示" class="list-block-icon mx-1" data-toggle="tooltip" data-placement="bottom" title="グリッド表示">
                                </a>
                            </div>
                        </div>
                    </nav>
                    <!-- task list -->
                    <ul class="p-0 mt-3 card-list task-list view-content view-block">
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="report"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-12 text-truncate">作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">code-9999</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="inspection"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-12 text-truncate">作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">10/20~10/23</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="questionary"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">報告</div>
                                        <div class="fs-12 text-truncate">作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">code-9999</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                        <li class="card mb-2">
                            <a href="#" class="h-100 d-block px-3 py-2 text-decoration-none text-dark position-relative">
                                <div class="position-absolute translate-middle top-50 left-0 ml-3">
                                    <div class="type-icon">
                                        <span class="questionary"></span>
                                    </div>
                                </div>
                                <div class="pl-5 h-100 d-flex align-items-center">
                                    <div class="w-100">
                                        <div class="fs-8 bg-dark10 px-2 py-1 mr-2 rounded mb-1 w-fit-content text-truncate mw-100">回答</div>
                                        <div class="fs-12 text-truncate">作業名が入ります。</div>
                                        <div class="d-flex justify-content-between align-items-center">
                                            <div class="fs-10 text-truncate">報告名が入ります。</div>
                                            <div class="fs-8 text-secondary text-truncate">code-9999</div>
                                        </div>
                                    </div>
                                </div>
                            </a>
                        </li>
                    </ul>
                </div>
                <!-- 0 match -->
                <div class="tab-pane fade" id="tab4" role="tabpanel" aria-labelledby="4-tab">
                    <ul class="p-0 mt-3 card-list">
                        <li class="card mb-2 not-found">
                            <div class="text-dark mb-1 px-3 py-5 text-center m-auto">
                                <img src="../common/img/icon_not_found.svg" alt="該当する作業がありません。" class="not-found-img mb-2">
                                <div class="fs-9 text-secondary font-weight-bold">該当する作業がありません。</div>
                            </div>
                        </li>
                    </ul>
                </div>
              </div>
        </div>
    </main>

    <!-- confirm -->
    <?php include('common/confirm-modal.html');?>

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script type="text/javascript" src="../common/js/app.js"></script>
    <script type="text/javascript" src="../common/js/common.js"></script>
</body>

</html>