{% extends "base.html" %}

{% block title %}{{ _('Tasks') }} - Time Tracker{% endblock %}

{% block content %}
<div class="container-fluid">
    {% from "_components.html" import page_header %}
    {% set skeleton = request.args.get('loading') %}
    {% set view = request.args.get('view', 'board') %}
    <div class="row">
        <div class="col-12">
            {% set actions %}
            <div class="d-flex align-items-center gap-2">
                <a href="{{ url_for('tasks.list_tasks', view='board', search=search, status=status, priority=priority, project_id=project_id, assigned_to=assigned_to, overdue=1 if overdue else None) }}" class="btn-header btn-outline-primary {% if view != 'table' %}active{% endif %}">
                    <i class="fas fa-columns"></i> {{ _('Board') }}
                </a>
                <a href="{{ url_for('tasks.list_tasks', view='table', search=search, status=status, priority=priority, project_id=project_id, assigned_to=assigned_to, overdue=1 if overdue else None) }}" class="btn-header btn-outline-primary {% if view == 'table' %}active{% endif %}">
                    <i class="fas fa-table"></i> {{ _('Table') }}
                </a>
                <a href="{{ url_for('tasks.create_task') }}" class="btn-header btn-primary">
                    <i class="fas fa-plus"></i> {{ _('New Task') }}
                </a>
            </div>
            {% endset %}
            {{ page_header('fas fa-tasks', _('Tasks'), _('Plan and track work') ~ ' • ' ~ (tasks|length) ~ ' ' ~ _('total'), actions) }}
        </div>
    </div>

    

    <!-- Summary Cards (Invoices-style) -->
    <div class="row mb-4">
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-primary bg-opacity-10 text-primary">
                                <i class="fas fa-list-check"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('To Do') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'todo')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-warning bg-opacity-10 text-warning">
                                <i class="fas fa-spinner"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('In Progress') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'in_progress')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-info bg-opacity-10 text-info">
                                <i class="fas fa-user-check"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('Review') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'review')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-md-3 col-sm-6 mb-3">
            <div class="card border-0 shadow-sm h-100 summary-card">
                <div class="card-body p-3">
                    <div class="d-flex align-items-center">
                        <div class="flex-shrink-0">
                            <div class="summary-icon bg-success bg-opacity-10 text-success">
                                <i class="fas fa-check-circle"></i>
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="summary-label">{{ _('Completed') }}</div>
                            <div class="summary-value">{{ tasks|selectattr('status', 'equalto', 'done')|list|length }}</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Filters -->
    <div class="card mobile-card mb-4">
        <div class="card-header">
            <div class="d-flex justify-content-between align-items-center">
                <h6 class="mb-0">
                    <i class="fas fa-filter me-2 text-muted"></i>{{ _('Filter Tasks') }}
                </h6>
                <button type="button" class="btn btn-sm" id="toggleFilters" onclick="toggleFilterVisibility()" title="{{ _('Toggle Filters') }}">
                    <i class="fas fa-chevron-up" id="filterToggleIcon"></i>
                </button>
            </div>
        </div>
        <div class="card-body" id="filterBody">
            <form method="GET" class="row g-3">
                <div class="col-md-4 col-sm-6">
                    <label for="search" class="form-label">{{ _('Search') }}</label>
                    <div class="input-group">
                        <span class="input-group-text"><i class="fas fa-search"></i></span>
                        <input type="text" class="form-control" id="search" name="search" 
                               value="{{ search }}" placeholder="{{ _('Task name or description') }}">
                    </div>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="status" class="form-label">{{ _('Status') }}</label>
                    <select class="form-select" id="status" name="status">
                        <option value="">{{ _('All Statuses') }}</option>
                        <option value="todo" {% if status == 'todo' %}selected{% endif %}>{{ _('To Do') }}</option>
                        <option value="in_progress" {% if status == 'in_progress' %}selected{% endif %}>{{ _('In Progress') }}</option>
                        <option value="review" {% if status == 'review' %}selected{% endif %}>{{ _('Review') }}</option>
                        <option value="done" {% if status == 'done' %}selected{% endif %}>{{ _('Done') }}</option>
                        <option value="cancelled" {% if status == 'cancelled' %}selected{% endif %}>{{ _('Cancelled') }}</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="priority" class="form-label">{{ _('Priority') }}</label>
                    <select class="form-select" id="priority" name="priority">
                        <option value="">{{ _('All Priorities') }}</option>
                        <option value="low" {% if priority == 'low' %}selected{% endif %}>{{ _('Low') }}</option>
                        <option value="medium" {% if priority == 'medium' %}selected{% endif %}>{{ _('Medium') }}</option>
                        <option value="high" {% if priority == 'high' %}selected{% endif %}>{{ _('High') }}</option>
                        <option value="urgent" {% if priority == 'urgent' %}selected{% endif %}>{{ _('Urgent') }}</option>
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="project_id" class="form-label">{{ _('Project') }}</label>
                    <select class="form-select" id="project_id" name="project_id">
                        <option value="">{{ _('All Projects') }}</option>
                        {% for project in projects %}
                        <option value="{{ project.id }}" {% if project_id == project.id %}selected{% endif %}>
                            {{ project.name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 col-sm-6">
                    <label for="assigned_to" class="form-label">{{ _('Assigned To') }}</label>
                    <select class="form-select" id="assigned_to" name="assigned_to">
                        <option value="">{{ _('All Users') }}</option>
                        {% for user in users %}
                        <option value="{{ user.id }}" {% if assigned_to == user.id %}selected{% endif %}>
                            {{ user.display_name }}
                        </option>
                        {% endfor %}
                    </select>
                </div>
                <div class="col-md-2 col-sm-6 d-flex align-items-end">
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="1" id="overdue" name="overdue" {% if overdue %}checked{% endif %}>
                        <label class="form-check-label" for="overdue">
                            {{ _('Show overdue only') }}
                        </label>
                    </div>
                </div>
                <div class="col-12">
                    <div class="d-flex gap-2">
                        <button type="submit" class="btn btn-primary">
                            <i class="fas fa-search me-2"></i>{{ _('Apply Filters') }}
                        </button>
                        <a href="{{ url_for('tasks.list_tasks') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>{{ _('Clear') }}
                        </a>
                    </div>
                </div>
            </form>
        </div>
    </div>

    <div class="card mobile-card mb-4">
        <div class="card-body">
    {% if tasks %}
    {% if view == 'table' %}
    <div class="table-responsive">
        <table class="table table-hover align-middle">
            <thead>
                <tr>
                    <th>{{ _('ID') }}</th>
                    <th>{{ _('Task') }}</th>
                    <th>{{ _('Project') }}</th>
                    <th>{{ _('Status') }}</th>
                    <th>{{ _('Priority') }}</th>
                    <th>{{ _('Assignee') }}</th>
                    <th>{{ _('Due') }}</th>
                    <th>{{ _('Est.') }}</th>
                    <th>{{ _('Progress') }}</th>
                    <th class="text-end">{{ _('Actions') }}</th>
                </tr>
            </thead>
            <tbody>
                {% for task in tasks %}
                <tr class="{% if current_user.active_timer and current_user.active_timer.task_id == task.id %}table-active{% endif %}">
                    <td>#{{ task.id }}</td>
                    <td>
                        <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="fw-semibold text-decoration-none">{{ task.name }}</a>
                        {% if task.description %}
                        <div class="text-muted small">{{ task.description[:90] }}{% if task.description|length > 90 %}...{% endif %}</div>
                        {% endif %}
                    </td>
                    <td>{{ task.project.name if task.project else '-' }}</td>
                    <td><span class="status-badge status-{{ task.status }}">{{ task.status_display }}</span></td>
                    <td><span class="priority-badge priority-{{ task.priority }}">{{ task.priority_display }}</span></td>
                    <td>{{ task.assigned_user.display_name if task.assigned_user else '-' }}</td>
                    <td>{% if task.due_date %}{{ task.due_date.strftime('%Y-%m-%d') }}{% else %}-{% endif %}</td>
                    <td>{% if task.estimated_hours %}{{ '%.1f'|format(task.estimated_hours) }}h{% else %}-{% endif %}</td>
                    <td style="min-width:140px;">
                        <div class="progress progress-thin">
                            <div class="progress-bar" role="progressbar" style="width: {{ task.progress_percentage }}%"></div>
                        </div>
                    </td>
                    <td class="text-end">
                        <div class="btn-group" role="group">
                            {% if current_user.active_timer and current_user.active_timer.task_id == task.id %}
                            <form method="POST" action="{{ url_for('timer.stop_timer') }}" class="d-inline">
                                <button type="submit" class="btn btn-sm btn-action btn-action--danger touch-target" title="{{ _('Stop Timer') }}"><i class="fas fa-stop"></i></button>
                            </form>
                            {% else %}
                            <form method="POST" action="{{ url_for('timer.start_timer') }}" class="d-inline">
                                <input type="hidden" name="project_id" value="{{ task.project_id }}">
                                <input type="hidden" name="task_id" value="{{ task.id }}">
                                <button type="submit" class="btn btn-sm btn-action btn-action--success touch-target" title="{{ _('Start Timer') }}"><i class="fas fa-play"></i></button>
                            </form>
                            {% endif %}
                            <a href="{{ url_for('tasks.view_task', task_id=task.id) }}" class="btn btn-sm btn-action btn-action--view touch-target" title="{{ _('View Task') }}"><i class="fas fa-eye"></i></a>
                            <a href="{{ url_for('tasks.edit_task', task_id=task.id) }}" class="btn btn-sm btn-action btn-action--edit touch-target" title="{{ _('Edit Task') }}"><i class="fas fa-pen"></i></a>
                        </div>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
    {% else %}
    {% include 'tasks/_kanban.html' %}
    {% endif %}
    {% else %}
    <!-- Empty State -->
    <div class="row">
        <div class="col-12">
            <div class="card mobile-card">
                <div class="card-body text-center py-5">
                    <div class="bg-light rounded-circle d-flex align-items-center justify-content-center mx-auto mb-4" style="width: 80px; height: 80px;">
                        <i class="fas fa-tasks fa-2x text-muted"></i>
                    </div>
                    <h3 class="text-muted mb-3">{{ _('No tasks found') }}</h3>
                    <p class="text-muted mb-4">{{ _('Try adjusting your filters or create your first task to get started.') }}</p>
                    <div class="d-flex flex-column flex-sm-row gap-2 justify-content-center">
                        <a href="{{ url_for('tasks.create_task') }}" class="btn btn-primary">
                            <i class="fas fa-plus me-2"></i>{{ _('Create Your First Task') }}
                        </a>
                        <a href="{{ url_for('tasks.list_tasks') }}" class="btn btn-outline-secondary">
                            <i class="fas fa-times me-2"></i>{{ _('Clear Filters') }}
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
    {% endif %}
        </div>
    </div>
</div>

<!-- Modern styling now handled by global CSS in base.css -->

<style>
/* Task list page-specific styles */
.filter-collapsed {
    display: none !important;
}

.filter-toggle-transition {
    transition: var(--transition-slow);
}
</style>

<script>
function toggleFilterVisibility() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    
    if (filterBody.classList.contains('filter-collapsed')) {
        // Show filters
        filterBody.classList.remove('filter-collapsed');
        toggleIcon.className = 'fas fa-chevron-up';
        toggleButton.title = '{{ _('Hide Filters') }}';
        localStorage.setItem('taskFiltersVisible', 'true');
    } else {
        // Hide filters
        filterBody.classList.add('filter-collapsed');
        toggleIcon.className = 'fas fa-chevron-down';
        toggleButton.title = '{{ _('Show Filters') }}';
        localStorage.setItem('taskFiltersVisible', 'false');
    }
}

// Initialize filter visibility on page load
document.addEventListener('DOMContentLoaded', function() {
    const filterBody = document.getElementById('filterBody');
    const toggleIcon = document.getElementById('filterToggleIcon');
    const toggleButton = document.getElementById('toggleFilters');
    
    // Get saved state (default to visible)
    const filtersVisible = localStorage.getItem('taskFiltersVisible') || 'true';
    
    if (filtersVisible === 'false') {
        filterBody.classList.add('filter-collapsed');
        toggleIcon.className = 'fas fa-chevron-down';
        toggleButton.title = '{{ _('Show Filters') }}';
    }
    
    // Add transition class after initial setup
    setTimeout(() => {
        filterBody.classList.add('filter-toggle-transition');
    }, 100);
});
</script>
{% endblock %}