{% extends 'base.html' %}
{% block title %}Tasks · Mini Suite{% endblock %}
{% block content %}
<div class="d-flex align-items-center justify-content-between mb-4">
  <h1 class="h4 mb-0">Tasks</h1>
  <a href="{{ url_for('tasks.create') }}" class="btn btn-primary">
    <i class="bi bi-plus-lg me-1"></i>New Task
  </a>
</div>

<!-- Filters and Sorting -->
<div class="card mb-4">
  <div class="card-body">
    <div class="row g-3">
      <div class="col-md-6">
        <label class="form-label">Filter by:</label>
        <div class="btn-group w-100" role="group">
          <input type="radio" class="btn-check" name="filter" id="filter-all" value="all" {% if filter_by == 'all' %}checked{% endif %}>
          <label class="btn btn-outline-primary" for="filter-all">All</label>
          
          <input type="radio" class="btn-check" name="filter" id="filter-pending" value="pending" {% if filter_by == 'pending' %}checked{% endif %}>
          <label class="btn btn-outline-primary" for="filter-pending">Pending</label>
          
          <input type="radio" class="btn-check" name="filter" id="filter-completed" value="completed" {% if filter_by == 'completed' %}checked{% endif %}>
          <label class="btn btn-outline-primary" for="filter-completed">Completed</label>
          
          <input type="radio" class="btn-check" name="filter" id="filter-overdue" value="overdue" {% if filter_by == 'overdue' %}checked{% endif %}>
          <label class="btn btn-outline-danger" for="filter-overdue">Overdue</label>
          
          <input type="radio" class="btn-check" name="filter" id="filter-high" value="high_priority" {% if filter_by == 'high_priority' %}checked{% endif %}>
          <label class="btn btn-outline-warning" for="filter-high">High Priority</label>
        </div>
      </div>
      <div class="col-md-6">
        <label class="form-label">Sort by:</label>
        <select class="form-select" id="sort-select">
          <option value="created_desc" {% if sort_by == 'created_desc' %}selected{% endif %}>Newest First</option>
          <option value="created_asc" {% if sort_by == 'created_asc' %}selected{% endif %}>Oldest First</option>
          <option value="due_date" {% if sort_by == 'due_date' %}selected{% endif %}>Due Date</option>
          <option value="priority" {% if sort_by == 'priority' %}selected{% endif %}>Priority</option>
        </select>
      </div>
    </div>
  </div>
</div>

<!-- Tasks List -->
{% if tasks.items %}
  <div class="row g-3">
    {% for task in tasks.items %}
      <div class="col-12">
        <div class="card {% if task.completed %}border-success{% elif task.priority == 'high' %}border-warning{% endif %}">
          <div class="card-body">
            <div class="row align-items-center">
              <div class="col-auto">
                <form method="POST" action="{{ url_for('tasks.toggle_complete', id=task.id) }}" class="d-inline">
                  <button type="submit" class="btn btn-link p-0 border-0 task-toggle" data-task-id="{{ task.id }}">
                    <i class="bi {% if task.completed %}bi-check-circle-fill text-success{% else %}bi-circle{% endif %} fs-4"></i>
                  </button>
                </form>
              </div>
              <div class="col">
                <div class="d-flex align-items-start justify-content-between">
                  <div>
                    <h5 class="card-title mb-1 {% if task.completed %}text-decoration-line-through text-muted{% endif %}">
                      {{ task.title }}
                    </h5>
                    {% if task.description %}
                      <p class="card-text text-muted small mb-1">{{ task.description[:100] }}{% if task.description|length > 100 %}...{% endif %}</p>
                    {% endif %}
                    <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.due_date %}
                        <small class="text-muted">
                          <i class="bi bi-calendar me-1"></i>
                          Due {{ task.due_date.strftime('%b %d, %Y at %I:%M %p') }}
                        </small>
                      {% endif %}
                      <small class="text-muted">
                        Created {{ task.created_at.strftime('%b %d, %Y') }}
                      </small>
                    </div>
                  </div>
                  <div class="btn-group">
                    <a href="{{ url_for('tasks.view', id=task.id) }}" class="btn btn-outline-primary btn-sm">View</a>
                    <a href="{{ url_for('tasks.edit', id=task.id) }}" class="btn btn-outline-secondary btn-sm">Edit</a>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    {% endfor %}
  </div>

  <!-- Pagination -->
  {% if tasks.pages > 1 %}
    <nav aria-label="Tasks pagination" class="mt-4">
      <ul class="pagination justify-content-center">
        {% if tasks.has_prev %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('tasks.index', page=tasks.prev_num, filter=filter_by, sort=sort_by) }}">Previous</a>
          </li>
        {% endif %}
        
        {% for page_num in tasks.iter_pages() %}
          {% if page_num %}
            {% if page_num != tasks.page %}
              <li class="page-item">
                <a class="page-link" href="{{ url_for('tasks.index', page=page_num, filter=filter_by, sort=sort_by) }}">{{ page_num }}</a>
              </li>
            {% else %}
              <li class="page-item active">
                <span class="page-link">{{ page_num }}</span>
              </li>
            {% endif %}
          {% else %}
            <li class="page-item disabled">
              <span class="page-link">...</span>
            </li>
          {% endif %}
        {% endfor %}
        
        {% if tasks.has_next %}
          <li class="page-item">
            <a class="page-link" href="{{ url_for('tasks.index', page=tasks.next_num, filter=filter_by, sort=sort_by) }}">Next</a>
          </li>
        {% endif %}
      </ul>
    </nav>
  {% endif %}
{% else %}
  <div class="text-center py-5">
    <i class="bi bi-check2-square display-1 text-muted"></i>
    <h3 class="mt-3">No tasks yet</h3>
    <p class="text-muted">Create your first task to get started.</p>
    <a href="{{ url_for('tasks.create') }}" class="btn btn-primary">
      <i class="bi bi-plus-lg me-1"></i>Create Task
    </a>
  </div>
{% endif %}

<script>
document.addEventListener('DOMContentLoaded', function() {
  // Handle filter changes
  const filterInputs = document.querySelectorAll('input[name="filter"]');
  filterInputs.forEach(input => {
    input.addEventListener('change', function() {
      updateURL();
    });
  });
  
  // Handle sort changes
  const sortSelect = document.getElementById('sort-select');
  sortSelect.addEventListener('change', function() {
    updateURL();
  });
  
  function updateURL() {
    const filter = document.querySelector('input[name="filter"]:checked').value;
    const sort = sortSelect.value;
    const url = new URL(window.location);
    url.searchParams.set('filter', filter);
    url.searchParams.set('sort', sort);
    url.searchParams.delete('page'); // Reset to first page
    window.location.href = url.toString();
  }
});
</script>
{% endblock %}