<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>ToDo List</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
</head>
<body>
  ${#locale.language}=<span th:text="${#locale.language}"></span>
  <form th:action="@{/}" method="post" th:object="${todoQuery}">
    <!-- 検索条件入力エリア -->
    <div style="display: flex">
      <table border="1">
        <tr>
          <th th:text="#{label.title}"></th>
          <th th:text="#{label.importance}"></th>
          <th th:text="#{label.urgency}"></th>
          <th th:text="#{label.deadline}"></th>
          <th th:text="#{label.check}"></th>
        </tr>
        <tr>
          <!-- 件名 -->
          <td>
            <input type="text" name="title" size="40" th:value="*{title}">
          </td>
          <!-- 重要度 -->
          <td>
            <select name="importance">
              <option value="-1" th:field="*{importance}">-</option>
              <option value="1" th:field="*{importance}" th:text="#{option.high}"></option>
              <option value="0" th:field="*{importance}" th:text="#{option.low}"></option>
            </select>
          </td>
          <!-- 緊急度 -->
          <td>
            <select name="urgency">
              <option value="-1" th:field="*{urgency}">-</option>
              <option value="1" th:field="*{urgency}" th:text="#{option.high}"></option>
              <option value="0" th:field="*{urgency}" th:text="#{option.low}"></option>
            </select>
          </td>
          <!-- 期限 -->
          <td>
            <input type="text" name="deadlineFrom" th:value="*{deadlineFrom}" size="10"
              placeholder="yyyy-mm-dd">
            ～
            <input type="text" name="deadlineTo" th:value="*{deadlineTo}" size="10"
              placeholder="yyyy-mm-dd">
          </td>
          <!-- 完了 -->
          <td>
            <input type="checkbox" value="Y" th:field="*{done}">
            <span th:text="#{text.done}"></span>
          </td>
      </table>
      <!-- 検索ボタン -->
      <button type="submit" th:formaction="@{/todo/query}" 
              th:text="#{button.query}"></button>
    </div>
    <!-- エラーメッセージエリア -->
    <div th:if="${#fields.hasErrors('deadlineFrom')}" th:errors="*{deadlineFrom}"
      th:errorclass="red"></div>
    <div th:if="${#fields.hasErrors('deadlineTo')}" th:errors="*{deadlineTo}" th:errorclass="red"></div>
    <hr>
    <!-- 新規追加ボタン -->
    <button type="submit" th:formaction="@{/todo/create/form}" 
            th:text="#{button.new}"></button>
  </form>
  <!-- 検索結果エリア -->
  <table border="1">
    <tr>
      <th>id</th>
      <th th:text="#{label.title}"></th>
      <th th:text="#{label.importance}"></th>
      <th th:text="#{label.urgency}"></th>
      <th th:text="#{label.deadline}"></th>
      <th th:text="#{label.check}"></th>
    </tr>
    <tr th:each="todo:${todoList}">
      <!-- id -->
      <td th:text="${todo.id}"></td>
      <!-- 件名 -->
      <td>
        <a th:href="@{/todo/__${todo.id}__}" th:text="${todo.title}"></a>
      </td>
      <!-- 重要度 -->
      <td th:text="${todo.importance == 1 ? '★★★':'★'}"></td>
      <!-- 緊急度 -->
      <td th:text="${todo.urgency == 1 ? '★★★':'★'}"></td>
      <!-- 期限 -->
      <td th:text="${todo.deadline}"></td>
      <!-- 完了 -->
      <td th:text="${todo.done == 'Y' ? '__#{text.done}__' : ''}"></td>
    </tr>
  </table>
  <!-- ページリンク -->
  <div th:if="${todoList != null && #lists.size(todoList) != 0}">
    <!-- 表示ページ位置 -->
    <span th:text="#{text.paging(${todoPage.getNumber() + 1},${todoPage.getTotalPages()})}"></span>
    <ul id="nav">
      <!-- ←前 -->
      <li>
        <span th:if="${todoPage.isFirst()}" th:text="#{link.prev}"></span>
        <a th:unless="${todoPage.isFirst()}" 
             th:href="@{/todo/query(page = ${todoPage.getNumber() - 1})}"
            th:text="#{link.prev}"></a>
      </li>
      <!-- 1 2 3 4 5 -->
      <li
        th:each="i : ${#numbers.sequence(todoPage.getNumber()-2 < 0 ? 0 : todoPage.getNumber()-2, todoPage.getNumber()+2 > todoPage.getTotalPages()-1 ? todoPage.getTotalPages()-1 : todoPage.getNumber()+2)}">
        <span th:if="${i == todoPage.getNumber()}" th:text="${i + 1}"></span>
        <a th:unless="${i == todoPage.getNumber()}" th:href="@{/todo/query(page=${i})}"
          th:text="${i + 1}"></a>
      </li>
      <!-- 次→ -->
      <li>
        <span th:if="${todoPage.isLast()}" th:text="#{link.next}"></span>
        <a th:unless="${todoPage.isLast()}" 
           th:href="@{/todo/query(page = (${todoPage.getNumber()+ 1}))}"
           th:text="#{link.next}"></a>
      </li>
    </ul>
  </div>
</body>
</html>
