<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" th:lang="${#locale.language}">
<head>
<meta charset="UTF-8">
<title>ToDo List</title>
<link th:href="@{/css/style.css}" rel="stylesheet" type="text/css">
</head>
<body>
  <!-- 操作メッセージエリア -->
  <div th:replace="~{fragments :: msg_area}"></div>
  <!-- 入力フォーム -->
  <form th:action="@{/}" method="post" th:object="${todoData}">
    <!-- ToDO 入力エリア -->
    <table>
      <!-- id -->
      <tr>
        <th>id</th>
        <td>
          <span th:text="*{id}"></span>
          <!-- 更新 のために必要 -->
          <input type="hidden" th:field="*{id}">
        </td>
      </tr>
      <!-- 件名 -->
      <tr>
        <th th:text="#{label.title}"></th>
        <td>
          <input type="text" name="title" size="40" th:value="*{title}">
          <div th:if="${#fields.hasErrors('title')}" th:errors="*{title}" th:errorclass="red"></div>
        </td>
      </tr>
      <!-- 重要度 -->
      <tr>
        <th th:text="#{label.importance}"></th>
        <td>
          <input type="radio" value="1" th:field="*{importance}">
          <span th:text="#{radio.high}"></span>
          <input type="radio" value="0" th:field="*{importance}">
          <span th:text="#{radio.low}"></span>
          <div th:if="${#fields.hasErrors('importance')}" th:errors="*{importance}" th:errorclass="red"></div>
        </td>
      </tr>
      <!-- 緊急度 -->
      <tr>
        <th th:text="#{label.urgency}"></th>
        <td>
          <select name="urgency">
            <option value="-1" th:field="*{urgency}" th:text="#{option.none}"></option>
            <option value="1" th:field="*{urgency}" th:text="#{option.high}"></option>
            <option value="0" th:field="*{urgency}" th:text="#{option.low}"></option>
          </select>
          <div th:if="${#fields.hasErrors('urgency')}" th:errors="*{urgency}" th:errorclass="red"></div>
        </td>
      </tr>
      <!-- 期限 -->
      <tr>
        <th th:text="#{label.deadline}"></th>
        <td>
          <input type="text" name="deadline" th:value="*{deadline}" placeholder="yyyy-mm-dd">
          <div th:if="${#fields.hasErrors('deadline')}" th:errors="*{deadline}" th:errorclass="red"></div>
        </td>
      </tr>
      <!-- チェック -->
      <tr>
        <th th:text="#{label.check}"></th>
        <td>
          <input type="checkbox" value="Y" th:field="*{done}">
          <span th:text="#{text.done}"></span>
          <input type="hidden" name="!done" value="N" />
        </td>
      </tr>
    </table>
    <hr style="margin-top: 2em; margin-bottom: 1em;">
    <!-- タスク一覧 -->
    ■ Task
    <div th:if="${#lists.size(todoData.taskList)} > 0">
      <table>
        <tr>
          <th>id</th>
          <th th:text="#{label.title}"></th>
          <th th:text="#{label.deadline}"></th>
          <th th:text="#{label.check}"></th>
        </tr>
        <!-- 登録済 Task -->
        <tr th:each="task:*{taskList}">
          <td th:text="${task.id}"></td>
          <td th:text="${task.title}"></td>
          <td th:text="${task.deadline}"></td>
          <td th:text="${task.done}"></td>
        </tr>
      </table>
    </div>
    <!-- 更新時の操作ボタン -->
    <div th:if="${session.mode == 'update'}">
      <button type="submit" th:formaction="@{/todo/update}" th:text="#{button.update}"></button>
      <button type="submit" th:formaction="@{/todo/delete}" th:text="#{button.delete}"></button>
      <button type="submit" th:formaction="@{/todo/cancel}" th:text="#{button.cancel}"></button>
    </div>
    <!-- 新規追加時の操作ボタン -->
    <div th:unless="${session.mode == 'update'}">
      <button type="submit" th:formaction="@{/todo/create/do}" th:text="#{button.add}"></button>
      <button type="submit" th:formaction="@{/todo/cancel}" th:text="#{button.cancel}"></button>
    </div>
  </form>
</body>
</html>
