{% extends "base.html" %}

{% block title %}Task History{% endblock %}

{% block content %}
<div class="content-header">
    <h1 class="content-title">Task History</h1>
    <div class="content-actions">
        <button class="btn btn-sm" id="refresh-tasks">Refresh</button>
    </div>
</div>

<div class="content-area">
    <!-- In Progress Tasks -->
    <div class="section">
        <h2 class="section-title">In Progress Tasks</h2>
        {% if running_tasks %}
            <div class="task-list">
                {% for task in running_tasks %}
                <div class="task-card">
                    <div class="task-header">
                        <h3 class="task-title">{{ task.description }}</h3>
                        <span class="task-status status-{{ task.status.value }}">{{ task.status.value }}</span>
                    </div>
                    <div class="task-details">
                        <p class="task-message">{{ task.message }}</p>
                        <div class="progress-bar">
                            <div class="progress-fill" data-progress="{{ task.progress }}"></div>
                        </div>
                        <div class="task-meta">
                            <span class="task-type">Type: {{ task.type }}</span>
                            <span class="task-time">Started: {{ task.started_at.strftime('%Y-%m-%d %H:%M:%S') if task.started_at else 'Pending' }}</span>
                            <span class="task-id">ID: {{ task.id }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <p>No tasks currently in progress.</p>
            </div>
        {% endif %}
    </div>

    <!-- Completed Tasks -->
    <div class="section">
        <h2 class="section-title">Completed Tasks</h2>
        {% if completed_tasks %}
            <div class="task-list">
                {% for task in completed_tasks %}
                <div class="task-card">
                    <div class="task-header">
                        <h3 class="task-title">{{ task.description }}</h3>
                        <span class="task-status status-completed">Completed</span>
                    </div>
                    <div class="task-details">
                        <p class="task-message">{{ task.message }}</p>
                        <div class="task-meta">
                            <span class="task-type">Type: {{ task.type }}</span>
                            <span class="task-time">Completed: {{ task.completed_at.strftime('%Y-%m-%d %H:%M:%S') if task.completed_at else 'Unknown' }}</span>
                            <span class="task-duration">Duration: {{ ((task.completed_at - task.started_at).total_seconds()|int) if task.completed_at and task.started_at else 0 }} seconds</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <p>No completed tasks in history.</p>
            </div>
        {% endif %}
    </div>

    <!-- Failed Tasks -->
    <div class="section">
        <h2 class="section-title">Failed Tasks</h2>
        {% if failed_tasks %}
            <div class="task-list">
                {% for task in failed_tasks %}
                <div class="task-card task-failed">
                    <div class="task-header">
                        <h3 class="task-title">{{ task.description }}</h3>
                        <span class="task-status status-failed">Failed</span>
                    </div>
                    <div class="task-details">
                        <p class="task-message">{{ task.message }}</p>
                        <p class="task-error">{{ task.error }}</p>
                        <div class="task-meta">
                            <span class="task-type">Type: {{ task.type }}</span>
                            <span class="task-time">Failed at: {{ task.completed_at.strftime('%Y-%m-%d %H:%M:%S') if task.completed_at else 'Unknown' }}</span>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        {% else %}
            <div class="empty-state">
                <p>No failed tasks in history.</p>
            </div>
        {% endif %}
    </div>
</div>
{% endblock %}

{% block scripts %}
<script>
    document.addEventListener('DOMContentLoaded', function() {
        // Set progress bar widths based on data-progress attribute
        const progressBars = document.querySelectorAll('.progress-fill');
        progressBars.forEach(bar => {
            const progress = bar.getAttribute('data-progress');
            bar.style.width = progress + '%';
            bar.style.height = '100%';
            bar.style.backgroundColor = '#3fb950';
        });
        
        // Refresh button functionality
        document.getElementById('refresh-tasks').addEventListener('click', function() {
            this.textContent = 'Refreshing...';
            this.disabled = true;
            
            // Reload the page to refresh the task list
            window.location.reload();
        });
    });
</script>
{% endblock %}