{% extends 'base.html' %}
{% load static %}

{% block title %}AI Task Manager - Home{% endblock %}

{% block content %}
<div class="hero-section text-center py-5">
    <h1 class="display-4">AI Task Manager</h1>
    <p class="lead">Your intelligent assistant for managing tasks and conversations.</p>
</div>

<div class="row justify-content-center">
    <div class="col-lg-8">
        <div class="card shadow-sm mb-4">
            <div class="card-body">
                <h2 class="h4 mb-3">Add a New Task</h2>
                <form method="post">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ form.title.label_tag }}
                        {{ form.title }}
                    </div>
                    <div class="mb-3">
                        {{ form.description.label_tag }}
                        {{ form.description }}
                    </div>
                    <div class="mb-3">
                        {{ form.tags.label_tag }}
                        {{ form.tags }}
                    </div>
                    <div class="mb-3">
                        {{ form.status.label_tag }}
                        {{ form.status }}
                    </div>
                    <button type="submit" class="btn btn-primary">Add Task</button>
                </form>
            </div>
        </div>

        <div class="card shadow-sm">
            <div class="card-header bg-white d-flex justify-content-between align-items-center">
                <h2 class="h5 mb-0">Your To-Do List</h2>
                <form method="post" action="{% url 'core:cleanup_tasks' %}" style="display: inline;">
                    {% csrf_token %}
                    <button type="submit" class="btn btn-warning btn-sm">Cleanup All Tasks</button>
                </form>
            </div>
            <div class="table-responsive">
                <table class="table table-hover mb-0">
                    <thead>
                        <tr>
                            <th scope="col">Task</th>
                            <th scope="col">Description</th>
                            <th scope="col">Tags</th>
                            <th scope="col">Status</th>
                            <th scope="col">Created</th>
                            <th scope="col">Actions</th>
                        </tr>
                    </thead>
                    <tbody>
                        {% for item in todo_list %}
                        <tr>
                            <td>{{ item.title }}</td>
                            <td>{{ item.description|default:"" }}</td>
                            <td>
                                {% if item.tags %}
                                    {% for tag in item.tags.split|slice:":3" %}
                                        <span class="badge bg-secondary">{{ tag }}</span>
                                    {% endfor %}
                                {% endif %}
                            </td>
                            <td><span class="badge status-{{ item.status }}">{{ item.get_status_display }}</span></td>
                            <td>{{ item.created_at|date:"M d, Y" }}</td>
                            <td>
                                <form method="post" action="{% url 'core:delete_task' item.id %}" style="display: inline;">
                                    {% csrf_token %}
                                    <button type="submit" class="btn btn-danger btn-sm">Delete</button>
                                </form>
                            </td>
                        </tr>
                        {% empty %}
                        <tr>
                            <td colspan="5" class="text-center text-muted py-4">No tasks yet. Add one above!</td>
                        </tr>
                        {% endfor %}
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
{% endblock %}
