<!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>
  <!-- 操作メッセージエリア -->
  <div th:replace="fragments :: msg_area"></div>
  <!-- 入力フォーム -->
  <form th:action="@{/}" method="post" th:object="${todoData}">
    ■ToDo
    <!-- 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>
    <div th:if="${session.mode == 'update'}"><!-- 更新の場合、Task一覧を表示する -->
      <hr style="margin-top: 2em; margin-bottom: 1em;">
      <!-- タスク一覧 -->
      ■Task
      <!-- タスク更新エリア -->
      <table>
        <tr>
          <th>id</th>
          <th th:text="#{label.title}"></th>
          <th th:text="#{label.deadline}"></th>
          <th th:text="#{label.check}"></th>
          <th></th><!-- 削除リンク用の列 -->
          
        </tr>
        <!-- 登録済みTask -->
        <tr th:each="task,stat:*{taskList}">
          <!-- id -->
          <td>
            <span th:text="${task.id}"></span>
            <!-- 更新 のために必要 -->
            <input type="hidden" th:name="${'taskList[' + stat.index + '].id'}"
              th:value="${task.id}" />
          </td>
          <!-- 件名 -->
          <td>
            <input type="text" th:name="${'taskList[' + stat.index + '].title'}" size="40"
              th:value="${task.title}">
            <div th:if="${#fields.hasErrors('taskList[' + stat.index + '].title')}"
              th:errors="*{taskList[__${stat.index}__].title}" th:errorclass="red"></div>
          </td>
          <!-- 期限 -->
          <td>
            <input type="text" th:name="${'taskList[' + stat.index + '].deadline'}" size="10"
              th:value="${task.deadline}" placeholder="yyyy-mm-dd">
            <div th:if="${#fields.hasErrors('taskList[' + stat.index + '].deadline')}"
              th:errors="*{taskList[__${stat.index}__].deadline}" th:errorclass="red"></div>
          </td>
          <!-- チェック -->
          <td>
            <input type="checkbox" th:name="${'taskList[' + stat.index + '].done'}" value="Y"
              th:checked="*{taskList[__${stat.index}__].done=='Y'}" />
            <input type="hidden" th:name="${'!taskList[__${stat.index}__].done'}" value="N" />
          </td>
          <!-- 削除リンク -->
          <td>
            <a th:href="@{/task/delete(task_id=${task.id},todo_id=*{id})}" 
               th:text="#{link.delete}"></a>
          </td>
        </tr>
        <!-- 新規タスク入力行 -->
        <tr>
          <!-- id -->
          <td></td>
          <!-- 件名 -->
          <td>
            <input type="text" name="newTask.title" size="40" th:value="*{newTask.title}">
            <div th:if="${#fields.hasErrors('newTask.title')}" th:errors="*{newTask.title}"
              th:errorclass="red"></div>
          </td>
          <!-- 期限 -->
          <td>
            <input type="text" name="newTask.deadline" size="10" 
              th:value="*{newTask.deadline}"  placeholder="yyyy-mm-dd">
            <div th:if="${#fields.hasErrors('newTask.deadline')}" 
              th:errors="*{newTask.deadline}"
              th:errorclass="red"></div>
          </td>
          <!-- チェック -->
          <td>
            <input type="checkbox" name="newTask.done" value="Y" 
              th:checked="*{newTask.done=='Y'}" />
            <input type="hidden" name="!newTask.done" value="N" />
          </td>
          <!-- 追加ボタン  -->
          <td style="padding: 0px;">
            <button type="submit" th:formaction="@{/task/create}" th:text="#{button.add}"
              style="margin: 2px; padding: 2px; width: 4em;"></button>
          </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>
