<section class="task-view task-detail-view" id="taskView" hidden>

    <div class="task-detail-header">
        <div class="task-detail-breadcrumb">
            <span id="taskProject"></span>
            <span>/</span>
            <span id="taskKey"></span>
        </div>

        <div
            class="task-editable task-detail-title"
            id="taskTitle"
            data-task-field="title"
            role="heading"
            aria-level="1"
            tabindex="0"
        ></div>

        <div class="task-detail-action-row">
            <div class="task-detail-actions">
                <?php if (!empty($canEditTasks)): ?>
                    <button class="btn btn-sm btn-outline-secondary" id="taskEditButton">
                        <i class="fa-solid fa-pen me-1"></i>
                        Edit
                    </button>
                <?php endif; ?>

                <button class="btn btn-sm btn-outline-secondary" id="taskCommentButton">
                    <i class="fa-solid fa-comment me-1"></i>
                    Comment
                </button>
            </div>

            <div class="task-status-slot" id="taskStatusSlot"></div>
        </div>
    </div>

    <div class="task-detail-grid">

        <div class="task-detail-main">

            <section class="task-detail-panel" id="taskCustomFieldsPanel" hidden>
                <h2>Custom Fields</h2>
                <div class="task-custom-field-list" id="taskCustomFieldList"></div>
            </section>

            <section class="task-detail-panel">
                <h2>Description</h2>
                <div
                    class="task-editable task-inline-field task-detail-description"
                    id="taskDescription"
                    data-task-field="description"
                    tabindex="0"
                ></div>
            </section>

            <section class="task-detail-panel task-comments-panel">
                <h2>Comments</h2>

                <form class="task-comment-form" id="taskCommentForm">
                    <textarea
                        class="form-control"
                        name="comment"
                        id="taskCommentInput"
                        rows="3"
                        placeholder="Add a comment..."
                    ></textarea>
                    <div class="task-comment-actions">
                        <button class="btn btn-sm btn-primary" type="submit">
                            <i class="fa-solid fa-paper-plane me-1"></i>
                            Add Comment
                        </button>
                        <span class="task-comment-status" id="taskCommentStatus"></span>
                    </div>
                </form>

                <div class="task-comment-list" id="taskCommentList"></div>
                <div class="text-secondary" id="taskCommentEmpty" hidden>
                    No comments yet.
                </div>
            </section>

        </div>

        <aside class="task-detail-side">

            <section class="task-detail-panel">
                <h2>Details</h2>

                <div class="task-detail-meta">
                    <div class="task-detail-meta-row">
                        <span>Type</span>
                        <strong class="task-editable task-inline-field" id="taskType" data-task-field="type" tabindex="0"></strong>
                    </div>

                    <div class="task-detail-meta-row">
                        <span>Priority</span>
                        <strong class="task-editable task-inline-field" id="taskPriority" data-task-field="priority" tabindex="0"></strong>
                    </div>

                    <div class="task-detail-meta-row">
                        <span>Fix Version</span>
                        <strong class="task-editable task-inline-field" id="taskFixVersion" data-task-field="fix_version" tabindex="0"></strong>
                    </div>

                    <div class="task-detail-meta-row">
                        <span>Created</span>
                        <strong id="taskCreated"></strong>
                    </div>

                    <div class="task-detail-meta-row">
                        <span>Updated</span>
                        <strong id="taskUpdated"></strong>
                    </div>
                </div>
            </section>

            <section class="task-detail-panel">
                <h2>People</h2>

                <div class="task-detail-meta">
                    <div class="task-detail-meta-row">
                        <span>Reporter</span>
                        <strong id="taskReporter"></strong>
                    </div>

                    <div class="task-detail-meta-row">
                        <span>Assignee</span>
                        <strong class="task-editable task-inline-field" id="taskAssignee" data-task-field="assignee" tabindex="0"></strong>
                    </div>
                </div>
            </section>

        </aside>

    </div>

</section>
