<!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>
  <!-- ログアウトリンク -->
  <a th:href="@{/logout}" th:text="#{text.logout}"></a>
  <!-- 入力フォーム -->
  <form th:action="@{/}" method="post" th:object="${todoData}">
    <div style="display: flex">
      <div>
        ■ToDo
        <!-- ToDO入力エリア -->
        <table>
          <!-- id -->
          <tr>
            <th>id</th>
            <td>
              <span th:text="*{id}"></span>
              <!-- 更新 のために必要 -->
              <input type="hidden" th:field="*{id}">
              <input type="hidden" th:field="*{ownerId}">
              <input type="hidden" th:field="*{version}"> <!-- 追加 -->
            </td>
          </tr>
          <!-- カテゴリ -->
          <tr>
          <th th:text="#{label.category}"></th>
          <td>
          <select name="categoryCode">
            <option th:each="c : ${session.categoryList}" th:value="${c.pkey.code}"
                    th:text="${c.name}"
                    th:selected="${c.pkey.code} == *{categoryCode}"></option>
          </select>
          <div th:if="${#fields.hasErrors('categoryCode')}" th:errors="*{categoryCode}"
                  th:errorclass="red"></div>
          </td>
          </tr>
          <!-- グループ -->
          <tr>
          <th th:text="#{label.group}"></th>
          <td>
            <select name="groupsId">
              <option value="0">----------</option>
              <option th:each="g : ${session.groupsList}" th:value="${g.id}"
                        th:text="${g.name}" th:selected="${g.id} == *{groupsId}"></option>
            </select>
          </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>
      <!-- 更新の場合、添付ファイル一覧を表示する -->
      <div th:if="${session.mode == 'update'}">
        <div style="margin-left: 3em;">
          <span th:text="#{text.attachedfiles}"></span>
          <table>
            <tr>
              <th>id</th>
              <th th:text="#{label.filename}"></th>
              <th th:text="#{label.note}"></th>
              <th></th>
            </tr>
            <tr th:each="af:*{attachedFileList}">
              <!-- id -->
              <td th:text="${af.id}"></td>
              <!-- ファイル名 -->
              <!-- 別タブで表示するファイル -->
              <td th:if="${af.openInNewTab}">
                <a th:href="@{/todo/af/download/__${af.id}__}" th:text="${af.fileName}" target="_blank" rel="noopener noreferrer"></a>
              </td>
              <!-- downloadするファイル -->
              <td th:unless="${af.openInNewTab}">
                <a th:href="@{/todo/af/download/__${af.id}__}" th:text="${af.fileName}"></a>
              </td>
              <!-- メモ  -->
              <td th:text="${af.note}"></td>
              <!-- 削除リンク  -->
              <td>
                <a th:href="@{/todo/af/delete(af_id=${af.id},todo_id=${todoData.id})}" th:text="#{link.delete}"></a>
              </td>
            </tr>
          </table>
        </div>
      </div>
    </div>
    <!-- 更新の場合、Task一覧を表示する -->
    <div th:if="${session.mode == 'update'}">
      <hr style="margin-top: 2em; margin-bottom: 1em;">
      ■Task
      <table>
        <tr>
          <th>id</th>
          <th th:text="#{label.title}"></th>
          <th th:text="#{label.assignedTo}"></th>
          <th th:text="#{label.progress}"></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}" />
            <!-- 競合検出のために必要 -->
            <input type="hidden" th:name="${'taskList[' + stat.index + '].version'}"
                    th:value="${task.version}" />
          </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>
            <select th:name="${'taskList[' + stat.index + '].assignedTo'}">
            <option th:each="a : ${session.assignedToList}" th:value="${a.id}" th:text="${a.name}"
                   th:selected="${a.id} == ${task.assignedTo}"></option>
            </select>
          </td>
          <!-- 進捗率 -->
          <td align="center">
            <input type="text" th:name="${'taskList[' + stat.index + '].progress'}" size="2"
                    th:value="${task.progress}" style="text-align: right">
            <div th:if="${#fields.hasErrors('taskList[' + stat.index + '].progress')}"
                    th:errors="*{taskList[__${stat.index}__].progress}" 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>
            <select name="newTask.assignedTo">
              <option th:each="a : ${session.assignedToList}" th:value="${a.id}"
                        th:text="${a.name}" th:selected="${a.id} == *{newTask.assignedTo}">
              </option>
            </select>
          </td>
          <!-- 進捗率 -->
          <td align="center">
            <input type="text" name="newTask.progress" size="2" th:value="*{newTask.progress}"
                    placeholder="0-100" style="text-align: right">
            <div th:if="${#fields.hasErrors('newTask.progress')}"
                    th:errors="*{newTask.progress}" 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>
  <!-- 更新の場合、添付ファイル登録エリアを表示する -->
  <div th:if="${session.mode == 'update'}">
    <hr style="margin-top: 1em;">
    <span th:text="#{text.regist_attachedfile}"></span>
    <form th:action="@{/todo/af/upload}" enctype="multipart/form-data" method="post">
      <table>
        <!-- 見出し行 -->
        <tr>
          <!-- ファイル -->
          <th th:text="#{label.filename}"></th>
          <!-- メモ -->
          <th th:text="#{label.note}"></th>
        </tr>
        <!-- 入力行 -->
        <tr>
          <!-- ファイル -->
          <td>
            <input type="file" name="file_contents" required>
          </td>
          <!-- メモ -->
          <td>
            <input type="text" name="note" size="40">
          </td>
        </tr>
      </table>
      <!-- 登録ボタン -->
      <button type="submit" th:text="#{button.add}"></button>
      <!-- 添付先Todoのid -->
      <input type="hidden" name="todo_id" th:value="${todoData.id}">
    </form>
  </div>
</body>
</html>