{% extends "base.html" %}

{% block title%}
{{ title }}
{% endblock %}

{% block content %}
<div class="data-table">
  <h1>Tasks</h1>
  {% if not tasks %}
  <p>🤔 Whoops……似乎任务都做完了？那么可以点击下方的按钮添加任务！</p>
  {% else %}
  <table>
    <thead>
      <tr>
        {% for field in fields %}
        <th>{{ field }}</th>
        {% endfor%}
        <th>操作</th>
      </tr>
    </thead>
    <tbody>
      {% for task in tasks %}
      <tr>
        <td>{{ task.id }}</td>
        <td>{{ task.name }}</td>
        <td>
          {% if task.priority == 1 %}
          {{ "一般" }}
          {% elif task.priority == 2 %}
          {{ "优先" }}
          {% else %}
          {{ "紧急" }}
          {% endif %}
        </td>
        <td class="task-decs">{{ task.description }}</td>
        <td class="task-status">
          {% if task.is_done %}
          {{ "已完成" }}
          {% else %}
          {{ "未完成" }}
          {% endif %}
        </td>
        <td>{{ task.group.name }}</td>
        <td>
          <div class="ops">
            <span>
              <a href="/tasks/update/{{task.id}}">更新</a>
            </span>
            <span>
              <a href="/tasks/delete/{{task.id}}">删除</a>
            </span>
          </div>
        </td>
      </tr>
      {% endfor %}
    </tbody>
  </table>
</div>
{% endif %}
<div class="btn-add-task">
  <button>+</button>
</div>
<div class="task-form">
  <form action={% url "create_task" %} method="post" class="form">
    {% csrf_token %}
    <div>
      <label for="taskName">任务名称：</label>
      <input type="text" name="taskName" id="taskName" placeholder="请输入待办事项名称" />
    </div>
    <div>
      <label for="taskPriority">优先级：</label>
      <select name="taskPriority" id="taskPriority">
        <option value="1" selected>一般</option>
        <option value="2">优先</option>
        <option value="3">紧急</option>
      </select>
    </div>
    <div>
      <label for="taskGroup"> 分组： </label>
      <select name="taskGroup" id="taskGroup">
        {% for group in groups %}
        <option value="{{ group.id }}">{{ group.name }}</option>
        {% endfor %}
      </select>
    </div>
    <div>
      <label for="task-textarea">任务备注：</label>
      <textarea name="taskDescription" id="task-textarea" rows="5" placeholder="备注内容（可选）"></textarea>
    </div>
    <div class="btn-submit">
      <input type="submit" value="添加" />
    </div>
  </form>
</div>
{% endblock %}