Projectkiln/ProjectKiln/app/popups.php

<div class="kiln-popup-backdrop" id="popupBackdrop" hidden></div>

<div class="kiln-popup" id="createProjectPopup" hidden>
    <div class="kiln-popup-card">
        <div class="kiln-popup-header">
            <h2 id="projectPopupTitle">Create Project</h2>
            <button class="kiln-popup-close" data-popup-close>
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form id="createProjectForm" data-mode="create">
            <div class="mb-3">
                <label class="form-label">Project ID</label>
                <input
                    type="text"
                    class="form-control"
                    name="id"
                    id="projectFormId"
                    placeholder="AUTH"
                    maxlength="12"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label">Project Name</label>
                <input
                    type="text"
                    class="form-control"
                    name="name"
                    id="projectFormName"
                    placeholder="Authentication System"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label">Owner</label>
                <select class="form-select" name="owner" id="projectFormOwner" required>
                    <option value="">Loading...</option>
                </select>
            </div>

            <button class="btn btn-primary w-100" type="submit" id="projectPopupSubmit">
                Create Project
            </button>
        </form>
    </div>
</div>

<div class="kiln-popup" id="createVersionPopup" hidden>
    <div class="kiln-popup-card">
        <div class="kiln-popup-header">
            <h2 id="versionPopupTitle">Create Version</h2>
            <button class="kiln-popup-close" data-popup-close>
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form id="createVersionForm" data-mode="create">
            <input type="hidden" name="version_id" id="versionFormVersionId">
            <input type="hidden" name="project_id" id="versionFormProjectId">

            <div class="mb-3">
                <label class="form-label">Version Name</label>
                <input
                    type="text"
                    class="form-control"
                    name="name"
                    id="versionFormName"
                    placeholder="1.0"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea
                    class="form-control"
                    name="description"
                    id="versionFormDescription"
                    rows="3"
                ></textarea>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Due Date</label>
                    <input
                        type="date"
                        class="form-control"
                        name="due_date"
                        id="versionFormDueDate"
                    >
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Released Date</label>
                    <input
                        type="date"
                        class="form-control"
                        name="released_date"
                        id="versionFormReleasedDate"
                    >
                </div>
            </div>

            <button class="btn btn-primary w-100" type="submit" id="versionPopupSubmit">
                Create Version
            </button>
        </form>
    </div>
</div>

<div class="kiln-popup" id="createTaskPopup" hidden>
    <div class="kiln-popup-card">
        <div class="kiln-popup-header">
            <h2 id="taskPopupTitle">Create Task</h2>
            <button class="kiln-popup-close" data-popup-close>
                <i class="fa-solid fa-xmark"></i>
            </button>
        </div>

        <form id="createTaskForm" data-mode="create">
            <input type="hidden" name="task_id" id="taskFormTaskId">

            <div class="mb-3">
                <label class="form-label">Project</label>
                <select
                    class="form-select"
                    name="project_id"
                    id="taskFormProjectId"
                    required
                >
                    <option value="">Select project</option>
                </select>
            </div>

            <div class="mb-3">
                <label class="form-label">Title</label>
                <input
                    type="text"
                    class="form-control"
                    name="title"
                    id="taskFormTitle"
                    placeholder="Build login system"
                    required
                >
            </div>

            <div class="mb-3">
                <label class="form-label">Description</label>
                <textarea
                    class="form-control"
                    name="description"
                    id="taskFormDescription"
                    rows="3"
                ></textarea>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Type</label>
                    <select class="form-select" name="type" id="createTaskType" required>
                        <option value="">Loading...</option>
                    </select>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Priority</label>
                    <select class="form-select" name="priority" id="createTaskPriority" required>
                        <option value="">Loading...</option>
                    </select>
                </div>
            </div>

            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">Fix Version</label>
                    <select class="form-select" name="fix_version" id="taskFormFixVersion">
                        <option value="">No fix version</option>
                    </select>
                </div>

                <div class="col-md-6 mb-3">
                    <label class="form-label">Assignee</label>
                    <select class="form-select" name="assignee" id="taskFormAssignee">
                        <option value="">Unassigned</option>
                    </select>
                </div>
            </div>

            <button class="btn btn-primary w-100" type="submit" id="taskPopupSubmit">
                Create Task
            </button>
        </form>
    </div>
</div>