{% extends "base.html" %}
{% set active_nav = 'create' %}
{% block title %}{{ 'Edit task' if task else 'Assign task' }}{% endblock %}
{% block heading %}{{ 'Edit task' if task else 'Assign a task' }}{% endblock %}
{% block content %}
<h1 class="page-title">{{ 'Edit task' if task else 'Assign a task' }}</h1>
<form method="post" class="form"
      action="{{ url_for('tasks.edit', task_id=task.id) if task else url_for('tasks.create') }}">

  <label class="field">
    <span class="field-label">Task</span>
    <input type="text" name="title" value="{{ form.title }}" placeholder="What needs to be done?"
           maxlength="200" required autofocus>
  </label>

  <label class="field">
    <span class="field-label">Details <span class="optional">(optional)</span></span>
    <textarea name="description" rows="3" placeholder="Any extra notes…">{{ form.description }}</textarea>
  </label>

  <div class="field">
    <span class="field-label">Assign to</span>
    <div class="select-wrap" data-select>
      <select name="assignee_id" class="native-select" aria-label="Assign to">
        {% for a in assignees %}
          <option value="{{ a.id }}"
            {{ 'selected' if form.assignee_id|string == a.id|string }}>
            {{ 'Myself' if a.is_self else a.name }}</option>
        {% endfor %}
      </select>
    </div>
    {% if assignees|length == 1 %}
      <span class="hint">Add team members under Team to assign tasks to them.</span>
    {% endif %}
  </div>

  <label class="field">
    <span class="field-label">Due date <span class="optional">(optional)</span></span>
    <input type="date" name="due_date" value="{{ form.due_date }}">
  </label>

  <div class="form-actions">
    <button type="submit" class="btn btn-primary btn-block">
      {{ 'Save changes' if task else 'Assign task' }}</button>
    {% if task %}
      <a class="btn btn-outline btn-block" href="{{ url_for('tasks.detail', task_id=task.id) }}">Cancel</a>
    {% else %}
      <a class="btn btn-outline btn-block" href="{{ url_for('tasks.my_tasks') }}">Cancel</a>
    {% endif %}
  </div>
</form>
{% endblock %}