{% extends 'base.html' %}
{% block title %}{{ task.title }} · Mini Suite{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h1 class="h4 mb-0">{{ task.title }}</h1>
  <div class="btn-group">
    <a href="{{ url_for('tasks.edit', id=task.id) }}" class="btn btn-primary">
      <i class="bi bi-pencil me-1"></i>Edit
    </a>
    <a href="{{ url_for('tasks.index') }}" class="btn btn-outline-secondary">
      <i class="bi bi-arrow-left me-1"></i>Back to Tasks
    </a>
  </div>
</div>

<div class="row">
  <div class="col-lg-8">
    <div class="card">
      <div class="card-body">
        <div class="d-flex align-items-center mb-3">
          <form method="POST" action="{{ url_for('tasks.toggle_complete', id=task.id) }}" class="d-inline me-3">
            <button type="submit" class="btn btn-link p-0 border-0">
              <i class="bi {% if task.completed %}bi-check-circle-fill text-success{% else %}bi-circle{% endif %} fs-3"></i>
            </button>
          </form>
          <div>
            <h2 class="h5 mb-1 {% if task.completed %}text-decoration-line-through text-muted{% endif %}">{{ task.title }}</h2>
            <div class="d-flex gap-3 align-items-center">
              <span class="badge bg-{% if task.priority == 'high' %}danger{% elif task.priority == 'medium' %}warning{% else %}secondary{% endif %}">
                {{ task.priority.title() }} Priority
              </span>
              {% if task.completed %}
                <span class="badge bg-success">Completed</span>
              {% else %}
                <span class="badge bg-secondary">Pending</span>
              {% endif %}
            </div>
          </div>
        </div>
        
        {% if task.description %}
          <div class="mb-3">
            <h6>Description</h6>
            <div class="task-description">
              {{ task.description|replace('\n', '<br>')|safe }}
            </div>
          </div>
        {% endif %}
        
        <div class="row">
          {% if task.due_date %}
            <div class="col-md-6">
              <h6>Due Date</h6>
              <p class="text-muted">
                <i class="bi bi-calendar me-1"></i>
                {{ task.due_date.strftime('%B %d, %Y at %I:%M %p') }}
              </p>
            </div>
          {% endif %}
          <div class="col-md-6">
            <h6>Created</h6>
            <p class="text-muted">
              <i class="bi bi-clock me-1"></i>
              {{ task.created_at.strftime('%B %d, %Y at %I:%M %p') }}
            </p>
            {% if task.updated_at != task.created_at %}
              <h6>Last Updated</h6>
              <p class="text-muted">
                <i class="bi bi-clock-history me-1"></i>
                {{ task.updated_at.strftime('%B %d, %Y at %I:%M %p') }}
              </p>
            {% endif %}
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<style>
.task-description {
  line-height: 1.6;
  white-space: pre-wrap;
}
</style>
{% endblock %}