<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
  xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
  layout:decorate="~{layout/layout}">
<head>
  <meta charset="UTF-8" th:remove="tag">
</head>
<body>

  <!-- サイドバーの表示 -->
  <div layout:fragment="sidebar" th:replace="~{fragments/sidebar :: sidebar}">
  </div>

  <!-- コンテンツの表示 -->
  <main layout:fragment="content"
    class="offcanvas-outside bg-light">
    <div class="container-fluid">
      <!-- トグルボタン -->
      <div th:replace="~{fragments/sidebar :: toggler}">
      </div>

      <div class="row">
        <div class="col">

          <div class="card shadow">
            <div class="card-header">
              <h6 class="text-navy my-2">
                マッパーリスト
              </h6>
            </div>
            <div class="card-body table-responsive">
              <table id="user-table" class="table table-bordered">
                <thead>
                  <tr>
                    <th>#</th>
                    <th th:text="#{username}"></th>
                    <th th:text="#{role}"></th>
                    <th th:text="#{operation}"></th>
                  </tr>
                </thead>
                <tbody>
                  <tr th:each="user : ${users}" th:object="${user}">
                    <td th:text="*{id}"></td>
                    <td><a th:text="*{username}" th:href="@{https://www.openstreetmap.org/user/{user}(user=*{username})}"></a></td>
                    <td th:text="*{role}"></td>
                    <td>
                      <a th:href="@{/usertask?user={user}(user=*{username})}" class="btn btn-navy">
                        担当タスク
                      </a>
                    </td>
                  </tr>
                </tbody>
              </table>
            </div>
          </div>

        </div>
      </div>
    </div>
  </main>

</body>
</html>
