{% extends 'base.html' %}

{% block title %}{{ task.title }} - Task Management System{% endblock %}

{% block content %}
<div class="container">
    <div class="row">
        <!-- Task Details -->
        <div class="col-lg-8">
            <div class="card mb-4">
                <div class="card-header bg-white d-flex justify-content-between align-items-center">
                    <h4 class="mb-0">{{ task.title }}</h4>
                    <div>
                        <span class="badge bg-{% if task.status == 'completed' %}success{% elif task.status == 'in_progress' %}info{% else %}warning{% endif %} me-2">
                            {{ task.get_status_display }}
                        </span>
                        <span class="badge bg-{% if task.priority == 'urgent' %}danger{% elif task.priority == 'high' %}warning{% elif task.priority == 'medium' %}info{% else %}secondary{% endif %}">
                            {{ task.get_priority_display }}
                        </span>
                    </div>
                </div>
                <div class="card-body">
                    <div class="mb-4">
                        <h6 class="text-muted mb-2">Description</h6>
                        <p class="mb-0">{{ task.description|linebreaks }}</p>
                    </div>
                    
                    <div class="row">
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted" style="width: 40%;">Department:</td>
                                    <td><strong>{{ task.department.name }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Assigned To:</td>
                                    <td><strong>{{ task.assigned_to.get_full_name|default:"Unassigned" }}</strong></td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Created By:</td>
                                    <td><strong>{{ task.created_by.get_full_name }}</strong></td>
                                </tr>
                            </table>
                        </div>
                        <div class="col-md-6">
                            <table class="table table-borderless">
                                <tr>
                                    <td class="text-muted" style="width: 40%;">Due Date:</td>
                                    <td>
                                        <strong {% if task.is_overdue %}class="text-danger"{% endif %}>
                                            {{ task.due_date|date:"M d, Y H:i" }}
                                            {% if task.is_overdue %}
                                            <i class="bi bi-exclamation-triangle"></i>
                                            {% endif %}
                                        </strong>
                                    </td>
                                </tr>
                                <tr>
                                    <td class="text-muted">Created:</td>
                                    <td><strong>{{ task.created_at|date:"M d, Y" }}</strong></td>
                                </tr>
                                {% if task.completed_at %}
                                <tr>
                                    <td class="text-muted">Completed:</td>
                                    <td><strong>{{ task.completed_at|date:"M d, Y H:i" }}</strong></td>
                                </tr>
                                {% endif %}
                            </table>
                        </div>
                    </div>

                    {% if can_update_status %}
                    <hr>
                    <div class="d-flex gap-2">
                        {% if task.status != 'completed' %}
                        <a href="{% url 'task-update-status' task.pk %}" class="btn btn-success">
                            <i class="bi bi-check-lg me-2"></i>Update Status
                        </a>
                        {% endif %}
                    </div>
                    {% endif %}
                </div>
                {% if can_edit %}
                <div class="card-footer bg-white">
                    <a href="{% url 'task-update' task.pk %}" class="btn btn-warning">
                        <i class="bi bi-pencil me-2"></i>Edit Task
                    </a>
                    <a href="{% url 'task-delete' task.pk %}" class="btn btn-danger ms-2">
                        <i class="bi bi-trash me-2"></i>Delete Task
                    </a>
                </div>
                {% endif %}
            </div>

            <!-- Comments Section -->
            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Comments ({{ comments|length }})</h5>
                </div>
                <div class="card-body">
                    {% for comment in comments %}
                    <div class="d-flex mb-4">
                        <div class="flex-shrink-0">
                            <div class="bg-primary text-white rounded-circle d-flex align-items-center justify-content-center" style="width: 40px; height: 40px;">
                                {{ comment.author.first_name|first|upper }}
                            </div>
                        </div>
                        <div class="flex-grow-1 ms-3">
                            <div class="d-flex justify-content-between align-items-start">
                                <h6 class="mb-1">{{ comment.author.get_full_name }}</h6>
                                <small class="text-muted">{{ comment.created_at|date:"M d, Y H:i" }}</small>
                            </div>
                            <p class="mb-0">{{ comment.content|linebreaks }}</p>
                        </div>
                    </div>
                    {% if not forloop.last %}<hr>{% endif %}
                    {% empty %}
                    <p class="text-muted text-center py-3">No comments yet. Be the first to comment!</p>
                    {% endfor %}

                    <hr>
                    <form method="post">
                        {% csrf_token %}
                        <div class="mb-3">
                            {{ comment_form.content }}
                        </div>
                        <button type="submit" class="btn btn-primary">
                            <i class="bi bi-chat-left-text me-2"></i>Add Comment
                        </button>
                    </form>
                </div>
            </div>
        </div>

        <!-- Sidebar -->
        <div class="col-lg-4">
            <div class="card mb-4">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Task Progress</h5>
                </div>
                <div class="card-body">
                    <div class="progress mb-3" style="height: 25px;">
                        <div class="progress-bar bg-{% if task.status == 'completed' %}success{% elif task.status == 'in_progress' %}info{% else %}warning{% endif %}" 
                             role="progressbar" 
                             style="width: {% if task.status == 'completed' %}100{% elif task.status == 'in_progress' %}50{% else %}25{% endif %}%">
                            {{ task.get_status_display }}
                        </div>
                    </div>
                    <div class="d-flex justify-content-between text-muted small">
                        <span>Pending</span>
                        <span>In Progress</span>
                        <span>Completed</span>
                    </div>
                </div>
            </div>

            {% if task.is_overdue %}
            <div class="alert alert-danger">
                <i class="bi bi-exclamation-triangle me-2"></i>
                <strong>This task is overdue!</strong>
                <br>Due date was {{ task.due_date|date:"M d, Y" }}
            </div>
            {% elif task.days_remaining > 0 %}
            <div class="alert alert-info">
                <i class="bi bi-clock me-2"></i>
                <strong>{{ task.days_remaining }} days remaining</strong>
                <br>Due on {{ task.due_date|date:"M d, Y" }}
            </div>
            {% endif %}

            <div class="card">
                <div class="card-header bg-white">
                    <h5 class="mb-0">Quick Actions</h5>
                </div>
                <div class="card-body">
                    <a href="{% url 'task-list' %}" class="btn btn-outline-primary w-100 mb-2">
                        <i class="bi bi-arrow-left me-2"></i>Back to Tasks
                    </a>
                    {% if user.is_employee %}
                    <a href="{% url 'my-tasks' %}" class="btn btn-outline-secondary w-100">
                        <i class="bi bi-person-workspace me-2"></i>My Tasks
                    </a>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}