<section class="version-view" id="versionView" hidden>
    <div class="version-header">
        <div>
            <div class="viewer-key" id="versionKey"></div>
            <div
                class="version-editable version-title"
                id="versionName"
                data-version-field="name"
                role="heading"
                aria-level="1"
                tabindex="0"
            ></div>
        </div>

        <?php if (!empty($canEditVersions)): ?>
            <button class="btn btn-outline-secondary btn-sm" id="versionEditButton">
                <i class="fa-solid fa-pen me-1"></i>
                Edit
            </button>
        <?php endif; ?>
    </div>

    <div class="version-detail-grid">
        <section class="version-panel">
            <h2 class="section-title">Description</h2>
            <div
                class="version-editable version-inline-field viewer-description"
                id="versionDescription"
                data-version-field="description"
                tabindex="0"
            ></div>
        </section>

        <aside class="version-panel">
            <h2 class="section-title">Details</h2>

            <div class="meta-list">
                <div class="meta-row">
                    <span class="meta-label">Project</span>
                    <span class="meta-value" id="versionProject"></span>
                </div>

                <div class="meta-row">
                    <span class="meta-label">Created</span>
                    <span class="meta-value" id="versionCreated"></span>
                </div>

                <div class="meta-row">
                    <span class="meta-label">Due Date</span>
                    <span
                        class="meta-value version-editable version-inline-field"
                        id="versionDueDate"
                        data-version-field="due_date"
                        tabindex="0"
                    ></span>
                </div>

                <div class="meta-row">
                    <span class="meta-label">Released</span>
                    <span
                        class="meta-value version-editable version-inline-field"
                        id="versionReleasedDate"
                        data-version-field="released_date"
                        tabindex="0"
                    ></span>
                </div>
            </div>
        </aside>
    </div>

    <section class="version-panel version-task-section">
        <h2 class="section-title">Tasks</h2>
        <div class="version-task-table" id="versionTaskTable">
            <div class="version-task-row version-task-head">
                <button type="button" data-version-task-sort="id">
                    ID
                    <i class="fa-solid fa-sort"></i>
                </button>
                <button type="button" data-version-task-sort="title">
                    Name
                    <i class="fa-solid fa-sort"></i>
                </button>
                <button type="button" data-version-task-sort="type">
                    Type
                    <i class="fa-solid fa-sort"></i>
                </button>
                <button type="button" data-version-task-sort="priority">
                    Priority
                    <i class="fa-solid fa-sort"></i>
                </button>
                <button type="button" data-version-task-sort="assignee">
                    Assignee
                    <i class="fa-solid fa-sort"></i>
                </button>
                <button type="button" data-version-task-sort="status">
                    Status
                    <i class="fa-solid fa-sort"></i>
                </button>
            </div>

            <div id="versionTaskList"></div>
        </div>
        <div class="version-task-pagination" id="versionTaskPagination"></div>
        <div class="text-secondary" id="versionTaskEmpty" hidden>
            No tasks in this version.
        </div>
    </section>
</section>
