{% extends "base.html" %}
{% block title %}Task Management{% endblock %}

{% block content %}
<style>
  :root {
    --primary-color: #667eea;
    --success-color: #10b981;
    --warning-color: #f59e0b;
    --danger-color: #ef4444;
    --info-color: #3b82f6;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --text-dark: #1e293b;
    --text-light: #64748b;
    --shadow-md: 0 4px 6px rgba(0,0,0,0.1);
  }

  /* Page Header */
  .page-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-radius: 16px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
  }

  .page-title {
    font-size: 2rem;
    font-weight: 800;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
  }

  .page-subtitle {
    font-size: 1rem;
    opacity: 0.95;
  }

  /* Stats Cards */
  .stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
  }

  .stat-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    border-left: 4px solid var(--card-color);
    transition: all 0.3s ease;
  }

  .stat-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.15);
  }

  .stat-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-light);
    text-transform: uppercase;
    margin-bottom: 0.5rem;
  }

  .stat-value {
    font-size: 2rem;
    font-weight: 800;
    color: var(--card-color);
  }

  .stat-card.total { --card-color: #667eea; }
  .stat-card.todo { --card-color: #3b82f6; }
  .stat-card.in-progress { --card-color: #f59e0b; }
  .stat-card.completed { --card-color: #10b981; }
  .stat-card.on-hold { --card-color: #64748b; }
  .stat-card.overdue { --card-color: #ef4444; }

  /* Section Cards */
  .section-card {
    background: var(--bg-card);
    border-radius: 12px;
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
    border: 2px solid var(--border-color);
  }

  .section-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
    border-bottom: 2px solid var(--border-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  /* Filters */
  .filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
  }

  /* Form Elements */
  .form-label {
    font-weight: 700;
    color: var(--text-dark);
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.5rem;
  }

  .form-control, .form-select {
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 0.65rem 0.9rem;
    transition: all 0.3s ease;
  }

  .form-control:focus, .form-select:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
  }

  /* Rich Text Editor for Description */
  .description-editor {
    min-height: 200px;
    max-height: 400px;
    overflow-y: auto;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    padding: 1rem;
    background: white;
    transition: all 0.3s ease;
  }

  .description-editor:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    outline: none;
  }

  .editor-toolbar {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    background: #f8fafc;
    border: 2px solid var(--border-color);
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    flex-wrap: wrap;
  }

  .editor-btn {
    background: white;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    padding: 0.4rem 0.8rem;
    cursor: pointer;
    font-size: 0.85rem;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .editor-btn:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  /* Buttons */
  .btn {
    padding: 0.65rem 1.5rem;
    border-radius: 8px;
    font-weight: 600;
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-size: 0.85rem;
    letter-spacing: 0.03em;
    border: none;
  }

  .btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
  }

  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
  }

  .btn-success {
    background: var(--success-color);
    color: white;
  }

  .btn-warning {
    background: var(--warning-color);
    color: white;
  }

  .btn-danger {
    background: var(--danger-color);
    color: white;
  }

  .btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.8rem;
  }

  /* Task Cards */
  .tasks-grid {
    display: grid;
    gap: 1rem;
  }

  .task-card {
    background: white;
    border: 2px solid var(--border-color);
    border-left: 4px solid var(--task-color);
    border-radius: 12px;
    padding: 1.5rem;
    transition: all 0.3s ease;
    cursor: pointer;
  }

  .task-card:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
  }

  .task-card.priority-Low { --task-color: #10b981; }
  .task-card.priority-Medium { --task-color: #3b82f6; }
  .task-card.priority-High { --task-color: #f59e0b; }
  .task-card.priority-Urgent { --task-color: #ef4444; }

  .task-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 1rem;
  }

  .task-title {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 0.5rem;
  }

  .task-badges {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  .badge {
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
  }

  .badge-status-Todo { background: #dbeafe; color: #1e40af; }
  .badge-status-In.Progress { background: #fef3c7; color: #92400e; }
  .badge-status-Completed { background: #d1fae5; color: #065f46; }
  .badge-status-On.Hold { background: #e5e7eb; color: #374151; }

  .badge-priority-Low { background: #d1fae5; color: #065f46; }
  .badge-priority-Medium { background: #dbeafe; color: #1e40af; }
  .badge-priority-High { background: #fef3c7; color: #92400e; }
  .badge-priority-Urgent { background: #fee2e2; color: #991b1b; }

  .task-description {
    color: var(--text-light);
    margin-bottom: 1rem;
    line-height: 1.6;
    max-height: 4.8em;
    overflow: hidden;
    position: relative;
  }

  .task-description::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 1.5em;
    background: linear-gradient(transparent, white);
  }

  .task-meta {
    display: flex;
    gap: 1.5rem;
    flex-wrap: wrap;
    font-size: 0.85rem;
    color: var(--text-light);
    margin-bottom: 1rem;
  }

  .task-meta-item {
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .task-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
  }

  /* Modal Enhancements */
  .modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border-bottom: none;
    border-radius: 12px 12px 0 0;
  }

  .modal-title {
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 0.5rem;
  }

  .modal-content {
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
  }

  .modal-dialog-scrollable .modal-body {
    max-height: calc(100vh - 200px);
  }

  .modal-footer {
    border-top: 1px solid var(--border-color);
  }

  /* Tags Input */
  .tags-input {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding: 0.5rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    min-height: 45px;
    cursor: text;
  }

  .tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 0.3rem 0.7rem;
    border-radius: 6px;
    font-size: 0.8rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  .tag-remove {
    cursor: pointer;
    font-weight: bold;
  }

  /* Pagination */
  .pagination {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
  }

  .page-link {
    padding: 0.5rem 1rem;
    border: 2px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-dark);
    text-decoration: none;
    font-weight: 600;
    transition: all 0.2s ease;
  }

  .page-link:hover {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  .page-link.active {
    background: var(--primary-color);
    color: white;
    border-color: var(--primary-color);
  }

  /* Empty State */
  .empty-state {
    text-align: center;
    padding: 4rem 2rem;
    color: var(--text-light);
  }

  .empty-icon {
    font-size: 4rem;
    margin-bottom: 1rem;
    opacity: 0.5;
  }

  /* Mobile Responsive */
  @media (max-width: 768px) {
    .page-header {
      padding: 1.5rem;
    }

    .page-title {
      font-size: 1.5rem;
    }

    .section-card {
      padding: 1.5rem;
    }

    .stats-grid {
      grid-template-columns: repeat(2, 1fr);
    }

    .filters-grid {
      grid-template-columns: 1fr;
    }

    .task-header {
      flex-direction: column;
    }

    .task-actions {
      width: 100%;
    }

    .task-actions .btn {
      flex: 1;
    }
  }

  @media (max-width: 576px) {
    .stats-grid {
      grid-template-columns: 1fr;
    }

    .stat-value {
      font-size: 1.75rem;
    }
  }
</style>

<div class="page-header">
  <div class="page-title">
    <span>✅</span>
    <span>Task Management</span>
  </div>
  <div class="page-subtitle">Organize, track, and manage your tasks efficiently</div>
</div>

<!-- Statistics Cards -->
<div class="stats-grid">
  <div class="stat-card total">
    <div class="stat-label">Total Tasks</div>
    <div class="stat-value">{{ stats.total }}</div>
  </div>
  
  <div class="stat-card todo">
    <div class="stat-label">To Do</div>
    <div class="stat-value">{{ stats.todo }}</div>
  </div>
  
  <div class="stat-card in-progress">
    <div class="stat-label">In Progress</div>
    <div class="stat-value">{{ stats.in_progress }}</div>
  </div>
  
  <div class="stat-card completed">
    <div class="stat-label">Completed</div>
    <div class="stat-value">{{ stats.completed }}</div>
  </div>
  
  <div class="stat-card on-hold">
    <div class="stat-label">On Hold</div>
    <div class="stat-value">{{ stats.on_hold }}</div>
  </div>
  
  <div class="stat-card overdue">
    <div class="stat-label">Overdue</div>
    <div class="stat-value">{{ stats.overdue }}</div>
  </div>
</div>

<!-- Filters and Actions -->
<div class="section-card">
  <div class="section-title">
    <span>🔍</span>
    <span>Search & Filters</span>
  </div>
  
  <form method="GET" action="{{ url_for('manage_tasks') }}">
    <div class="filters-grid">
      <div>
        <label class="form-label">Search</label>
        <input type="text" name="q" class="form-control" placeholder="Search tasks..." value="{{ search_query }}">
      </div>
      
      <div>
        <label class="form-label">Status</label>
        <select name="status" class="form-select">
          <option value="All" {% if filter_status == 'All' %}selected{% endif %}>All Status</option>
          {% for status in statuses %}
          <option value="{{ status }}" {% if filter_status == status %}selected{% endif %}>{{ status }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div>
        <label class="form-label">Priority</label>
        <select name="priority" class="form-select">
          <option value="All" {% if filter_priority == 'All' %}selected{% endif %}>All Priorities</option>
          {% for priority in priorities %}
          <option value="{{ priority }}" {% if filter_priority == priority %}selected{% endif %}>{{ priority }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div>
        <label class="form-label">Assigned To</label>
        <select name="assigned" class="form-select">
          <option value="All" {% if filter_assigned == 'All' %}selected{% endif %}>All Users</option>
          {% for user in all_users %}
          <option value="{{ user }}" {% if filter_assigned == user %}selected{% endif %}>{{ user }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div>
        <label class="form-label">Category</label>
        <select name="category" class="form-select">
          <option value="All" {% if filter_category == 'All' %}selected{% endif %}>All Categories</option>
          {% for category in categories %}
          <option value="{{ category }}" {% if filter_category == category %}selected{% endif %}>{{ category }}</option>
          {% endfor %}
        </select>
      </div>
      
      <div>
        <label class="form-label">&nbsp;</label>
        <button type="submit" class="btn btn-primary w-100">
          🔍 Apply Filters
        </button>
      </div>
    </div>
  </form>
  
  <div style="margin-top: 1rem;">
    <button class="btn btn-success" data-bs-toggle="modal" data-bs-target="#addTaskModal">
      ➕ Create New Task
    </button>
    <a href="{{ url_for('manage_tasks') }}" class="btn btn-secondary">
      🔄 Clear Filters
    </a>
  </div>
</div>

<!-- Tasks List -->
<div class="section-card">
  <div class="section-title">
    <span>📋</span>
    <span>Tasks</span>
  </div>
  
  {% if tasks %}
  <div class="tasks-grid">
    {% for task in tasks %}
    <div class="task-card priority-{{ task.priority }}">
      <div class="task-header">
        <div style="flex: 1;">
          <div class="task-title">{{ task.title }}</div>
          <div class="task-badges">
            <span class="badge badge-status-{{ task.status }}">{{ task.status }}</span>
            <span class="badge badge-priority-{{ task.priority }}">{{ task.priority }}</span>
            {% if task.category %}
            <span class="badge" style="background: #e9d5ff; color: #6d28d9;">📁 {{ task.category }}</span>
            {% endif %}
          </div>
        </div>
      </div>
      
      {% if task.description %}
      <div class="task-description">{{ task.description[:150] }}{% if task.description|length > 150 %}...{% endif %}</div>
      {% endif %}
      
      <div class="task-meta">
        {% if task.assigned_to %}
        <div class="task-meta-item">
          <span>👤</span>
          <span>{{ task.assigned_to }}</span>
        </div>
        {% endif %}
        
        {% if task.due_date %}
        <div class="task-meta-item">
          <span>📅</span>
          <span>Due: {{ task.due_date }}</span>
        </div>
        {% endif %}
        
        {% if task.created_by %}
        <div class="task-meta-item">
          <span>✍️</span>
          <span>{{ task.created_by }}</span>
        </div>
        {% endif %}
        
        <div class="task-meta-item">
          <span>🕒</span>
          <span>{{ task.created_at[:10] }}</span>
        </div>
      </div>
      
      {% if task.tags %}
      <div style="margin-bottom: 1rem;">
        {% for tag in task.tags.split(',') %}
        <span class="badge" style="background: #dbeafe; color: #1e40af; margin-right: 0.3rem;">🏷️ {{ tag.strip() }}</span>
        {% endfor %}
      </div>
      {% endif %}
      
      <div class="task-actions">
        <button class="btn btn-sm btn-primary" onclick="viewTask({{ task.id }}, '{{ task.title|replace("'", "\\'") }}', `{{ task.description|replace("`", "\\`") }}`, '{{ task.priority }}', '{{ task.status }}', '{{ task.assigned_to or "" }}', '{{ task.due_date or "" }}', '{{ task.category or "" }}', '{{ task.tags or "" }}')">
          👁️ View
        </button>
        <button class="btn btn-sm btn-warning" onclick="editTask({{ task.id }}, '{{ task.title|replace("'", "\\'") }}', `{{ task.description|replace("`", "\\`") }}`, '{{ task.priority }}', '{{ task.status }}', '{{ task.assigned_to or "" }}', '{{ task.due_date or "" }}', '{{ task.category or "" }}', '{{ task.tags or "" }}')">
          ✏️ Edit
        </button>
        <button class="btn btn-sm btn-danger" onclick="deleteTask({{ task.id }}, '{{ task.title|replace("'", "\\'") }}')">
          🗑️ Delete
        </button>
      </div>
    </div>
    {% endfor %}
  </div>
  
  <!-- Pagination -->
  {% if total_pages > 1 %}
  <div class="pagination">
    {% if current_page > 1 %}
    <a href="?page={{ current_page - 1 }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_status != 'All' %}&status={{ filter_status }}{% endif %}{% if filter_priority != 'All' %}&priority={{ filter_priority }}{% endif %}{% if filter_assigned != 'All' %}&assigned={{ filter_assigned }}{% endif %}{% if filter_category != 'All' %}&category={{ filter_category }}{% endif %}" class="page-link">« Previous</a>
    {% endif %}
    
    {% for page_num in range(1, total_pages + 1) %}
      {% if page_num == current_page %}
      <span class="page-link active">{{ page_num }}</span>
      {% elif page_num == 1 or page_num == total_pages or (page_num >= current_page - 2 and page_num <= current_page + 2) %}
      <a href="?page={{ page_num }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_status != 'All' %}&status={{ filter_status }}{% endif %}{% if filter_priority != 'All' %}&priority={{ filter_priority }}{% endif %}{% if filter_assigned != 'All' %}&assigned={{ filter_assigned }}{% endif %}{% if filter_category != 'All' %}&category={{ filter_category }}{% endif %}" class="page-link">{{ page_num }}</a>
      {% elif page_num == current_page - 3 or page_num == current_page + 3 %}
      <span class="page-link">...</span>
      {% endif %}
    {% endfor %}
    
    {% if current_page < total_pages %}
    <a href="?page={{ current_page + 1 }}{% if search_query %}&q={{ search_query }}{% endif %}{% if filter_status != 'All' %}&status={{ filter_status }}{% endif %}{% if filter_priority != 'All' %}&priority={{ filter_priority }}{% endif %}{% if filter_assigned != 'All' %}&assigned={{ filter_assigned }}{% endif %}{% if filter_category != 'All' %}&category={{ filter_category }}{% endif %}" class="page-link">Next »</a>
    {% endif %}
  </div>
  {% endif %}
  
  {% else %}
  <div class="empty-state">
    <div class="empty-icon">📝</div>
    <p>No tasks found. Create your first task to get started!</p>
  </div>
  {% endif %}
</div>

<!-- Add Task Modal -->
<div class="modal fade" id="addTaskModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">➕ Create New Task</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" id="addTaskForm">
        <input type="hidden" name="action" value="add">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Task Title *</label>
            <input type="text" name="title" class="form-control" required placeholder="Enter task title">
          </div>
          
          <div class="mb-3">
            <label class="form-label">Description</label>
            <div class="editor-toolbar">
              <button type="button" class="editor-btn" onclick="formatText('bold')"><strong>B</strong></button>
              <button type="button" class="editor-btn" onclick="formatText('italic')"><em>I</em></button>
              <button type="button" class="editor-btn" onclick="formatText('underline')"><u>U</u></button>
              <button type="button" class="editor-btn" onclick="formatText('insertUnorderedList')">• List</button>
              <button type="button" class="editor-btn" onclick="formatText('insertOrderedList')">1. List</button>
            </div>
            <div class="description-editor" contenteditable="true" id="descriptionEditor" placeholder="Enter detailed task description..."></div>
            <input type="hidden" name="description" id="descriptionInput">
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Priority</label>
              <select name="priority" class="form-select">
                {% for priority in priorities %}
                <option value="{{ priority }}" {% if priority == 'Medium' %}selected{% endif %}>{{ priority }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Status</label>
              <select name="status" class="form-select">
                {% for status in statuses %}
                <option value="{{ status }}" {% if status == 'Todo' %}selected{% endif %}>{{ status }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Assigned To</label>
              <select name="assigned_to" class="form-select">
                <option value="">Unassigned</option>
                {% for user in all_users %}
                <option value="{{ user }}">{{ user }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Due Date</label>
              <input type="date" name="due_date" class="form-control">
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Category</label>
              <input type="text" name="category" class="form-control" list="categoriesList" placeholder="e.g., Development, Marketing">
              <datalist id="categoriesList">
                {% for category in categories %}
                <option value="{{ category }}">
                {% endfor %}
              </datalist>
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Tags (comma-separated)</label>
              <input type="text" name="tags" class="form-control" placeholder="e.g., urgent, bug-fix, feature">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-success">✅ Create Task</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- Edit Task Modal -->
<div class="modal fade" id="editTaskModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">✏️ Edit Task</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" id="editTaskForm">
        <input type="hidden" name="action" value="edit">
        <input type="hidden" name="task_id" id="editTaskId">
        <div class="modal-body">
          <div class="mb-3">
            <label class="form-label">Task Title *</label>
            <input type="text" name="title" id="editTitle" class="form-control" required>
          </div>
          
          <div class="mb-3">
            <label class="form-label">Description</label>
            <div class="editor-toolbar">
              <button type="button" class="editor-btn" onclick="formatText('bold', 'editDescriptionEditor')"><strong>B</strong></button>
              <button type="button" class="editor-btn" onclick="formatText('italic', 'editDescriptionEditor')"><em>I</em></button>
              <button type="button" class="editor-btn" onclick="formatText('underline', 'editDescriptionEditor')"><u>U</u></button>
              <button type="button" class="editor-btn" onclick="formatText('insertUnorderedList', 'editDescriptionEditor')">• List</button>
              <button type="button" class="editor-btn" onclick="formatText('insertOrderedList', 'editDescriptionEditor')">1. List</button>
            </div>
            <div class="description-editor" contenteditable="true" id="editDescriptionEditor"></div>
            <input type="hidden" name="description" id="editDescriptionInput">
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Priority</label>
              <select name="priority" id="editPriority" class="form-select">
                {% for priority in priorities %}
                <option value="{{ priority }}">{{ priority }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Status</label>
              <select name="status" id="editStatus" class="form-select">
                {% for status in statuses %}
                <option value="{{ status }}">{{ status }}</option>
                {% endfor %}
              </select>
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Assigned To</label>
              <select name="assigned_to" id="editAssignedTo" class="form-select">
                <option value="">Unassigned</option>
                {% for user in all_users %}
                <option value="{{ user }}">{{ user }}</option>
                {% endfor %}
              </select>
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Due Date</label>
              <input type="date" name="due_date" id="editDueDate" class="form-control">
            </div>
          </div>
          
          <div class="row">
            <div class="col-md-6 mb-3">
              <label class="form-label">Category</label>
              <input type="text" name="category" id="editCategory" class="form-control" list="categoriesList">
            </div>
            
            <div class="col-md-6 mb-3">
              <label class="form-label">Tags (comma-separated)</label>
              <input type="text" name="tags" id="editTags" class="form-control">
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-warning">💾 Save Changes</button>
        </div>
      </form>
    </div>
  </div>
</div>

<!-- View Task Modal -->
<div class="modal fade" id="viewTaskModal" tabindex="-1">
  <div class="modal-dialog modal-lg modal-dialog-scrollable">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">👁️ Task Details</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <div class="modal-body">
        <h4 id="viewTitle" style="margin-bottom: 1rem;"></h4>
        
        <div style="margin-bottom: 1.5rem;">
          <span id="viewStatus"></span>
          <span id="viewPriority" style="margin-left: 0.5rem;"></span>
          <span id="viewCategory" style="margin-left: 0.5rem;"></span>
        </div>
        
        <div class="mb-4" id="viewDescriptionContainer" style="display: none;">
          <label class="form-label">Description</label>
          <div id="viewDescription" style="padding: 1rem; background: #f8fafc; border-radius: 8px; line-height: 1.6;"></div>
        </div>
        
        <div class="row mb-3">
          <div class="col-md-6" id="viewAssignedContainer" style="display: none;">
            <label class="form-label">Assigned To</label>
            <div id="viewAssigned" style="font-weight: 600;"></div>
          </div>
          
          <div class="col-md-6" id="viewDueDateContainer" style="display: none;">
            <label class="form-label">Due Date</label>
            <div id="viewDueDate" style="font-weight: 600;"></div>
          </div>
        </div>
        
        <div id="viewTagsContainer" style="display: none; margin-top: 1rem;">
          <label class="form-label">Tags</label>
          <div id="viewTags"></div>
        </div>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
</div>

<!-- Delete Confirmation Modal -->
<div class="modal fade" id="deleteTaskModal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header bg-danger">
        <h5 class="modal-title">🗑️ Delete Task</h5>
        <button type="button" class="btn-close btn-close-white" data-bs-dismiss="modal"></button>
      </div>
      <form method="POST" id="deleteTaskForm">
        <input type="hidden" name="action" value="delete">
        <input type="hidden" name="task_id" id="deleteTaskId">
        <div class="modal-body">
          <div class="alert alert-danger">
            <strong>⚠️ Warning:</strong> This action cannot be undone!
          </div>
          <p>Are you sure you want to delete the task: <strong id="deleteTaskTitle"></strong>?</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
          <button type="submit" class="btn btn-danger">🗑️ Delete Task</button>
        </div>
      </form>
    </div>
  </div>
</div>

<script>
// Rich Text Editor Functions
function formatText(command, editorId = 'descriptionEditor') {
  document.getElementById(editorId).focus();
  document.execCommand(command, false, null);
}

// Sync contenteditable with hidden input before form submission
document.getElementById('addTaskForm').addEventListener('submit', function() {
  document.getElementById('descriptionInput').value = document.getElementById('descriptionEditor').innerHTML;
});

document.getElementById('editTaskForm').addEventListener('submit', function() {
  document.getElementById('editDescriptionInput').value = document.getElementById('editDescriptionEditor').innerHTML;
});

// Edit Task Function
function editTask(id, title, description, priority, status, assigned, dueDate, category, tags) {
  document.getElementById('editTaskId').value = id;
  document.getElementById('editTitle').value = title;
  document.getElementById('editDescriptionEditor').innerHTML = description || '';
  document.getElementById('editPriority').value = priority;
  document.getElementById('editStatus').value = status;
  document.getElementById('editAssignedTo').value = assigned;
  document.getElementById('editDueDate').value = dueDate;
  document.getElementById('editCategory').value = category;
  document.getElementById('editTags').value = tags;
  
  const modal = new bootstrap.Modal(document.getElementById('editTaskModal'));
  modal.show();
}

// View Task Function
function viewTask(id, title, description, priority, status, assigned, dueDate, category, tags) {
  document.getElementById('viewTitle').textContent = title;
  
  // Status badge
  const statusBadge = `<span class="badge badge-status-${status}">${status}</span>`;
  document.getElementById('viewStatus').innerHTML = statusBadge;
  
  // Priority badge
  const priorityBadge = `<span class="badge badge-priority-${priority}">${priority}</span>`;
  document.getElementById('viewPriority').innerHTML = priorityBadge;
  
  // Category badge
  if (category) {
    const categoryBadge = `<span class="badge" style="background: #e9d5ff; color: #6d28d9;">📁 ${category}</span>`;
    document.getElementById('viewCategory').innerHTML = categoryBadge;
  } else {
    document.getElementById('viewCategory').innerHTML = '';
  }
  
  // Description
  if (description) {
    document.getElementById('viewDescription').innerHTML = description;
    document.getElementById('viewDescriptionContainer').style.display = 'block';
  } else {
    document.getElementById('viewDescriptionContainer').style.display = 'none';
  }
  
  // Assigned To
  if (assigned) {
    document.getElementById('viewAssigned').textContent = '👤 ' + assigned;
    document.getElementById('viewAssignedContainer').style.display = 'block';
  } else {
    document.getElementById('viewAssignedContainer').style.display = 'none';
  }
  
  // Due Date
  if (dueDate) {
    document.getElementById('viewDueDate').textContent = '📅 ' + dueDate;
    document.getElementById('viewDueDateContainer').style.display = 'block';
  } else {
    document.getElementById('viewDueDateContainer').style.display = 'none';
  }
  
  // Tags
  if (tags) {
    const tagsList = tags.split(',').map(tag => 
      `<span class="badge" style="background: #dbeafe; color: #1e40af; margin-right: 0.5rem;">🏷️ ${tag.trim()}</span>`
    ).join('');
    document.getElementById('viewTags').innerHTML = tagsList;
    document.getElementById('viewTagsContainer').style.display = 'block';
  } else {
    document.getElementById('viewTagsContainer').style.display = 'none';
  }
  
  const modal = new bootstrap.Modal(document.getElementById('viewTaskModal'));
  modal.show();
}

// Delete Task Function
function deleteTask(id, title) {
  document.getElementById('deleteTaskId').value = id;
  document.getElementById('deleteTaskTitle').textContent = title;
  
  const modal = new bootstrap.Modal(document.getElementById('deleteTaskModal'));
  modal.show();
}

// Placeholder behavior for contenteditable
document.querySelectorAll('.description-editor').forEach(editor => {
  editor.addEventListener('focus', function() {
    if (this.textContent.trim() === '') {
      this.innerHTML = '';
    }
  });
  
  editor.addEventListener('blur', function() {
    if (this.textContent.trim() === '') {
      this.innerHTML = '';
    }
  });
});
</script>

{% endblock %}
