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

<head>
    <meta charset="utf-8">
    <title>作業一覧(VR)|A Book Check</title>
    <meta name="robots" content="index, follow">
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <meta name="description" content="eXFrame">

    <link rel="stylesheet" type="text/css" href="css/style_202104.css">
    <link rel="stylesheet" type="text/css" href="css/app.css">
    <link rel="stylesheet" type="text/css" href="css/fontawesome_relative_path.css">
    <script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
</head>

<body>
  <?php include('common/simple_header.html');?>
    <div class="container-fluid mb-5">
        <main>
            <h1 class="sr-only">作業一覧</h1>
            <div class="bg-lightblue wide-wrap">
                <div class="container-fluid py-3">
                    <form>
                        <!-- 作業名検索 -->
                        <div class="w-99 w-md-50 w-lg-30 mr-2 mb-2">
                            <label for="job-title" class="sr-only">search</label>
                            <input type="text" class="form-control" id="job-title" placeholder="作業名を入力">
                        </div>
                        <div class="d-flex">
                          <!-- 作業ステータス -->
                          <div class="form-group mb-2 w-99 w-md-50 w-lg-30 mr-3">
                              <select class="form-control" id="tast-status">
                                  <option>すべて</option>
                                  <option>進行中</option>
                                  <option>完了</option>
                              </select>
                          </div>
                          <button type="submit" class="btn btn-outline-primary fs-8 py-2 mb-2 text-nowrap flex-shrink-1">検索</button>
                        </div>
                    </form>
                </div>
            </div>

            <section>
                <div class="row align-items-end my-3">
                    <div class="col-12">
                        <div class="fs-8 mb-2">
                          <div class="lht-0 fs-9 font-weight-bold text-dark">
                              <i class="far fa-folder"></i>
                              合計 8件
                          </div>
                        </div>
                        <div class="fs-8 d-flex">
                          <div class="lht-0 fs-9 font-weight-bold text-warning mr-4">
                              <i class="fas fa-stopwatch"></i>
                              進行中 5件
                          </div>
                          <div class="lht-0 fs-9 font-weight-bold text-primary">
                            <i class="fas fa-check-circle"></i>
                            完了 3件
                          </div>
                        </div>
                    </div>
                </div>
            </section>

            <section class="wide-wrap">
              <div class="col-12 bg-lightblue mb-1px tb-accordion">
                <h2 class="accordion-title fs-12 py-2 m-0 collapsed" data-toggle="collapse" href="#group1" role="button" aria-expanded="false" aria-controls="group1">
                  <span class="text-dark">ページ1/3</span>
                </h2>
                <div class="pb-4 collapse position-relative tb-accordion-content show" id="group1">
                  <div class="pt-3 pb-1 px-3 bg-white">
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-primary">
                                        <i class="fas fa-check-circle"></i>
                                        完了
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-warning">
                                        <i class="fas fa-stopwatch"></i>
                                        進行中
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-primary">
                                        <i class="fas fa-check-circle"></i>
                                        完了
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                  </div>
                </div>
              </div>

              <div class="col-12 bg-lightblue mb-1px tb-accordion">
                <h2 class="accordion-title fs-12 py-2 m-0 collapsed" data-toggle="collapse" href="#group2" role="button" aria-expanded="false" aria-controls="group2">
                  <span class="text-dark">ページ2/3</span>
                </h2>
                <div class="pb-4 collapse position-relative tb-accordion-content show" id="group2">
                  <div class="py-3 px-3 bg-white">
                    該当作業はありません
                  </div>
                </div>
              </div>

              <div class="col-12 bg-lightblue mb-1px tb-accordion">
                <h2 class="accordion-title fs-12 py-2 m-0 collapsed" data-toggle="collapse" href="#group3" role="button" aria-expanded="false" aria-controls="group3">
                  <span class="text-dark">ページ3/3</span>
                </h2>
                <div class="pb-4 collapse position-relative tb-accordion-content show" id="group3">
                  <div class="pt-3 pb-1 px-3 bg-white">
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-primary">
                                        <i class="fas fa-check-circle"></i>
                                        完了
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-warning">
                                        <i class="fas fa-stopwatch"></i>
                                        進行中
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                    <article class="rounded border px-3 py-2 mb-3">
                        <a href="#" class="d-flex text-decoration-none text-dark">
                            <div class="w-100">
                                <h2 class="fs-10 mb-1 lht-14">タイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキストタイトルテキストタイトルテキストタイトルテキストテキストテキストテキストテキストテキストテキスト</h2>
                                <div class="d-flex justify-content-between align-items-center">
                                    <div class="user-id align-middle">ma0001-ma0001</div>
                                    <div class="report-status status-completed lht-0 fs-9 font-weight-bold text-warning">
                                        <i class="fas fa-stopwatch"></i>
                                        進行中
                                    </div>
                                </div>
                            </div>
                            <div class="flex-shrink-1 ml-3 align-self-center">
                                <div class="next-icon">
                                    <div class="bg-primary rounded-circle">
                                        <i class="fas fa-chevron-right fs-9 text-white"></i>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </article>
                  </div>
                </div>
              </div>

            </section>
        </main>
    </div>
    <script type="text/javascript" src="js/app_202104.js" defer></script>
    <script type="text/javascript" src="js/app.js" defer></script>
</body>

</html>