{# Task Detail Modal #}
<div class="modal fade" id="taskDetailModal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">
                    <i class="fa fa-tasks"></i> <span id="taskDetailName">Task Details</span>
                </h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <input type="hidden" id="taskDetailId" value="">

                {# Task Description #}
                <div id="taskDetailDescription" class="task-description"></div>

                {# Task Info #}
                <div class="task-meta">
                    <div class="row">
                        <div class="col-sm-6">
                            <strong>Status:</strong>
                            <span id="taskDetailStatus" class="badge"></span>
                        </div>
                        <div class="col-sm-6">
                            <strong>Due:</strong>
                            <span id="taskDetailDueTime">-</span>
                        </div>
                    </div>
                    <div class="row" id="taskDetailAssignment" style="display: none;">
                        <div class="col-sm-6">
                            <strong>Assigned to:</strong>
                            <span id="taskDetailAssignee">-</span>
                        </div>
                    </div>
                    <div class="row" id="taskDetailCompletion" style="display: none;">
                        <div class="col-sm-12">
                            <strong>Completed by:</strong>
                            <span id="taskDetailCompletedBy">-</span>
                            at <span id="taskDetailCompletedAt">-</span>
                        </div>
                    </div>
                </div>

                <hr>

                {# Status Actions #}
                <div class="task-status-actions">
                    <label>Change Status:</label>
                    <div class="btn-group d-flex" role="group">
                        <button class="btn btn-secondary task-status-btn flex-fill" data-status="0">
                            Not Started
                        </button>
                        <button class="btn btn-info task-status-btn flex-fill" data-status="1">
                            In Progress
                        </button>
                        <button class="btn btn-success task-status-btn flex-fill" data-status="2">
                            Complete
                        </button>
                    </div>
                </div>

                <hr>

                {# Comments Section #}
                <div class="task-comments-section">
                    <h5><i class="fa fa-comments"></i> Comments</h5>
                    <div id="taskCommentsList" class="comments-list">
                        {# Comments loaded dynamically #}
                    </div>
                    <div class="comment-form">
                        <div class="input-group">
                            <input type="text" class="form-control" id="taskCommentInput"
                                   placeholder="Add a comment...">
                            <button class="btn btn-primary" id="submitTaskComment">
                                <i class="fa fa-paper-plane"></i>
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
            </div>
        </div>
    </div>
</div>

{# Handlebars template for task comments #}
{% raw %}
<script id="task-comment-template" type="text/x-handlebars-template">
    <div class="comment-item">
        <div class="comment-header">
            <span class="comment-author">{{authorName}}</span>
            <span class="comment-time">{{createdAtRelative}}</span>
        </div>
        <div class="comment-text">{{comment}}</div>
    </div>
</script>
{% endraw %}