<section class="admin-view" id="adminView" hidden>
    <div class="admin-header">
        <div>
            <div class="viewer-key">Administration</div>
            <h1>Admin</h1>
        </div>
    </div>

    <div class="admin-layout">
        <aside class="admin-nav" aria-label="Admin sections">
            <button class="admin-nav-item is-active" type="button" data-admin-section="workflows">
                <i class="fa-solid fa-diagram-project"></i>
                <span>Workflows</span>
            </button>
            <button class="admin-nav-item" type="button" data-admin-section="options">
                <i class="fa-solid fa-sliders"></i>
                <span>Task Options</span>
            </button>
            <button class="admin-nav-item" type="button" data-admin-section="users">
                <i class="fa-solid fa-users-gear"></i>
                <span>Users</span>
            </button>
        </aside>

        <section class="admin-panel" id="adminWorkflowsPanel">
            <div class="admin-panel-header">
                <div>
                    <h2>Edit Workflows</h2>
                    <p>Create task states, connect transitions, and assign states to task types.</p>
                </div>
            </div>

            <div class="workflow-editor">
                <section class="workflow-section">
                    <div class="workflow-section-header">
                        <h3>Global workflow definitions</h3>
                        <p>States and transitions are shared globally across task types.</p>
                    </div>

                    <div class="workflow-editor-grid">
                        <section class="workflow-card">
                            <h3>States</h3>

                            <form class="workflow-form" id="workflowStateForm">
                                <input class="form-control" name="name" placeholder="Open" required maxlength="128">
                                <input class="form-control form-control-color" type="color" name="color" value="#4ea1ff" aria-label="State color">
                                <button class="btn btn-primary btn-sm" type="submit">
                                    <i class="fa-solid fa-plus me-1"></i>
                                    Add State
                                </button>
                            </form>

                            <div class="workflow-list" id="workflowStateList"></div>
                        </section>

                        <section class="workflow-card">
                            <h3>Transitions</h3>

                            <form class="workflow-form workflow-form-stacked" id="workflowTransitionForm">
                                <select class="form-select" name="from_id" id="workflowTransitionFrom" required></select>
                                <select class="form-select" name="to_id" id="workflowTransitionTo" required></select>
                                <input class="form-control" name="action_name" placeholder="Close task" required maxlength="128">
                                <button class="btn btn-primary btn-sm" type="submit">
                                    <i class="fa-solid fa-plus me-1"></i>
                                    Add Transition
                                </button>
                            </form>

                            <div class="workflow-list" id="workflowTransitionList"></div>
                        </section>
                    </div>
                </section>

                <section class="workflow-section">
                    <div class="workflow-section-header">
                        <h3>Task type workflow</h3>
                        <p>Select a task type, assign its allowed states, choose the default state, and preview its graph.</p>
                    </div>

                    <section class="workflow-context-panel">
                        <div>
                            <label class="form-label" for="workflowTaskTypeSelect">Task Type</label>
                            <select class="form-select" id="workflowTaskTypeSelect"></select>
                        </div>

                        <div>
                            <label class="form-label" for="workflowDefaultStateSelect">Default State</label>
                            <select class="form-select" id="workflowDefaultStateSelect"></select>
                        </div>
                    </section>

                    <div class="workflow-editor-grid">
                        <section class="workflow-card">
                            <h3>Assigned States</h3>

                            <form class="workflow-form workflow-form-stacked" id="workflowAssignmentForm">
                                <select class="form-select" name="state" id="workflowAssignmentState" required></select>
                                <button class="btn btn-primary btn-sm" type="submit">
                                    <i class="fa-solid fa-link me-1"></i>
                                    Assign State
                                </button>
                            </form>

                            <div class="workflow-list" id="workflowAssignmentList"></div>
                        </section>

                        <section class="workflow-graph-panel">
                            <div class="workflow-graph-toolbar">
                                <strong>Workflow Graph</strong>
                                <button class="btn btn-sm btn-outline-secondary" type="button" id="workflowRefreshButton">
                                    <i class="fa-solid fa-rotate me-1"></i>
                                    Refresh
                                </button>
                            </div>

                            <div class="workflow-graph" id="workflowGraph"></div>
                            <div class="workflow-empty" id="workflowGraphEmpty" hidden>
                                Assign states to render the workflow graph.
                            </div>
                        </section>
                    </div>
                </section>
            </div>
        </section>

        <section class="admin-panel" id="adminOptionsPanel" hidden>
            <div class="admin-panel-header">
                <div>
                    <h2>Task Options</h2>
                    <p>Create and maintain the task types and priorities used across tasks.</p>
                </div>
            </div>

            <div class="admin-options-grid">
                <section class="workflow-card admin-option-card">
                    <h3>Task Types</h3>

                    <form class="admin-option-form" data-admin-option-form="type">
                        <input class="form-control" name="name" placeholder="Bug" required maxlength="20">
                        <input class="form-control" type="file" name="logo" accept=".svg,image/svg+xml" aria-label="Task type logo">
                        <button class="btn btn-primary btn-sm" type="submit">
                            <i class="fa-solid fa-plus me-1"></i>
                            Add Type
                        </button>
                    </form>

                    <div class="admin-type-editor">
                        <div>
                            <label class="form-label" for="adminTaskTypeSelect">Selected Type</label>
                            <select class="form-select" id="adminTaskTypeSelect"></select>
                        </div>

                        <div id="adminSelectedTypeEditor"></div>

                        <div class="admin-subsection">
                            <h4>Custom Fields</h4>

                            <form class="admin-custom-field-form" id="adminCustomFieldForm">
                                <input class="form-control" name="name" placeholder="Story points" required maxlength="128">
                                <select class="form-select" name="type" required>
                                    <option value="string">String</option>
                                    <option value="int">Int</option>
                                    <option value="float">Float</option>
                                    <option value="date">Date</option>
                                    <option value="boolean">Boolean</option>
                                    <option value="text">Text</option>
                                    <option value="json">JSON</option>
                                </select>
                                <input class="form-control" name="value" placeholder="Default value">
                                <button class="btn btn-primary btn-sm" type="submit">
                                    <i class="fa-solid fa-plus me-1"></i>
                                    Add Field
                                </button>
                            </form>

                            <div class="admin-custom-field-list" id="adminCustomFieldList"></div>
                        </div>
                    </div>
                </section>

                <section class="workflow-card admin-option-card">
                    <h3>Task Priorities</h3>

                    <form class="admin-option-form" data-admin-option-form="priority">
                        <input class="form-control" name="name" placeholder="High" required maxlength="128">
                        <input class="form-control" type="file" name="logo" accept=".svg,image/svg+xml" aria-label="Task priority logo">
                        <button class="btn btn-primary btn-sm" type="submit">
                            <i class="fa-solid fa-plus me-1"></i>
                            Add Priority
                        </button>
                    </form>

                    <div class="admin-option-list" id="adminPriorityList"></div>
                </section>

            </div>
        </section>

        <section class="admin-panel" id="adminUsersPanel" hidden>
            <div class="admin-panel-header">
                <div>
                    <h2>Users</h2>
                    <p>Assign and remove global rights for users.</p>
                </div>
            </div>

            <section class="workflow-card admin-option-card">
                <h3>User Rights</h3>

                <div class="admin-user-editor">
                    <div>
                        <label class="form-label" for="adminUserSelect">Selected User</label>
                        <select class="form-select" id="adminUserSelect"></select>
                    </div>

                    <div class="admin-user-rights" id="adminUserRightsList"></div>
                </div>
            </section>
        </section>
    </div>
</section>
