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

        <?php if (!empty($canEditProjects)): ?>
            <button class="btn btn-outline-secondary btn-sm" id="projectEditButton">
                <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">Project</h2>
            <div class="viewer-description">
                <div class="meta-list">
                    <div class="meta-row">
                        <span class="meta-label">Key</span>
                        <span class="meta-value" id="projectId"></span>
                    </div>

                    <div class="meta-row">
                        <span class="meta-label">Name</span>
                        <span
                            class="meta-value project-editable version-inline-field"
                            id="projectInlineName"
                            data-project-field="name"
                            tabindex="0"
                        ></span>
                    </div>
                </div>
            </div>
        </section>

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

            <div class="meta-list">
                <div class="meta-row">
                    <span class="meta-label">Owner</span>
                    <span
                        class="meta-value project-editable version-inline-field"
                        id="projectOwner"
                        data-project-field="owner"
                        tabindex="0"
                    ></span>
                </div>

                <div class="meta-row">
                    <span class="meta-label">Created</span>
                    <span class="meta-value" id="projectCreated"></span>
                </div>
            </div>
        </aside>
    </div>
</section>
