{% extends "base.html" %}

{% block title %}Edit {{ task.title() }} -- gest{% endblock %}
{% block nav_tasks %}class="active"{% endblock %}

{% block content %}
<h1 class="section-heading">Edit Task</h1>
<div class="summary">
  <a href="/tasks/{{ task.id() }}">&larr; back to task</a>
</div>

{% if let Some(err) = error %}
<div class="term" style="border-color: var(--error); margin-bottom: 16px;">
  <div class="term-body">
    <span class="c-error">{{ err }}</span>
  </div>
</div>
{% endif %}

<div class="term">
  <div class="term-bar"><span class="term-title">edit task {{ task.id().short() }}</span></div>
  <div class="term-body">
    <form method="post" action="/tasks/{{ task.id() }}">
      <input type="hidden" name="_csrf" value="__CSRF_TOKEN__">
      <div class="form-group">
        <label for="title">Title</label>
        <input class="form-input" type="text" id="title" name="title" required autofocus value="{{ title }}">
      </div>
      <div class="form-group md-preview-container">
        <label for="description">Description</label>
        <button type="button" class="btn md-preview-btn md-preview-toggle" data-target="description">Preview</button>
        <textarea class="form-textarea" id="description" name="description" placeholder="Markdown supported...">{{ description }}</textarea>
        <div id="description-preview" class="md-preview md-content"></div>
      </div>
      <div class="form-group">
        <label for="status">Status</label>
        <select class="form-select" id="status" name="status">
          <option value="open"{% if task.status().to_string() == "open" %} selected{% endif %}>Open</option>
          <option value="in-progress"{% if task.status().to_string() == "in-progress" %} selected{% endif %}>In Progress</option>
          <option value="done"{% if task.status().to_string() == "done" %} selected{% endif %}>Done</option>
          <option value="cancelled"{% if task.status().to_string() == "cancelled" %} selected{% endif %}>Cancelled</option>
        </select>
      </div>
      <div class="form-group">
        <label for="priority">Priority</label>
        <select class="form-select" id="priority" name="priority">
          {% for option in priority_options %}
          <option value="{{ option.value }}"{% if option.selected %} selected{% endif %}>{{ option.label }}</option>
          {% endfor %}
        </select>
      </div>
      <div class="form-group">
        <label for="tags">Tags (comma-separated)</label>
        <input class="form-input" type="text" id="tags" name="tags" placeholder="e.g. backend, urgent, bug" value="{{ tags }}">
      </div>
      <div class="form-group">
        <button type="button" id="rel-toggle" class="btn" aria-expanded="false" aria-controls="rel-modal">Relationships</button>
        <div id="rel-modal" class="rel-modal" role="dialog" aria-label="Add relationship">
          <div class="rel-types">
            <button type="button" class="rel-type-btn" data-rel="relates-to">relates to</button>
            <button type="button" class="rel-type-btn" data-rel="blocks">blocks</button>
            <button type="button" class="rel-type-btn" data-rel="blocked-by">blocked by</button>
            <button type="button" class="rel-type-btn" data-rel="parent-of">parent of</button>
            <button type="button" class="rel-type-btn" data-rel="child-of">child of</button>
          </div>
          <input type="text" class="form-input rel-search-input" placeholder="Search tasks and artifacts..." aria-label="Search tasks and artifacts">
          <div class="rel-results"></div>
          <div class="rel-pending">
            {% for link in existing_links.iter() %}
            <div class="rel-pending-item">
              <span class="c-pewter">{{ link.rel }}</span>
              <span class="c-azure">{{ link.ref_ }}</span>
              <button type="button" class="rel-remove">&times;</button>
              <input type="hidden" name="link_rel[]" value="{{ link.rel }}">
              <input type="hidden" name="link_ref[]" value="{{ link.ref_ }}">
            </div>
            {% endfor %}
          </div>
          <div class="rel-hidden-inputs"></div>
        </div>
      </div>
      <div class="form-actions">
        <button class="btn btn-primary" type="submit">Save Changes</button>
        <a class="btn" href="/tasks/{{ task.id() }}">Cancel</a>
      </div>
    </form>
  </div>
</div>
{% endblock %}