Ultimate showcase: Organization (5 levels deep) + Kitchen Sink (ALL inputs) + Contacts + Scheduling + Media + Settings Async
<style data-schemaforms-layout-support>
.pydantic-form,
.md-form {
width: 100%;
max-width: none;
}
.pydantic-form > div,
.pydantic-form > fieldset,
.pydantic-form > [class*="row"],
.md-form > div,
.md-form > fieldset,
.md-form > [class*="row"] {
width: 100% !important;
max-width: none !important;
}
.pydantic-form [class*="col-"],
.md-form [class*="col-"] {
min-width: 0;
flex: 1 1 auto !important;
}
.pydantic-form [class*="section"],
.pydantic-form [data-schemaforms-section],
.pydantic-form fieldset,
.md-form [class*="section"],
.md-form [data-schemaforms-section],
.md-form fieldset {
width: 100% !important;
max-width: none !important;
box-sizing: border-box;
}
</style>
<!-- Material Design 3 Self-Contained Form -->
<style>
/* Material Design 3 Self-Contained Styles - Using !important to override any conflicting styles */
.md-form-container {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
max-width: 100% !important;
margin: 0 !important;
padding: 20px !important;
line-height: 1.5 !important;
color: #1c1b1f !important;
background: #fef7ff !important;
border: none !important;
box-sizing: border-box !important;
position: relative !important;
}
.md-form {
width: 100% !important;
background: #ffffff !important;
border-radius: 28px !important;
padding: 32px !important;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15) !important;
border: none !important;
margin: 0 !important;
box-sizing: border-box !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Reset any Bootstrap interference */
.md-form * {
box-sizing: border-box !important;
}
/* Material Design Form Fields */
.md-field {
margin-bottom: 32px !important;
position: relative !important;
width: 100% !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Model list container styling to blend with Material Design */
.md-model-list-container {
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Override Bootstrap styles for model list items within Material Design */
.md-model-list-container .card {
border: 1px solid #79747e !important;
border-radius: 12px !important;
box-shadow: none !important;
margin-bottom: 16px !important;
background: #ffffff !important;
}
.md-model-list-container .card-header {
background: #f7f2fa !important;
border-bottom: 1px solid #e7e0ec !important;
border-radius: 12px 12px 0 0 !important;
color: #1c1b1f !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 500 !important;
}
.md-model-list-container .btn {
border-radius: 20px !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 500 !important;
text-transform: none !important;
}
.md-model-list-container .btn-primary {
background: #6750a4 !important;
border-color: #6750a4 !important;
}
.md-model-list-container .btn-danger {
background: #ba1a1a !important;
border-color: #ba1a1a !important;
}
.md-model-list-wrapper {
background: transparent !important;
margin-bottom: 32px !important;
}
.md-model-list-container {
border: 1px solid #e7e0ec !important;
border-radius: 24px !important;
padding: 16px 20px !important;
background: #fff !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.md-model-list-items {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.md-model-card {
border: 1px solid #e7e0ec !important;
border-radius: 20px !important;
background: #ffffff !important;
padding: 16px 20px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.08) !important;
}
.md-model-card__header {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
margin-bottom: 12px !important;
}
.md-model-card__body {
padding: 0 !important;
}
.md-model-list-actions {
margin-top: 12px !important;
display: flex !important;
justify-content: flex-end !important;
}
.md-button-tonal {
background: #e8def8 !important;
color: #1c1b1f !important;
}
.md-button-tonal:hover {
background: #cdc2db !important;
}
.md-button__icon {
margin-right: 8px !important;
width: 20px !important;
height: 20px !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 20px !important;
fill: currentColor !important;
}
.md-button__label {
font-weight: 500 !important;
}
/* Layout card styling */
.md-layout-card {
background: #ffffff !important;
border-radius: 24px !important;
padding: 24px 28px !important;
margin-bottom: 32px !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2), 0 4px 8px rgba(0,0,0,0.1) !important;
border: 1px solid #e7e0ec !important;
}
.md-layout-card__header {
margin-bottom: 12px !important;
}
.md-layout-card__title {
font-size: 18px !important;
font-weight: 600 !important;
color: #1c1b1f !important;
}
.md-layout-card__help {
color: #49454f !important;
font-size: 14px !important;
margin-bottom: 12px !important;
}
.md-layout-card__content {
display: flex !important;
flex-direction: column !important;
gap: 16px !important;
}
.md-field-label {
display: block !important;
color: #49454f !important;
font-size: 14px !important;
font-weight: 500 !important;
margin-bottom: 8px !important;
position: relative !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
line-height: 1.4 !important;
}
.md-field-label.required::after {
content: ' *' !important;
color: #ba1a1a !important;
}
/* Material Design Outlined Text Fields */
.md-text-field {
position: relative;
width: 100%;
}
/* Field container */
.md-field {
margin: 16px 0;
}
/* Field with icon layout */
.md-field-with-icon {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
/* Input wrapper for proper label positioning */
.md-input-wrapper {
position: relative !important;
flex: 1 !important;
width: 100% !important;
}
.md-input {
width: 100% !important;
padding: 16px !important;
border: 1px solid #79747e !important;
border-radius: 4px !important;
background: transparent !important;
color: #1c1b1f !important;
font-size: 16px !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
outline: none !important;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
box-sizing: border-box !important;
line-height: 1.5 !important;
margin: 0 !important;
}
.md-input:focus {
border-color: #6750a4 !important;
border-width: 2px !important;
padding: 15px !important; /* Adjust for thicker border */
box-shadow: none !important;
}
/* Icon styling - positioned outside to the left of input */
.md-icon {
display: flex !important;
align-items: center !important;
justify-content: center !important;
width: 24px !important;
height: 24px !important;
margin-top: 16px !important; /* Align with input padding */
color: #49454f !important;
flex-shrink: 0 !important;
transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
fill: currentColor !important;
}
.md-field-with-icon:focus-within .md-icon {
color: #6750a4 !important;
}
.md-input:focus + .md-floating-label,
.md-input:not(:placeholder-shown) + .md-floating-label,
.md-textarea:focus + .md-floating-label,
.md-textarea:not(:placeholder-shown) + .md-floating-label,
.md-select:focus + .md-floating-label {
transform: translateY(-28px) scale(0.75) !important;
color: #6750a4 !important;
background: #ffffff !important;
padding: 0 4px !important;
}
.md-floating-label {
position: absolute !important;
left: 16px !important;
top: 16px !important;
color: #49454f !important;
font-size: 16px !important;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1) !important;
pointer-events: none !important;
background: transparent !important;
z-index: 1 !important;
transform-origin: left top !important;
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
font-weight: 400 !important;
line-height: 1.4 !important;
}
.md-input:focus + .md-floating-label,
.md-input:not(:placeholder-shown) + .md-floating-label {
transform: translateY(-28px) scale(0.75) !important;
color: #6750a4;
background: #ffffff;
padding: 0 4px;
}
.md-input.error {
border-color: #ba1a1a;
}
.md-input.error:focus {
border-color: #ba1a1a;
}
.md-input.error + .md-floating-label {
color: #ba1a1a;
}
/* Material Design Select */
.md-select {
width: 100%;
padding: 16px;
border: 1px solid #79747e;
border-radius: 4px;
background: transparent;
color: #1c1b1f;
font-size: 16px;
font-family: inherit;
outline: none;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2349454f' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
background-position: right 12px center;
background-repeat: no-repeat;
background-size: 16px;
padding-right: 40px;
}
.md-select:focus {
border-color: #6750a4;
border-width: 2px;
padding: 15px 39px 15px 15px; /* Adjust for thicker border */
}
.md-select:focus + .md-floating-label {
transform: translateY(-28px) scale(0.75);
color: #6750a4;
background: #ffffff;
padding: 0 4px;
}
/* Material Design Textarea */
.md-textarea {
width: 100%;
min-height: 120px;
padding: 16px;
border: 1px solid #79747e;
border-radius: 4px;
background: transparent;
color: #1c1b1f;
font-size: 16px;
font-family: inherit;
outline: none;
resize: vertical;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
box-sizing: border-box;
}
.md-textarea:focus {
border-color: #6750a4;
border-width: 2px;
padding: 15px; /* Adjust for thicker border */
}
.md-textarea:focus + .md-floating-label,
.md-textarea:not(:placeholder-shown) + .md-floating-label {
transform: translateY(-28px) scale(0.75);
color: #6750a4;
background: #ffffff;
padding: 0 4px;
}
/* Material Design Checkboxes */
.md-checkbox-container {
display: flex;
align-items: flex-start;
gap: 16px;
margin: 16px 0;
cursor: pointer;
}
.md-checkbox {
width: 18px;
height: 18px;
border: 2px solid #79747e;
border-radius: 2px;
background: transparent;
cursor: pointer;
position: relative;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
margin-top: 2px; /* Align with text baseline */
flex-shrink: 0;
}
.md-checkbox:checked {
background: #6750a4;
border-color: #6750a4;
}
.md-checkbox:checked::after {
content: '';
position: absolute;
top: 1px;
left: 4px;
width: 6px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.md-checkbox-label {
color: #1c1b1f;
font-size: 16px;
cursor: pointer;
line-height: 1.5;
}
/* Material Design Buttons */
.md-button {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 10px 24px;
border: none;
border-radius: 20px;
font-size: 14px;
font-weight: 500;
font-family: inherit;
cursor: pointer;
transition: all 0.15s cubic-bezier(0.4, 0, 0.2, 1);
text-decoration: none;
box-sizing: border-box;
min-width: 64px;
height: 40px;
position: relative;
overflow: hidden;
}
.md-button-filled {
background: #6750a4;
color: #ffffff;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}
.md-button-filled:hover {
background: #5a43a0;
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 2px 6px 2px rgba(0,0,0,0.15);
transform: translateY(-1px);
}
.md-button-filled:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(0,0,0,0.3), 0 1px 3px 1px rgba(0,0,0,0.15);
}
/* Help Text */
.md-help-text {
font-size: 12px;
color: #49454f;
margin-top: 4px;
line-height: 1.33;
padding-left: 16px;
}
/* Compatibility: model-list/material mixed markup may emit `.help-text` */
.md-form .help-text {
display: block;
font-size: 12px;
color: #49454f;
margin-top: 4px;
line-height: 1.33;
}
/* Error Text */
.md-error-text {
font-size: 12px;
color: #ba1a1a;
margin-top: 4px;
line-height: 1.33;
font-weight: 400;
padding-left: 16px;
}
.md-error-summary {
border: 1px solid #f2b8b5;
background: #ffdad6;
color: #410e0b;
border-radius: 12px;
padding: 12px 14px;
}
.md-error-summary__title {
font-weight: 600;
margin-bottom: 6px;
}
.md-error-summary__list {
margin: 0;
padding-left: 1.25rem;
}
.md-error-summary__list li {
margin-bottom: 2px;
}
/* Number and Date Inputs */
.md-input[type="number"],
.md-input[type="date"],
.md-input[type="email"],
.md-input[type="password"],
.md-input[type="tel"],
.md-input[type="url"] {
/* Inherit all md-input styles */
}
.md-input[type="color"] {
height: 56px;
padding: 8px;
cursor: pointer;
}
.md-input[type="range"] {
padding: 16px 8px;
}
/* Compatibility: select controls rendered with Materialize-style class name */
.md-form select.browser-default {
width: 100%;
min-height: 40px;
padding: 8px 10px;
border: 1px solid #cac4d0;
border-radius: 6px;
background: #ffffff;
box-sizing: border-box;
}
.md-form .md-input-wrapper {
width: 100%;
}
/* Placeholder styling */
.md-input::placeholder {
color: transparent;
}
.md-input:focus::placeholder {
color: #49454f;
}
/* State layers for interactive elements */
.md-button-filled::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: currentColor;
opacity: 0;
transition: opacity 0.15s cubic-bezier(0.4, 0, 0.2, 1);
border-radius: inherit;
}
.md-button-filled:hover::before {
opacity: 0.08;
}
.md-button-filled:focus::before {
opacity: 0.12;
}
.md-button-filled:active::before {
opacity: 0.16;
}
/* Responsive Design */
@media (max-width: 768px) {
.md-form {
padding: 24px 16px;
border-radius: 28px;
}
.md-field {
margin-bottom: 24px;
}
}
/* Typography Scale */
.md-headline-small {
font-size: 24px;
font-weight: 400;
line-height: 32px;
color: #1c1b1f;
}
.md-body-large {
font-size: 16px;
font-weight: 400;
line-height: 24px;
color: #1c1b1f;
}
.md-body-medium {
font-size: 14px;
font-weight: 400;
line-height: 20px;
color: #49454f;
}
.md-label-large {
font-size: 14px;
font-weight: 500;
line-height: 20px;
color: #1c1b1f;
}
/* Surface colors and elevation */
.md-surface {
background: #fef7ff;
color: #1c1b1f;
}
.md-surface-container {
background: #f3f0ff;
color: #1c1b1f;
}
.md-surface-container-high {
background: #e7e0ec;
color: #1c1b1f;
}
</style>
<div class="md-form-container">
<form id=""
class="pydantic-form md-form col s12"
style=""
method="POST"
action="/organization?style=material"
>
<section class="md-layout-card">
<header class="md-layout-card__header">
<span class="md-layout-card__title">Complete Feature Showcase</span>
</header>
<div class="md-layout-card__body">
<p class="md-layout-card__help">Explore all 6 tabs to see every feature of Pydantic SchemaForms</p>
<div class="md-layout-card__content">
<div class="tab-layout tabbed-layout" style="">
<div class="tab-navigation" role="tablist">
<button class="tab-button active"
type="button"
role="tab"
aria-selected="true"
aria-controls="tab-0"
onclick="switchTab('tab-0', this)">
Contacts
</button>
<button class="tab-button"
type="button"
role="tab"
aria-selected="false"
aria-controls="tab-1"
onclick="switchTab('tab-1', this)">
Kitchen Sink
</button>
<button class="tab-button"
type="button"
role="tab"
aria-selected="false"
aria-controls="tab-2"
onclick="switchTab('tab-2', this)">
Media
</button>
<button class="tab-button"
type="button"
role="tab"
aria-selected="false"
aria-controls="tab-3"
onclick="switchTab('tab-3', this)">
Organization
</button>
<button class="tab-button"
type="button"
role="tab"
aria-selected="false"
aria-controls="tab-4"
onclick="switchTab('tab-4', this)">
Scheduling
</button>
<button class="tab-button"
type="button"
role="tab"
aria-selected="false"
aria-controls="tab-5"
onclick="switchTab('tab-5', this)">
Settings
</button>
</div>
<div class="tab-content">
<div id="tab-0"
class="tab-panel active"
role="tabpanel"
style="display: block;"
aria-hidden="false">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<svg class="material-icons md-icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /></svg>
<div class="md-input-wrapper">
<input type="text"
name="first_name"
id="first_name"
class="md-input"
value="John"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="first_name">First Name *</label>
</div>
</div>
<div class="md-help-text">Contact's first name</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<svg class="material-icons md-icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /></svg>
<div class="md-input-wrapper">
<input type="text"
name="last_name"
id="last_name"
class="md-input"
value="Smith"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="last_name">Last Name *</label>
</div>
</div>
<div class="md-help-text">Contact's last name</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<svg class="material-icons md-icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M20 4H4c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z" /></svg>
<div class="md-input-wrapper">
<input type="email"
name="email"
id="email"
class="md-input"
value="john.smith@example.com"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="email">Primary Email *</label>
</div>
</div>
<div class="md-help-text">Primary email address</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">building</span>
<div class="md-input-wrapper">
<input type="text"
name="company"
id="company"
class="md-input"
value="Acme Corporation"
placeholder=" " >
<label class="md-floating-label" for="company">Company</label>
</div>
</div>
<div class="md-help-text">Company or organization</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">briefcase</span>
<div class="md-input-wrapper">
<input type="text"
name="job_title"
id="job_title"
class="md-input"
value="Senior Software Engineer"
placeholder=" " >
<label class="md-floating-label" for="job_title">Job Title</label>
</div>
</div>
<div class="md-help-text">Position or role</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">cake</span>
<div class="md-input-wrapper">
<input type="date"
name="birth_date"
id="birth_date"
class="md-input"
value="1985-04-12"
placeholder=" " >
<label class="md-floating-label" for="birth_date">Date of Birth</label>
</div>
</div>
<div class="md-help-text">Birth date (optional)</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Phone Numbers</label>
<div class="model-list-container md-model-list-container" data-field-name="phone_numbers" data-min-items="0" data-max-items="10">
<div class="model-list-items md-model-list-items" id="phone_numbers-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {phone_type}: {number}"
data-field-name="phone_numbers">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#phone_numbers_item_0_content"
aria-expanded="true"
aria-controls="phone_numbers_item_0_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="phone_numbers"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="phone_numbers_item_0_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="phone_numbers[0].phone_type" id="phone_numbers[0].phone_type" class="browser-default"><option value="mobile">π± Mobile</option>
<option value="work">πΌ Work</option>
<option value="home">π Home</option>
<option value="fax">π Fax</option></select>
<label class="md-floating-label" for="phone_numbers[0].phone_type">Type</label>
<div class="md-help-text">Type of phone number</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[0].number"><i class="material-icons">phone</i> Phone Number</label>
<input name="phone_numbers[0].number" id="phone_numbers[0].number" class="validate" maxlength="20" placeholder="+1 (555) 123-4567" inputmode="tel" autocomplete="tel" type="tel" />
<div class="help-text">Contact phone number</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[0].is_primary">Primary Number</label>
<input name="phone_numbers[0].is_primary" id="phone_numbers[0].is_primary" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Is this the primary contact number?</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {phone_type}: {number}"
data-field-name="phone_numbers">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#phone_numbers_item_0_content"
aria-expanded="true"
aria-controls="phone_numbers_item_0_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
π mobile: +1 (555) 123-4567
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="phone_numbers"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="phone_numbers_item_0_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="phone_numbers[0].phone_type" id="phone_numbers[0].phone_type" class="browser-default"><option value="mobile" selected>π± Mobile</option>
<option value="work">πΌ Work</option>
<option value="home">π Home</option>
<option value="fax">π Fax</option></select>
<label class="md-floating-label" for="phone_numbers[0].phone_type">Type</label>
<div class="md-help-text">Type of phone number</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[0].number"><i class="material-icons">phone</i> Phone Number</label>
<input name="phone_numbers[0].number" id="phone_numbers[0].number" class="validate" value="+1 (555) 123-4567" maxlength="20" placeholder="+1 (555) 123-4567" inputmode="tel" autocomplete="tel" type="tel" />
<div class="help-text">Contact phone number</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[0].is_primary">Primary Number</label>
<input name="phone_numbers[0].is_primary" id="phone_numbers[0].is_primary" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Is this the primary contact number?</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="π {phone_type}: {number}"
data-field-name="phone_numbers">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#phone_numbers_item_1_content"
aria-expanded="true"
aria-controls="phone_numbers_item_1_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
π work: +1 (555) 987-6543
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="phone_numbers"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="phone_numbers_item_1_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="phone_numbers[1].phone_type" id="phone_numbers[1].phone_type" class="browser-default"><option value="mobile">π± Mobile</option>
<option value="work" selected>πΌ Work</option>
<option value="home">π Home</option>
<option value="fax">π Fax</option></select>
<label class="md-floating-label" for="phone_numbers[1].phone_type">Type</label>
<div class="md-help-text">Type of phone number</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[1].number"><i class="material-icons">phone</i> Phone Number</label>
<input name="phone_numbers[1].number" id="phone_numbers[1].number" class="validate" value="+1 (555) 987-6543" maxlength="20" placeholder="+1 (555) 123-4567" inputmode="tel" autocomplete="tel" type="tel" />
<div class="help-text">Contact phone number</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="phone_numbers[1].is_primary">Primary Number</label>
<input name="phone_numbers[1].is_primary" id="phone_numbers[1].is_primary" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Is this the primary contact number?</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="phone_numbers">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add multiple phone numbers</p>
</section>
</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Addresses</label>
<div class="model-list-container md-model-list-container" data-field-name="addresses" data-min-items="0" data-max-items="5">
<div class="model-list-items md-model-list-items" id="addresses-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {address_type}: {city}, {state}"
data-field-name="addresses">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#addresses_item_0_content"
aria-expanded="false"
aria-controls="addresses_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="addresses"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="addresses_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="addresses[0].address_type" id="addresses[0].address_type" class="browser-default"><option value="home">π Home</option>
<option value="work">πΌ Work</option>
<option value="billing">π³ Billing</option>
<option value="shipping">π¦ Shipping</option></select>
<label class="md-floating-label" for="addresses[0].address_type">Address Type</label>
<div class="md-help-text">Type of address</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].street_line1"><i class="material-icons">home</i> Street Address Line 1</label>
<input name="addresses[0].street_line1" id="addresses[0].street_line1" class="validate" maxlength="200" placeholder="123 Main Street" type="text" />
<div class="help-text">Primary street address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].street_line2">Street Address Line 2</label>
<input name="addresses[0].street_line2" id="addresses[0].street_line2" class="validate" placeholder="Apt 4B" type="text" />
<div class="help-text">Apartment, suite, unit, etc.</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].city"><i class="material-icons">building</i> City</label>
<input name="addresses[0].city" id="addresses[0].city" class="validate" maxlength="100" placeholder="San Francisco" type="text" />
<div class="help-text">City name</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].state">State/Province</label>
<input name="addresses[0].state" id="addresses[0].state" class="validate" maxlength="50" placeholder="CA" type="text" />
<div class="help-text">State or province</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].postal_code"><i class="material-icons">mail</i> Postal Code</label>
<input name="addresses[0].postal_code" id="addresses[0].postal_code" class="validate" maxlength="20" placeholder="94105" type="text" />
<div class="help-text">ZIP or postal code</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">public</span>
<div class="md-input-wrapper">
<select name="addresses[0].country" id="addresses[0].country" class="browser-default"><option value="US">πΊπΈ United States</option>
<option value="CA">π¨π¦ Canada</option>
<option value="UK">π¬π§ United Kingdom</option>
<option value="AU">π¦πΊ Australia</option>
<option value="DE">π©πͺ Germany</option>
<option value="FR">π«π· France</option>
<option value="JP">π―π΅ Japan</option></select>
<label class="md-floating-label" for="addresses[0].country">Country</label>
</div>
</div>
<div class="md-help-text">Country</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {address_type}: {city}, {state}"
data-field-name="addresses">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#addresses_item_0_content"
aria-expanded="false"
aria-controls="addresses_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π home: San Francisco, CA
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="addresses"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="addresses_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="addresses[0].address_type" id="addresses[0].address_type" class="browser-default"><option value="home" selected>π Home</option>
<option value="work">πΌ Work</option>
<option value="billing">π³ Billing</option>
<option value="shipping">π¦ Shipping</option></select>
<label class="md-floating-label" for="addresses[0].address_type">Address Type</label>
<div class="md-help-text">Type of address</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].street_line1"><i class="material-icons">home</i> Street Address Line 1</label>
<input name="addresses[0].street_line1" id="addresses[0].street_line1" class="validate" value="123 Main Street" maxlength="200" placeholder="123 Main Street" type="text" />
<div class="help-text">Primary street address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].street_line2">Street Address Line 2</label>
<input name="addresses[0].street_line2" id="addresses[0].street_line2" class="validate" value="Apt 4B" placeholder="Apt 4B" type="text" />
<div class="help-text">Apartment, suite, unit, etc.</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].city"><i class="material-icons">building</i> City</label>
<input name="addresses[0].city" id="addresses[0].city" class="validate" value="San Francisco" maxlength="100" placeholder="San Francisco" type="text" />
<div class="help-text">City name</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].state">State/Province</label>
<input name="addresses[0].state" id="addresses[0].state" class="validate" value="CA" maxlength="50" placeholder="CA" type="text" />
<div class="help-text">State or province</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[0].postal_code"><i class="material-icons">mail</i> Postal Code</label>
<input name="addresses[0].postal_code" id="addresses[0].postal_code" class="validate" value="94105" maxlength="20" placeholder="94105" type="text" />
<div class="help-text">ZIP or postal code</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">public</span>
<div class="md-input-wrapper">
<select name="addresses[0].country" id="addresses[0].country" class="browser-default"><option value="US" selected>πΊπΈ United States</option>
<option value="CA">π¨π¦ Canada</option>
<option value="UK">π¬π§ United Kingdom</option>
<option value="AU">π¦πΊ Australia</option>
<option value="DE">π©πͺ Germany</option>
<option value="FR">π«π· France</option>
<option value="JP">π―π΅ Japan</option></select>
<label class="md-floating-label" for="addresses[0].country">Country</label>
</div>
</div>
<div class="md-help-text">Country</div>
</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="π {address_type}: {city}, {state}"
data-field-name="addresses">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#addresses_item_1_content"
aria-expanded="false"
aria-controls="addresses_item_1_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π work: Palo Alto, CA
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="addresses"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="addresses_item_1_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="addresses[1].address_type" id="addresses[1].address_type" class="browser-default"><option value="home">π Home</option>
<option value="work" selected>πΌ Work</option>
<option value="billing">π³ Billing</option>
<option value="shipping">π¦ Shipping</option></select>
<label class="md-floating-label" for="addresses[1].address_type">Address Type</label>
<div class="md-help-text">Type of address</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[1].street_line1"><i class="material-icons">home</i> Street Address Line 1</label>
<input name="addresses[1].street_line1" id="addresses[1].street_line1" class="validate" value="456 Corporate Blvd" maxlength="200" placeholder="123 Main Street" type="text" />
<div class="help-text">Primary street address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[1].street_line2">Street Address Line 2</label>
<input name="addresses[1].street_line2" id="addresses[1].street_line2" class="validate" value="Suite 200" placeholder="Apt 4B" type="text" />
<div class="help-text">Apartment, suite, unit, etc.</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[1].city"><i class="material-icons">building</i> City</label>
<input name="addresses[1].city" id="addresses[1].city" class="validate" value="Palo Alto" maxlength="100" placeholder="San Francisco" type="text" />
<div class="help-text">City name</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[1].state">State/Province</label>
<input name="addresses[1].state" id="addresses[1].state" class="validate" value="CA" maxlength="50" placeholder="CA" type="text" />
<div class="help-text">State or province</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="addresses[1].postal_code"><i class="material-icons">mail</i> Postal Code</label>
<input name="addresses[1].postal_code" id="addresses[1].postal_code" class="validate" value="94301" maxlength="20" placeholder="94105" type="text" />
<div class="help-text">ZIP or postal code</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">public</span>
<div class="md-input-wrapper">
<select name="addresses[1].country" id="addresses[1].country" class="browser-default"><option value="US" selected>πΊπΈ United States</option>
<option value="CA">π¨π¦ Canada</option>
<option value="UK">π¬π§ United Kingdom</option>
<option value="AU">π¦πΊ Australia</option>
<option value="DE">π©πͺ Germany</option>
<option value="FR">π«π· France</option>
<option value="JP">π―π΅ Japan</option></select>
<label class="md-floating-label" for="addresses[1].country">Country</label>
</div>
</div>
<div class="md-help-text">Country</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="addresses">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add multiple addresses</p>
</section>
</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">sticky</span>
<div class="md-input-wrapper">
<textarea name="notes"
id="notes"
class="md-textarea"
placeholder=" " >Prefers email communication. Available Monday-Friday 9am-5pm PST.</textarea>
<label class="md-floating-label" for="notes">Notes</label>
</div>
</div>
<div class="md-help-text">Any additional information</div>
</div>
</div>
</div>
<div id="tab-1"
class="tab-panel"
role="tabpanel"
style="display: none;"
aria-hidden="true">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">fonts</span>
<div class="md-input-wrapper">
<input type="text"
name="text_input"
id="text_input"
class="md-input"
value="Sample text value"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="text_input">Text Input *</label>
</div>
</div>
<div class="md-help-text">Standard text input field</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">envelope-at</span>
<div class="md-input-wrapper">
<input type="email"
name="email_input"
id="email_input"
class="md-input"
value="user@example.com"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="email_input">Email Input *</label>
</div>
</div>
<div class="md-help-text">Email address with validation</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">key</span>
<div class="md-input-wrapper">
<input type="password"
name="password_input"
id="password_input"
class="md-input"
value="SecurePass123!"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="password_input">Password Input *</label>
</div>
</div>
<div class="md-help-text">Password field (masked input)</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">search</span>
<div class="md-input-wrapper">
<input type="search"
name="search_input"
id="search_input"
class="md-input"
value="search query"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="search_input">Search Input *</label>
</div>
</div>
<div class="md-help-text">Search field with special styling</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">link</span>
<div class="md-input-wrapper">
<input type="url"
name="url_input"
id="url_input"
class="md-input"
value="https://example.com"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="url_input">URL Input *</label>
</div>
</div>
<div class="md-help-text">URL field with validation</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">phone</span>
<div class="md-input-wrapper">
<input type="tel"
name="tel_input"
id="tel_input"
class="md-input"
value="+1-555-987-6543"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="tel_input">Telephone Input *</label>
</div>
</div>
<div class="md-help-text">Telephone number input</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">textarea-t</span>
<div class="md-input-wrapper">
<textarea name="textarea_input"
id="textarea_input"
class="md-textarea"
placeholder=" " required="required" aria-required="true">This is a multi-line
text area
with sample content.</textarea>
<label class="md-floating-label" for="textarea_input">Text Area *</label>
</div>
</div>
<div class="md-help-text">Multi-line text input</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">numbers</span>
<div class="md-input-wrapper">
<input type="number"
name="number_input"
id="number_input"
class="md-input"
value="42"
placeholder=" " >
<label class="md-floating-label" for="number_input">Number Input (Integer)</label>
</div>
</div>
<div class="md-help-text">Integer number input</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">calculate</span>
<div class="md-input-wrapper">
<input type="number"
name="decimal_input"
id="decimal_input"
class="md-input"
value="3.14159"
placeholder=" " >
<label class="md-floating-label" for="decimal_input">Decimal Input (Float)</label>
</div>
</div>
<div class="md-help-text">Floating-point number input</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">tune</span>
<div class="md-input-wrapper">
<input type="range"
name="range_input"
id="range_input"
class="md-input"
value="75"
placeholder=" " >
<label class="md-floating-label" for="range_input">Range Slider</label>
</div>
</div>
<div class="md-help-text">Slider for selecting a value</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">ui-checks</span>
<div class="md-input-wrapper">
<select name="select_input"
id="select_input"
class="md-select" >
<option value=""></option>
<option value="option1">Option 1</option>
<option value="option2">Option 2</option>
<option value="option3" selected="selected">Option 3</option>
<option value="option4">Option 4</option>
</select>
<label class="md-floating-label" for="select_input">Select Dropdown</label>
</div>
</div>
<div class="md-help-text">Single select dropdown</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">radio_button_checked</span>
<div class="md-input-wrapper">
<input type="radio"
name="radio_input"
id="radio_input"
class="md-input"
value="large"
placeholder=" " >
<label class="md-floating-label" for="radio_input">Radio Buttons</label>
</div>
</div>
<div class="md-help-text">Radio button group</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">checklist</span>
<div class="md-input-wrapper">
<select name="multiselect_input"
id="multiselect_input"
class="md-select" >
<option value=""></option>
<option value="python">π Python</option>
<option value="javascript">π JavaScript</option>
<option value="typescript">π TypeScript</option>
<option value="java">β Java</option>
<option value="go">πΉ Go</option>
<option value="rust">π¦ Rust</option>
</select>
<label class="md-floating-label" for="multiselect_input">Multiple Selection</label>
</div>
</div>
<div class="md-help-text">Select multiple options</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="checkbox_input"
id="checkbox_input"
class="md-checkbox"
value="true"
checked="checked" >
<label for="checkbox_input" class="md-checkbox-label">Checkbox Input</label>
</div>
<div class="md-help-text">Boolean checkbox</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="toggle_input"
id="toggle_input"
class="md-checkbox"
value="true"
>
<label for="toggle_input" class="md-checkbox-label">Toggle Switch</label>
</div>
<div class="md-help-text">Boolean toggle switch</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">event</span>
<div class="md-input-wrapper">
<input type="date"
name="date_input"
id="date_input"
class="md-input"
value="2024-06-15"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="date_input">Date Input *</label>
</div>
</div>
<div class="md-help-text">Date picker</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">schedule</span>
<div class="md-input-wrapper">
<input type="time"
name="time_input"
id="time_input"
class="md-input"
value="14:30"
placeholder=" " >
<label class="md-floating-label" for="time_input">Time Input</label>
</div>
</div>
<div class="md-help-text">Time picker</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">event</span>
<div class="md-input-wrapper">
<input type="datetime-local"
name="datetime_input"
id="datetime_input"
class="md-input"
value="2024-06-15T14:30:00"
placeholder=" " >
<label class="md-floating-label" for="datetime_input">DateTime Input</label>
</div>
</div>
<div class="md-help-text">Date and time picker</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">palette</span>
<div class="md-input-wrapper">
<input type="color"
name="color_input"
id="color_input"
class="md-input"
value="#e74c3c"
placeholder=" " >
<label class="md-floating-label" for="color_input">Color Picker</label>
</div>
</div>
<div class="md-help-text">Color selection input</div>
</div>
<div class="md-field">
<div class="md-input-wrapper">
<input type="hidden"
name="hidden_input"
id="hidden_input"
class="md-input"
value="hidden_secret_value"
placeholder=" " >
<label class="md-floating-label" for="hidden_input">Hidden Input</label>
</div>
<div class="md-help-text">Hidden field (not visible to users)</div>
</div>
</div>
</div>
<div id="tab-2"
class="tab-panel"
role="tabpanel"
style="display: none;"
aria-hidden="true">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">person-circle</span>
<div class="md-input-wrapper">
<input type="url"
name="profile_picture_url"
id="profile_picture_url"
class="md-input"
value="https://example.com/avatars/user123.jpg"
placeholder=" " >
<label class="md-floating-label" for="profile_picture_url">Profile Picture URL</label>
</div>
</div>
<div class="md-help-text">URL to profile picture</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">image</span>
<div class="md-input-wrapper">
<input type="url"
name="background_image_url"
id="background_image_url"
class="md-input"
value="https://example.com/backgrounds/abstract.jpg"
placeholder=" " >
<label class="md-floating-label" for="background_image_url">Background Image URL</label>
</div>
</div>
<div class="md-help-text">URL to background image</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">palette</span>
<div class="md-input-wrapper">
<input type="color"
name="favicon_color"
id="favicon_color"
class="md-input"
value="#3498db"
placeholder=" " >
<label class="md-floating-label" for="favicon_color">Favicon Color</label>
</div>
</div>
<div class="md-help-text">Color for browser favicon</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="enable_animations"
id="enable_animations"
class="md-checkbox"
value="true"
checked="checked" >
<label for="enable_animations" class="md-checkbox-label">Enable Animations</label>
</div>
<div class="md-help-text">Show animated transitions?</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="enable_sound"
id="enable_sound"
class="md-checkbox"
value="true"
>
<label for="enable_sound" class="md-checkbox-label">Enable Sound Effects</label>
</div>
<div class="md-help-text">Play sound effects?</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">film</span>
<div class="md-input-wrapper">
<select name="video_quality"
id="video_quality"
class="md-select" >
<option value=""></option>
<option value="auto">π Auto</option>
<option value="1080p" selected="selected">π¬ 1080p (HD)</option>
<option value="720p">πΉ 720p</option>
<option value="480p">πΊ 480p</option>
<option value="360p">π± 360p</option>
</select>
<label class="md-floating-label" for="video_quality">Default Video Quality</label>
</div>
</div>
<div class="md-help-text">Preferred video playback quality</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="autoplay_videos"
id="autoplay_videos"
class="md-checkbox"
value="true"
>
<label for="autoplay_videos" class="md-checkbox-label">Autoplay Videos</label>
</div>
<div class="md-help-text">Automatically play videos?</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Color Themes</label>
<div class="model-list-container md-model-list-container" data-field-name="color_themes" data-min-items="0" data-max-items="10">
<div class="model-list-items md-model-list-items" id="color_themes-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π¨ {theme_name}"
data-field-name="color_themes">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#color_themes_item_0_content"
aria-expanded="true"
aria-controls="color_themes_item_0_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="color_themes"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="color_themes_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].theme_name"><i class="material-icons">palette</i> Theme Name</label>
<input name="color_themes[0].theme_name" id="color_themes[0].theme_name" class="validate" maxlength="50" placeholder="Ocean Blue" type="text" />
<div class="help-text">Name for this color theme</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].primary_color"><i class="material-icons">palette</i> Primary Color</label>
<div class="color-input-group"><input name="color_themes[0].primary_color" id="color_themes[0].primary_color" class="validate" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].primary_color_value" style="font-family: monospace;"></span>
<div id="color_themes[0].primary_color_swatch" style="width: 20px; height: 20px; background-color: ; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].primary_color');
const valueSpan = document.getElementById('color_themes[0].primary_color_value');
const swatch = document.getElementById('color_themes[0].primary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Main brand color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].secondary_color"><i class="material-icons">palette</i> Secondary Color</label>
<div class="color-input-group"><input name="color_themes[0].secondary_color" id="color_themes[0].secondary_color" class="validate" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].secondary_color_value" style="font-family: monospace;"></span>
<div id="color_themes[0].secondary_color_swatch" style="width: 20px; height: 20px; background-color: ; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].secondary_color');
const valueSpan = document.getElementById('color_themes[0].secondary_color_value');
const swatch = document.getElementById('color_themes[0].secondary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Secondary accent color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].accent_color"><i class="material-icons">palette</i> Accent Color</label>
<div class="color-input-group"><input name="color_themes[0].accent_color" id="color_themes[0].accent_color" class="validate" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].accent_color_value" style="font-family: monospace;"></span>
<div id="color_themes[0].accent_color_swatch" style="width: 20px; height: 20px; background-color: ; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].accent_color');
const valueSpan = document.getElementById('color_themes[0].accent_color_value');
const swatch = document.getElementById('color_themes[0].accent_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Highlight color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].background_color"><i class="material-icons">palette</i> Background Color</label>
<div class="color-input-group"><input name="color_themes[0].background_color" id="color_themes[0].background_color" class="validate" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].background_color_value" style="font-family: monospace;"></span>
<div id="color_themes[0].background_color_swatch" style="width: 20px; height: 20px; background-color: ; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].background_color');
const valueSpan = document.getElementById('color_themes[0].background_color_value');
const swatch = document.getElementById('color_themes[0].background_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Page background color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].text_color"><i class="material-icons">palette</i> Text Color</label>
<div class="color-input-group"><input name="color_themes[0].text_color" id="color_themes[0].text_color" class="validate" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].text_color_value" style="font-family: monospace;"></span>
<div id="color_themes[0].text_color_swatch" style="width: 20px; height: 20px; background-color: ; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].text_color');
const valueSpan = document.getElementById('color_themes[0].text_color_value');
const swatch = document.getElementById('color_themes[0].text_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Primary text color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].is_default">Set as Default</label>
<input name="color_themes[0].is_default" id="color_themes[0].is_default" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Use this as the default theme?</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π¨ {theme_name}"
data-field-name="color_themes">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#color_themes_item_0_content"
aria-expanded="true"
aria-controls="color_themes_item_0_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
π¨ Ocean Blue
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="color_themes"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="color_themes_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].theme_name"><i class="material-icons">palette</i> Theme Name</label>
<input name="color_themes[0].theme_name" id="color_themes[0].theme_name" class="validate" value="Ocean Blue" maxlength="50" placeholder="Ocean Blue" type="text" />
<div class="help-text">Name for this color theme</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].primary_color"><i class="material-icons">palette</i> Primary Color</label>
<div class="color-input-group"><input name="color_themes[0].primary_color" id="color_themes[0].primary_color" class="validate" value="#3498db" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].primary_color_value" style="font-family: monospace;">#3498db</span>
<div id="color_themes[0].primary_color_swatch" style="width: 20px; height: 20px; background-color: #3498db; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].primary_color');
const valueSpan = document.getElementById('color_themes[0].primary_color_value');
const swatch = document.getElementById('color_themes[0].primary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Main brand color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].secondary_color"><i class="material-icons">palette</i> Secondary Color</label>
<div class="color-input-group"><input name="color_themes[0].secondary_color" id="color_themes[0].secondary_color" class="validate" value="#2ecc71" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].secondary_color_value" style="font-family: monospace;">#2ecc71</span>
<div id="color_themes[0].secondary_color_swatch" style="width: 20px; height: 20px; background-color: #2ecc71; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].secondary_color');
const valueSpan = document.getElementById('color_themes[0].secondary_color_value');
const swatch = document.getElementById('color_themes[0].secondary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Secondary accent color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].accent_color"><i class="material-icons">palette</i> Accent Color</label>
<div class="color-input-group"><input name="color_themes[0].accent_color" id="color_themes[0].accent_color" class="validate" value="#e74c3c" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].accent_color_value" style="font-family: monospace;">#e74c3c</span>
<div id="color_themes[0].accent_color_swatch" style="width: 20px; height: 20px; background-color: #e74c3c; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].accent_color');
const valueSpan = document.getElementById('color_themes[0].accent_color_value');
const swatch = document.getElementById('color_themes[0].accent_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Highlight color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].background_color"><i class="material-icons">palette</i> Background Color</label>
<div class="color-input-group"><input name="color_themes[0].background_color" id="color_themes[0].background_color" class="validate" value="#ffffff" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].background_color_value" style="font-family: monospace;">#ffffff</span>
<div id="color_themes[0].background_color_swatch" style="width: 20px; height: 20px; background-color: #ffffff; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].background_color');
const valueSpan = document.getElementById('color_themes[0].background_color_value');
const swatch = document.getElementById('color_themes[0].background_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Page background color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].text_color"><i class="material-icons">palette</i> Text Color</label>
<div class="color-input-group"><input name="color_themes[0].text_color" id="color_themes[0].text_color" class="validate" value="#2c3e50" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[0].text_color_value" style="font-family: monospace;">#2c3e50</span>
<div id="color_themes[0].text_color_swatch" style="width: 20px; height: 20px; background-color: #2c3e50; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[0].text_color');
const valueSpan = document.getElementById('color_themes[0].text_color_value');
const swatch = document.getElementById('color_themes[0].text_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Primary text color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[0].is_default">Set as Default</label>
<input name="color_themes[0].is_default" id="color_themes[0].is_default" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Use this as the default theme?</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="π¨ {theme_name}"
data-field-name="color_themes">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#color_themes_item_1_content"
aria-expanded="true"
aria-controls="color_themes_item_1_content">
<i class="bi bi-chevron-down me-2"></i>
<i class="bi bi-card-list me-2"></i>
π¨ Dark Mode
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="color_themes"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse show" id="color_themes_item_1_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].theme_name"><i class="material-icons">palette</i> Theme Name</label>
<input name="color_themes[1].theme_name" id="color_themes[1].theme_name" class="validate" value="Dark Mode" maxlength="50" placeholder="Ocean Blue" type="text" />
<div class="help-text">Name for this color theme</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].primary_color"><i class="material-icons">palette</i> Primary Color</label>
<div class="color-input-group"><input name="color_themes[1].primary_color" id="color_themes[1].primary_color" class="validate" value="#1a1a1a" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[1].primary_color_value" style="font-family: monospace;">#1a1a1a</span>
<div id="color_themes[1].primary_color_swatch" style="width: 20px; height: 20px; background-color: #1a1a1a; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[1].primary_color');
const valueSpan = document.getElementById('color_themes[1].primary_color_value');
const swatch = document.getElementById('color_themes[1].primary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Main brand color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].secondary_color"><i class="material-icons">palette</i> Secondary Color</label>
<div class="color-input-group"><input name="color_themes[1].secondary_color" id="color_themes[1].secondary_color" class="validate" value="#34495e" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[1].secondary_color_value" style="font-family: monospace;">#34495e</span>
<div id="color_themes[1].secondary_color_swatch" style="width: 20px; height: 20px; background-color: #34495e; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[1].secondary_color');
const valueSpan = document.getElementById('color_themes[1].secondary_color_value');
const swatch = document.getElementById('color_themes[1].secondary_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Secondary accent color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].accent_color"><i class="material-icons">palette</i> Accent Color</label>
<div class="color-input-group"><input name="color_themes[1].accent_color" id="color_themes[1].accent_color" class="validate" value="#f39c12" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[1].accent_color_value" style="font-family: monospace;">#f39c12</span>
<div id="color_themes[1].accent_color_swatch" style="width: 20px; height: 20px; background-color: #f39c12; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[1].accent_color');
const valueSpan = document.getElementById('color_themes[1].accent_color_value');
const swatch = document.getElementById('color_themes[1].accent_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Highlight color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].background_color"><i class="material-icons">palette</i> Background Color</label>
<div class="color-input-group"><input name="color_themes[1].background_color" id="color_themes[1].background_color" class="validate" value="#0a0a0a" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[1].background_color_value" style="font-family: monospace;">#0a0a0a</span>
<div id="color_themes[1].background_color_swatch" style="width: 20px; height: 20px; background-color: #0a0a0a; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[1].background_color');
const valueSpan = document.getElementById('color_themes[1].background_color_value');
const swatch = document.getElementById('color_themes[1].background_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Page background color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].text_color"><i class="material-icons">palette</i> Text Color</label>
<div class="color-input-group"><input name="color_themes[1].text_color" id="color_themes[1].text_color" class="validate" value="#ecf0f1" type="color" />
<div class="color-value-display" style="display: inline-flex; align-items: center; margin-left: 10px;">
<span id="color_themes[1].text_color_value" style="font-family: monospace;">#ecf0f1</span>
<div id="color_themes[1].text_color_swatch" style="width: 20px; height: 20px; background-color: #ecf0f1; border: 1px solid #ccc; margin-left: 5px;"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const colorInput = document.getElementById('color_themes[1].text_color');
const valueSpan = document.getElementById('color_themes[1].text_color_value');
const swatch = document.getElementById('color_themes[1].text_color_swatch');
if (colorInput && valueSpan && swatch) {
colorInput.addEventListener('input', function() {
valueSpan.textContent = this.value;
swatch.style.backgroundColor = this.value;
});
}
});
</script>
</div>
<div class="help-text">Primary text color</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="color_themes[1].is_default">Set as Default</label>
<input name="color_themes[1].is_default" id="color_themes[1].is_default" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Use this as the default theme?</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="color_themes">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Create custom color themes</p>
</section>
</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">cloud_upload</span>
<div class="md-input-wrapper">
<input type="range"
name="max_upload_size_mb"
id="max_upload_size_mb"
class="md-input"
value="25"
placeholder=" " >
<label class="md-floating-label" for="max_upload_size_mb">Max Upload Size (MB)</label>
</div>
</div>
<div class="md-help-text">Maximum file size for uploads</div>
</div>
</div>
</div>
<div id="tab-3"
class="tab-panel"
role="tabpanel"
style="display: none;"
aria-hidden="true">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">building</span>
<div class="md-input-wrapper">
<input type="text"
name="company_name"
id="company_name"
class="md-input"
value="TechCorp International"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="company_name">Company Name *</label>
</div>
</div>
<div class="md-help-text">Legal name of the company</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">code</span>
<div class="md-input-wrapper">
<input type="text"
name="company_code"
id="company_code"
class="md-input"
value="TECH-2024"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="company_code">Company Code *</label>
</div>
</div>
<div class="md-help-text">Unique identifier for this company</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">map-marker</span>
<div class="md-input-wrapper">
<textarea name="headquarters_address"
id="headquarters_address"
class="md-textarea"
placeholder=" " required="required" aria-required="true">123 Innovation Drive, San Francisco, CA 94105</textarea>
<label class="md-floating-label" for="headquarters_address">Headquarters Address *</label>
</div>
</div>
<div class="md-help-text">Main office address</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">star</span>
<div class="md-input-wrapper">
<input type="text"
name="ceo_name"
id="ceo_name"
class="md-input"
value="Jane Smith"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="ceo_name">CEO Name *</label>
</div>
</div>
<div class="md-help-text">Chief Executive Officer</div>
</div>
<div class="md-field">
<div class="md-input-wrapper">
<input type="email"
name="ceo_email"
id="ceo_email"
class="md-input"
value="jane.smith@techcorp.com"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="ceo_email">CEO Email *</label>
</div>
<div class="md-help-text">Email address of the CEO</div>
</div>
<div class="md-field">
<div class="md-input-wrapper">
<input type="date"
name="founded_date"
id="founded_date"
class="md-input"
value="2010-01-15"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="founded_date">Founded Date *</label>
</div>
<div class="md-help-text">When was the company founded?</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">people</span>
<div class="md-input-wrapper">
<input type="number"
name="employee_count"
id="employee_count"
class="md-input"
value="5000"
placeholder=" " >
<label class="md-floating-label" for="employee_count">Total Employees</label>
</div>
</div>
<div class="md-help-text">Total number of employees</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">cash-coin</span>
<div class="md-input-wrapper">
<input type="number"
name="annual_revenue"
id="annual_revenue"
class="md-input"
value="500000000.0"
placeholder=" " >
<label class="md-floating-label" for="annual_revenue">Annual Revenue ($)</label>
</div>
</div>
<div class="md-help-text">Company annual revenue in USD</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">public</span>
<div class="md-input-wrapper">
<input type="text"
name="website"
id="website"
class="md-input"
value="https://www.techcorp.com"
placeholder=" " >
<label class="md-floating-label" for="website">Company Website</label>
</div>
</div>
<div class="md-help-text">Company website URL</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Company Departments</label>
<div class="model-list-container md-model-list-container" data-field-name="departments" data-min-items="1" data-max-items="500">
<div class="model-list-items md-model-list-items" id="departments-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π’ {name} (Head: {department_head})"
data-field-name="departments">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_item_0_content"
aria-expanded="false"
aria-controls="departments_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].name"><i class="material-icons">building</i> Department Name</label>
<input name="departments[0].name" id="departments[0].name" class="validate" minlength="2" maxlength="100" placeholder="e.g., Engineering, Sales" type="text" />
<div class="help-text">Name of the department</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].description">Department Description</label>
<textarea name="departments[0].description" id="departments[0].description" class="validate" placeholder="What does this department do?"></textarea>
<div class="help-text">Description of department responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].department_head"><i class="material-icons">crown</i> Department Head</label>
<input name="departments[0].department_head" id="departments[0].department_head" class="validate" maxlength="100" placeholder="Head of department name" type="text" />
<div class="help-text">Who leads this department?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].head_email">Department Head Email</label>
<input name="departments[0].head_email" id="departments[0].head_email" class="validate" placeholder="head@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email for the department head</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].established_date">Established Date</label>
<div class="birthdate-input-group"><input name="departments[0].established_date" id="departments[0].established_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].established_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].established_date');
const ageDisplay = document.getElementById('departments[0].established_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this department established?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].budget"><i class="material-icons">cash-coin</i> Annual Budget ($)</label>
<input name="departments[0].budget" id="departments[0].budget" class="validate" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Department annual budget in USD</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Teams</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams" data-min-items="1" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].teams-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π₯ {name} (Lead: {team_lead})"
data-field-name="departments[0].teams">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].name"><i class="material-icons">people</i> Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" class="validate" minlength="2" maxlength="100" placeholder="e.g., Backend Team" type="text" />
<div class="help-text">Name of the team</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" class="validate" placeholder="What does this team do?"></textarea>
<div class="help-text">Brief description of the team's responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].team_lead"><i class="material-icons">star</i> Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" class="validate" maxlength="100" placeholder="Name of the team lead" type="text" />
<div class="help-text">Who leads this team?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].formed_date">Formation Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].formed_date" id="departments[0].teams[0].formed_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].formed_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].formed_date');
const ageDisplay = document.getElementById('departments[0].teams[0].formed_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this team formed?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Team Members</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add team members and their certifications</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π₯ {name} (Lead: {team_lead})"
data-field-name="departments[0].teams">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].name"><i class="material-icons">people</i> Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" class="validate" minlength="2" maxlength="100" placeholder="e.g., Backend Team" type="text" />
<div class="help-text">Name of the team</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" class="validate" placeholder="What does this team do?"></textarea>
<div class="help-text">Brief description of the team's responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].team_lead"><i class="material-icons">star</i> Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" class="validate" maxlength="100" placeholder="Name of the team lead" type="text" />
<div class="help-text">Who leads this team?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].formed_date">Formation Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].formed_date" id="departments[0].teams[0].formed_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].formed_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].formed_date');
const ageDisplay = document.getElementById('departments[0].teams[0].formed_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this team formed?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Team Members</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add team members and their certifications</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Teams within this department and their members</p>
</section>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Active Projects</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects" data-min-items="0" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].projects-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {name}"
data-field-name="departments[0].projects">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].name"><i class="material-icons">kanban</i> Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" class="validate" minlength="3" maxlength="200" placeholder="e.g., Mobile App Redesign" type="text" />
<div class="help-text">Name of the project</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the project"></textarea>
<div class="help-text">What is this project about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">flag</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="on_hold">βΈοΈ On Hold</option>
<option value="completed">β
Completed</option>
<option value="archived">π¦ Archived</option></select>
<label class="md-floating-label" for="departments[0].projects[0].status">Project Status</label>
</div>
</div>
<div class="md-help-text">Current project status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].start_date">Project Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].start_date" id="departments[0].projects[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this project start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].target_end_date">Target End Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].target_end_date" id="departments[0].projects[0].target_end_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].target_end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].target_end_date');
const ageDisplay = document.getElementById('departments[0].projects[0].target_end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this project be completed?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].budget"><i class="material-icons">cash-coin</i> Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" class="validate" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Project budget in USD</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].project_manager"><i class="material-icons">badge</i> Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" class="validate" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Project Tasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add tasks with subtasks to organize project work</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {name}"
data-field-name="departments[0].projects">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].name"><i class="material-icons">kanban</i> Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" class="validate" minlength="3" maxlength="200" placeholder="e.g., Mobile App Redesign" type="text" />
<div class="help-text">Name of the project</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the project"></textarea>
<div class="help-text">What is this project about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">flag</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="on_hold">βΈοΈ On Hold</option>
<option value="completed">β
Completed</option>
<option value="archived">π¦ Archived</option></select>
<label class="md-floating-label" for="departments[0].projects[0].status">Project Status</label>
</div>
</div>
<div class="md-help-text">Current project status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].start_date">Project Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].start_date" id="departments[0].projects[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this project start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].target_end_date">Target End Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].target_end_date" id="departments[0].projects[0].target_end_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].target_end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].target_end_date');
const ageDisplay = document.getElementById('departments[0].projects[0].target_end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this project be completed?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].budget"><i class="material-icons">cash-coin</i> Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" class="validate" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Project budget in USD</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].project_manager"><i class="material-icons">badge</i> Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" class="validate" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Project Tasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add tasks with subtasks to organize project work</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Projects managed by this department</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π’ {name} (Head: {department_head})"
data-field-name="departments">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_item_0_content"
aria-expanded="false"
aria-controls="departments_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π’ Engineering (Head: John Doe)
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].name"><i class="material-icons">building</i> Department Name</label>
<input name="departments[0].name" id="departments[0].name" class="validate" value="Engineering" minlength="2" maxlength="100" placeholder="e.g., Engineering, Sales" type="text" />
<div class="help-text">Name of the department</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].description">Department Description</label>
<textarea name="departments[0].description" id="departments[0].description" class="validate" placeholder="What does this department do?">Software development and infrastructure</textarea>
<div class="help-text">Description of department responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].department_head"><i class="material-icons">crown</i> Department Head</label>
<input name="departments[0].department_head" id="departments[0].department_head" class="validate" value="John Doe" maxlength="100" placeholder="Head of department name" type="text" />
<div class="help-text">Who leads this department?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].head_email">Department Head Email</label>
<input name="departments[0].head_email" id="departments[0].head_email" class="validate" value="john.doe@techcorp.com" placeholder="head@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email for the department head</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].established_date">Established Date</label>
<div class="birthdate-input-group"><input name="departments[0].established_date" id="departments[0].established_date" class="validate" value="2010-06-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].established_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].established_date');
const ageDisplay = document.getElementById('departments[0].established_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this department established?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].budget"><i class="material-icons">cash-coin</i> Annual Budget ($)</label>
<input name="departments[0].budget" id="departments[0].budget" class="validate" value="50000000.0" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Department annual budget in USD</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Teams</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams" data-min-items="1" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].teams-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π₯ {name} (Lead: {team_lead})"
data-field-name="departments[0].teams">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].name"><i class="material-icons">people</i> Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" class="validate" minlength="2" maxlength="100" placeholder="e.g., Backend Team" type="text" />
<div class="help-text">Name of the team</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" class="validate" placeholder="What does this team do?"></textarea>
<div class="help-text">Brief description of the team's responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].team_lead"><i class="material-icons">star</i> Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" class="validate" maxlength="100" placeholder="Name of the team lead" type="text" />
<div class="help-text">Who leads this team?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].formed_date">Formation Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].formed_date" id="departments[0].teams[0].formed_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].formed_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].formed_date');
const ageDisplay = document.getElementById('departments[0].teams[0].formed_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this team formed?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Team Members</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add team members and their certifications</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π₯ {name} (Lead: {team_lead})"
data-field-name="departments[0].teams">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π₯ Backend Services (Lead: Alice Johnson)
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].name"><i class="material-icons">people</i> Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" class="validate" value="Backend Services" minlength="2" maxlength="100" placeholder="e.g., Backend Team" type="text" />
<div class="help-text">Name of the team</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" class="validate" placeholder="What does this team do?">API and database services</textarea>
<div class="help-text">Brief description of the team's responsibilities</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].team_lead"><i class="material-icons">star</i> Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" class="validate" value="Alice Johnson" maxlength="100" placeholder="Name of the team lead" type="text" />
<div class="help-text">Who leads this team?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].formed_date">Formation Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].formed_date" id="departments[0].teams[0].formed_date" class="validate" value="2015-03-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].formed_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].formed_date');
const ageDisplay = document.getElementById('departments[0].teams[0].formed_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this team formed?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Team Members</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π€ {name} - {role}"
data-field-name="departments[0].teams[0].members">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π€ Bob Wilson - Senior Backend Developer
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].name"><i class="material-icons">person</i> Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" class="validate" value="Bob Wilson" minlength="2" maxlength="100" placeholder="Enter full name" type="text" />
<div class="help-text">Full name of the team member</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].email">Email Address</label>
<input name="departments[0].teams[0].members[0].email" id="departments[0].teams[0].members[0].email" class="validate" value="bob.wilson@techcorp.com" placeholder="member@company.com" inputmode="email" type="email" />
<div class="help-text">Contact email address</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].role"><i class="material-icons">briefcase</i> Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" class="validate" value="Senior Backend Developer" maxlength="100" placeholder="e.g., Senior Developer" type="text" />
<div class="help-text">Job title or role</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].hire_date">Hire Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].hire_date" id="departments[0].teams[0].members[0].hire_date" class="validate" value="2016-01-15" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].hire_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].hire_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].hire_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When did this person join?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].experience_years"><i class="material-icons">hourglass-split</i> Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" class="validate" value="12" min="0" max="70" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total professional experience in years</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].manager">Manager Name</label>
<input name="departments[0].teams[0].members[0].manager" id="departments[0].teams[0].members[0].manager" class="validate" value="Alice Johnson" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Certifications</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="departments[0].teams[0].members[0].certifications-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_0_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
AWS Solutions Architect Professional - Amazon Web Services
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" class="validate" value="AWS Solutions Architect Professional" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" class="validate" value="Amazon Web Services" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].issue_date" id="departments[0].teams[0].members[0].certifications[0].issue_date" class="validate" value="2022-05-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[0].expiry_date" id="departments[0].teams[0].members[0].certifications[0].expiry_date" class="validate" value="2025-05-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[0].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[0].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_id" id="departments[0].teams[0].members[0].certifications[0].credential_id" class="validate" value="AWS-12345" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[0].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[0].credential_url" id="departments[0].teams[0].members[0].certifications[0].credential_url" class="validate" value="https://aws.amazon.com/verification/12345" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="{name} - {issuer}"
data-field-name="departments[0].teams[0].members[0].certifications">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__teams_0__members_0__certifications_item_1_content"
aria-expanded="false"
aria-controls="departments_0__teams_0__members_0__certifications_item_1_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Certified Kubernetes Administrator - Cloud Native Computing Foundation
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="departments[0].teams[0].members[0].certifications"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__teams_0__members_0__certifications_item_1_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].name"><i class="material-icons">military_tech</i> Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[1].name" id="departments[0].teams[0].members[0].certifications[1].name" class="validate" value="Certified Kubernetes Administrator" maxlength="100" placeholder="e.g., AWS Solutions Architect" type="text" />
<div class="help-text">Name of the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].issuer"><i class="material-icons">building</i> Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[1].issuer" id="departments[0].teams[0].members[0].certifications[1].issuer" class="validate" value="Cloud Native Computing Foundation" maxlength="100" placeholder="e.g., Amazon Web Services" type="text" />
<div class="help-text">Organization that issued the certification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].issue_date">Issue Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[1].issue_date" id="departments[0].teams[0].members[0].certifications[1].issue_date" class="validate" value="2023-01-15" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[1].issue_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[1].issue_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[1].issue_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When was this certification issued?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].expiry_date">Expiry Date</label>
<div class="birthdate-input-group"><input name="departments[0].teams[0].members[0].certifications[1].expiry_date" id="departments[0].teams[0].members[0].certifications[1].expiry_date" class="validate" value="2026-01-15" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].teams[0].members[0].certifications[1].expiry_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].teams[0].members[0].certifications[1].expiry_date');
const ageDisplay = document.getElementById('departments[0].teams[0].members[0].certifications[1].expiry_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this certification expire? (Leave empty if no expiry)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].credential_id">Credential ID</label>
<input name="departments[0].teams[0].members[0].certifications[1].credential_id" id="departments[0].teams[0].members[0].certifications[1].credential_id" class="validate" value="CKA-67890" placeholder="Optional credential identifier" type="text" />
<div class="help-text">Unique ID for credential verification</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].teams[0].members[0].certifications[1].credential_url">Credential URL</label>
<input name="departments[0].teams[0].members[0].certifications[1].credential_url" id="departments[0].teams[0].members[0].certifications[1].credential_url" class="validate" value="https://cncf.io/verify/67890" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members[0].certifications">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Professional certifications and credentials</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams[0].members">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add team members and their certifications</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].teams">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Teams within this department and their members</p>
</section>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Active Projects</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects" data-min-items="0" data-max-items="100">
<div class="model-list-items md-model-list-items" id="departments[0].projects-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {name}"
data-field-name="departments[0].projects">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].name"><i class="material-icons">kanban</i> Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" class="validate" minlength="3" maxlength="200" placeholder="e.g., Mobile App Redesign" type="text" />
<div class="help-text">Name of the project</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the project"></textarea>
<div class="help-text">What is this project about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">flag</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="on_hold">βΈοΈ On Hold</option>
<option value="completed">β
Completed</option>
<option value="archived">π¦ Archived</option></select>
<label class="md-floating-label" for="departments[0].projects[0].status">Project Status</label>
</div>
</div>
<div class="md-help-text">Current project status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].start_date">Project Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].start_date" id="departments[0].projects[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this project start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].target_end_date">Target End Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].target_end_date" id="departments[0].projects[0].target_end_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].target_end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].target_end_date');
const ageDisplay = document.getElementById('departments[0].projects[0].target_end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this project be completed?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].budget"><i class="material-icons">cash-coin</i> Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" class="validate" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Project budget in USD</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].project_manager"><i class="material-icons">badge</i> Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" class="validate" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Project Tasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add tasks with subtasks to organize project work</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {name}"
data-field-name="departments[0].projects">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π Microservices Migration
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].name"><i class="material-icons">kanban</i> Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" class="validate" value="Microservices Migration" minlength="3" maxlength="200" placeholder="e.g., Mobile App Redesign" type="text" />
<div class="help-text">Name of the project</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the project">Migrate monolithic application to microservices architecture</textarea>
<div class="help-text">What is this project about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">flag</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress" selected>π In Progress</option>
<option value="on_hold">βΈοΈ On Hold</option>
<option value="completed">β
Completed</option>
<option value="archived">π¦ Archived</option></select>
<label class="md-floating-label" for="departments[0].projects[0].status">Project Status</label>
</div>
</div>
<div class="md-help-text">Current project status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].start_date">Project Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].start_date" id="departments[0].projects[0].start_date" class="validate" value="2024-01-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this project start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].target_end_date">Target End Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].target_end_date" id="departments[0].projects[0].target_end_date" class="validate" value="2024-12-31" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].target_end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].target_end_date');
const ageDisplay = document.getElementById('departments[0].projects[0].target_end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this project be completed?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].budget"><i class="material-icons">cash-coin</i> Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" class="validate" value="2000000.0" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Project budget in USD</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].project_manager"><i class="material-icons">badge</i> Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" class="validate" value="Carol Lee" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Project Tasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task"></textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high">π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress">π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {title}"
data-field-name="departments[0].projects[0].tasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π Refactor Auth Service
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].title"><i class="material-icons">bookmark</i> Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" class="validate" value="Refactor Auth Service" minlength="3" maxlength="200" placeholder="Brief task name" type="text" />
<div class="help-text">What is this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].description">Task Description</label>
<textarea name="departments[0].projects[0].tasks[0].description" id="departments[0].projects[0].tasks[0].description" class="validate" maxlength="2000" placeholder="Detailed description of the task">Extract authentication into standalone microservice</textarea>
<div class="help-text">Full description of what needs to be done</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<div class="md-field-with-icon">
<span class="md-icon material-icons">exclamation-circle</span>
<div class="md-input-wrapper">
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority" class="browser-default"><option value="low">π’ Low</option>
<option value="medium">π‘ Medium</option>
<option value="high" selected>π΄ High</option>
<option value="critical">β Critical</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
</div>
</div>
<div class="md-help-text">Task priority level</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status" class="browser-default"><option value="planning">π Planning</option>
<option value="in_progress" selected>π In Progress</option>
<option value="in_review">π In Review</option>
<option value="completed">β
Completed</option>
<option value="cancelled">β Cancelled</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].status">Task Status</label>
<div class="md-help-text">Current task status</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].start_date">Start Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].start_date" id="departments[0].projects[0].tasks[0].start_date" class="validate" value="2024-02-01" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].start_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should this task start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].due_date">Due Date</label>
<div class="birthdate-input-group"><input name="departments[0].projects[0].tasks[0].due_date" id="departments[0].projects[0].tasks[0].due_date" class="validate" value="2024-03-31" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="departments[0].projects[0].tasks[0].due_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('departments[0].projects[0].tasks[0].due_date');
const ageDisplay = document.getElementById('departments[0].projects[0].tasks[0].due_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When is this task due?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].assigned_to">Assigned To</label>
<input name="departments[0].projects[0].tasks[0].assigned_to" id="departments[0].projects[0].tasks[0].assigned_to" class="validate" value="Bob Wilson" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this task?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" class="validate" value="120.0" min="0.5" max="1000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete (in hours)</div></div>
</div>
<div class="col-12">
<section class="md-model-list-wrapper">
<label class="md-field-label">Subtasks</label>
<div class="model-list-container md-model-list-container" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="departments[0].projects[0].tasks[0].subtasks-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask"></textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed">β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="πΉ {title}"
data-field-name="departments[0].projects[0].tasks[0].subtasks">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#departments_0__projects_0__tasks_0__subtasks_item_0_content"
aria-expanded="false"
aria-controls="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
πΉ Create service skeleton
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="departments[0].projects[0].tasks[0].subtasks"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="departments_0__projects_0__tasks_0__subtasks_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].title"><i class="material-icons">checklist</i> Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" class="validate" value="Create service skeleton" maxlength="200" placeholder="Brief description of the subtask" type="text" />
<div class="help-text">What is this subtask about?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].description">Description</label>
<textarea name="departments[0].projects[0].tasks[0].subtasks[0].description" id="departments[0].projects[0].tasks[0].subtasks[0].description" class="validate" placeholder="Detailed description of the subtask">Set up FastAPI project structure</textarea>
<div class="help-text">Additional details about this subtask</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to"><i class="material-icons">person</i> Assigned To</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" id="departments[0].projects[0].tasks[0].subtasks[0].assigned_to" class="validate" value="Bob Wilson" maxlength="100" placeholder="Team member name" type="text" />
<div class="help-text">Who is responsible for this subtask?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours"><i class="material-icons">schedule</i> Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours" class="validate" value="16.0" min="0.5" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Estimated time to complete</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status" class="browser-default"><option value="pending">β³ Pending</option>
<option value="in_progress">π In Progress</option>
<option value="completed" selected>β
Completed</option>
<option value="blocked">π« Blocked</option></select>
<label class="md-floating-label" for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<div class="md-help-text">Current status of the subtask</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Break down this task into smaller subtasks</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects[0].tasks">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Add tasks with subtasks to organize project work</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments[0].projects">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Projects managed by this department</p>
</section>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="departments">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Organize departments with teams, members, and projects</p>
</section>
</div>
</div>
</div>
</div>
<div id="tab-4"
class="tab-panel"
role="tabpanel"
style="display: none;"
aria-hidden="true">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">calendar3</span>
<div class="md-input-wrapper">
<input type="text"
name="calendar_name"
id="calendar_name"
class="md-input"
value="Work Calendar"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="calendar_name">Calendar Name *</label>
</div>
</div>
<div class="md-help-text">Name for this calendar</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">public</span>
<div class="md-input-wrapper">
<select name="timezone"
id="timezone"
class="md-select" >
<option value=""></option>
<option value="America/New_York">π Eastern (ET)</option>
<option value="America/Chicago">π Central (CT)</option>
<option value="America/Denver">ποΈ Mountain (MT)</option>
<option value="America/Los_Angeles" selected="selected">π΄ Pacific (PT)</option>
<option value="Europe/London">π¬π§ London (GMT)</option>
<option value="Europe/Paris">π«π· Paris (CET)</option>
<option value="Asia/Tokyo">π―π΅ Tokyo (JST)</option>
</select>
<label class="md-floating-label" for="timezone">Timezone</label>
</div>
</div>
<div class="md-help-text">Your timezone</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">schedule</span>
<div class="md-input-wrapper">
<input type="range"
name="default_event_duration"
id="default_event_duration"
class="md-input"
value="60"
placeholder=" " >
<label class="md-floating-label" for="default_event_duration">Default Event Duration (minutes)</label>
</div>
</div>
<div class="md-help-text">Default length for new events</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">sunrise</span>
<div class="md-input-wrapper">
<input type="time"
name="work_start_time"
id="work_start_time"
class="md-input"
value="09:00"
placeholder=" " >
<label class="md-floating-label" for="work_start_time">Work Start Time</label>
</div>
</div>
<div class="md-help-text">When does your workday start?</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">sunset</span>
<div class="md-input-wrapper">
<input type="time"
name="work_end_time"
id="work_end_time"
class="md-input"
value="17:00"
placeholder=" " >
<label class="md-floating-label" for="work_end_time">Work End Time</label>
</div>
</div>
<div class="md-help-text">When does your workday end?</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">calendar-x</span>
<div class="md-input-wrapper">
<select name="weekend_days"
id="weekend_days"
class="md-select" >
<option value=""></option>
<option value="sunday">Sunday</option>
<option value="monday">Monday</option>
<option value="tuesday">Tuesday</option>
<option value="wednesday">Wednesday</option>
<option value="thursday">Thursday</option>
<option value="friday">Friday</option>
<option value="saturday">Saturday</option>
</select>
<label class="md-floating-label" for="weekend_days">Weekend Days</label>
</div>
</div>
<div class="md-help-text">Select your non-working days</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Recurring Events</label>
<div class="model-list-container md-model-list-container" data-field-name="recurring_events" data-min-items="0" data-max-items="50">
<div class="model-list-items md-model-list-items" id="recurring_events-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {event_name} ({recurrence_pattern})"
data-field-name="recurring_events">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#recurring_events_item_0_content"
aria-expanded="false"
aria-controls="recurring_events_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="recurring_events"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="recurring_events_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].event_name"><i class="material-icons">event</i> Event Name</label>
<input name="recurring_events[0].event_name" id="recurring_events[0].event_name" class="validate" maxlength="200" placeholder="Weekly Team Meeting" type="text" />
<div class="help-text">Name of the recurring event</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[0].event_type" id="recurring_events[0].event_type" class="browser-default"><option value="meeting">π€ Meeting</option>
<option value="reminder">β° Reminder</option>
<option value="deadline">π
Deadline</option>
<option value="birthday">π Birthday</option>
<option value="anniversary">π Anniversary</option>
<option value="other">π Other</option></select>
<label class="md-floating-label" for="recurring_events[0].event_type">Event Type</label>
<div class="md-help-text">Type of event</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].start_date"><i class="material-icons">calendar-check</i> Start Date</label>
<div class="birthdate-input-group"><input name="recurring_events[0].start_date" id="recurring_events[0].start_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[0].start_date');
const ageDisplay = document.getElementById('recurring_events[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this event start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].start_time"><i class="material-icons">schedule</i> Start Time</label>
<input name="recurring_events[0].start_time" id="recurring_events[0].start_time" class="validate" step="60" type="time" />
<div class="help-text">Event start time (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].duration_minutes"><i class="material-icons">hourglass</i> Duration (minutes)</label>
<input name="recurring_events[0].duration_minutes" id="recurring_events[0].duration_minutes" class="validate" min="15" max="1440" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">How long is the event?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[0].recurrence_pattern" id="recurring_events[0].recurrence_pattern" class="browser-default"><option value="daily">π Daily</option>
<option value="weekly">π
Weekly</option>
<option value="biweekly">π
π
Bi-weekly</option>
<option value="monthly">π Monthly</option>
<option value="yearly">ποΈ Yearly</option></select>
<label class="md-floating-label" for="recurring_events[0].recurrence_pattern">Recurrence Pattern</label>
<div class="md-help-text">How often does this repeat?</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].end_date">End Date</label>
<div class="birthdate-input-group"><input name="recurring_events[0].end_date" id="recurring_events[0].end_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[0].end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[0].end_date');
const ageDisplay = document.getElementById('recurring_events[0].end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should recurrence stop? (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].location"><i class="material-icons">geo-alt</i> Location</label>
<input name="recurring_events[0].location" id="recurring_events[0].location" class="validate" placeholder="Conference Room A" type="text" />
<div class="help-text">Where will this event take place?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].send_reminder"><i class="material-icons">notifications</i> Send Reminder</label>
<input name="recurring_events[0].send_reminder" id="recurring_events[0].send_reminder" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Send notification before event?</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {event_name} ({recurrence_pattern})"
data-field-name="recurring_events">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#recurring_events_item_0_content"
aria-expanded="false"
aria-controls="recurring_events_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π Weekly Team Standup (weekly)
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="recurring_events"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="recurring_events_item_0_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].event_name"><i class="material-icons">event</i> Event Name</label>
<input name="recurring_events[0].event_name" id="recurring_events[0].event_name" class="validate" value="Weekly Team Standup" maxlength="200" placeholder="Weekly Team Meeting" type="text" />
<div class="help-text">Name of the recurring event</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[0].event_type" id="recurring_events[0].event_type" class="browser-default"><option value="meeting" selected>π€ Meeting</option>
<option value="reminder">β° Reminder</option>
<option value="deadline">π
Deadline</option>
<option value="birthday">π Birthday</option>
<option value="anniversary">π Anniversary</option>
<option value="other">π Other</option></select>
<label class="md-floating-label" for="recurring_events[0].event_type">Event Type</label>
<div class="md-help-text">Type of event</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].start_date"><i class="material-icons">calendar-check</i> Start Date</label>
<div class="birthdate-input-group"><input name="recurring_events[0].start_date" id="recurring_events[0].start_date" class="validate" value="2024-01-08" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[0].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[0].start_date');
const ageDisplay = document.getElementById('recurring_events[0].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this event start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].start_time"><i class="material-icons">schedule</i> Start Time</label>
<input name="recurring_events[0].start_time" id="recurring_events[0].start_time" class="validate" value="10:00" step="60" type="time" />
<div class="help-text">Event start time (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].duration_minutes"><i class="material-icons">hourglass</i> Duration (minutes)</label>
<input name="recurring_events[0].duration_minutes" id="recurring_events[0].duration_minutes" class="validate" value="30" min="15" max="1440" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">How long is the event?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[0].recurrence_pattern" id="recurring_events[0].recurrence_pattern" class="browser-default"><option value="daily">π Daily</option>
<option value="weekly" selected>π
Weekly</option>
<option value="biweekly">π
π
Bi-weekly</option>
<option value="monthly">π Monthly</option>
<option value="yearly">ποΈ Yearly</option></select>
<label class="md-floating-label" for="recurring_events[0].recurrence_pattern">Recurrence Pattern</label>
<div class="md-help-text">How often does this repeat?</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].end_date">End Date</label>
<div class="birthdate-input-group"><input name="recurring_events[0].end_date" id="recurring_events[0].end_date" class="validate" value="2024-12-31" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[0].end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[0].end_date');
const ageDisplay = document.getElementById('recurring_events[0].end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should recurrence stop? (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].location"><i class="material-icons">geo-alt</i> Location</label>
<input name="recurring_events[0].location" id="recurring_events[0].location" class="validate" value="Conference Room A" placeholder="Conference Room A" type="text" />
<div class="help-text">Where will this event take place?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[0].send_reminder"><i class="material-icons">notifications</i> Send Reminder</label>
<input name="recurring_events[0].send_reminder" id="recurring_events[0].send_reminder" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Send notification before event?</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="π {event_name} ({recurrence_pattern})"
data-field-name="recurring_events">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#recurring_events_item_1_content"
aria-expanded="false"
aria-controls="recurring_events_item_1_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π Monthly All Hands (monthly)
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="recurring_events"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="recurring_events_item_1_content">
<div class="card-body"><div class="row">
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].event_name"><i class="material-icons">event</i> Event Name</label>
<input name="recurring_events[1].event_name" id="recurring_events[1].event_name" class="validate" value="Monthly All Hands" maxlength="200" placeholder="Weekly Team Meeting" type="text" />
<div class="help-text">Name of the recurring event</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[1].event_type" id="recurring_events[1].event_type" class="browser-default"><option value="meeting" selected>π€ Meeting</option>
<option value="reminder">β° Reminder</option>
<option value="deadline">π
Deadline</option>
<option value="birthday">π Birthday</option>
<option value="anniversary">π Anniversary</option>
<option value="other">π Other</option></select>
<label class="md-floating-label" for="recurring_events[1].event_type">Event Type</label>
<div class="md-help-text">Type of event</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].start_date"><i class="material-icons">calendar-check</i> Start Date</label>
<div class="birthdate-input-group"><input name="recurring_events[1].start_date" id="recurring_events[1].start_date" class="validate" value="2024-01-15" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[1].start_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[1].start_date');
const ageDisplay = document.getElementById('recurring_events[1].start_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When does this event start?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].start_time"><i class="material-icons">schedule</i> Start Time</label>
<input name="recurring_events[1].start_time" id="recurring_events[1].start_time" class="validate" value="14:00" step="60" type="time" />
<div class="help-text">Event start time (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].duration_minutes"><i class="material-icons">hourglass</i> Duration (minutes)</label>
<input name="recurring_events[1].duration_minutes" id="recurring_events[1].duration_minutes" class="validate" value="90" min="15" max="1440" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">How long is the event?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="recurring_events[1].recurrence_pattern" id="recurring_events[1].recurrence_pattern" class="browser-default"><option value="daily">π Daily</option>
<option value="weekly">π
Weekly</option>
<option value="biweekly">π
π
Bi-weekly</option>
<option value="monthly" selected>π Monthly</option>
<option value="yearly">ποΈ Yearly</option></select>
<label class="md-floating-label" for="recurring_events[1].recurrence_pattern">Recurrence Pattern</label>
<div class="md-help-text">How often does this repeat?</div>
</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].end_date">End Date</label>
<div class="birthdate-input-group"><input name="recurring_events[1].end_date" id="recurring_events[1].end_date" class="validate" max="2026-03-07" min="1876-01-01" type="date" />
<div class="age-display" id="recurring_events[1].end_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
const birthdateField = document.getElementById('recurring_events[1].end_date');
const ageDisplay = document.getElementById('recurring_events[1].end_date_age');
function calculateAge() {
if (birthdateField.value && ageDisplay) {
const birthDate = new Date(birthdateField.value);
const today = new Date();
let age = today.getFullYear() - birthDate.getFullYear();
const monthDiff = today.getMonth() - birthDate.getMonth();
if (monthDiff < 0 || (monthDiff === 0 && today.getDate() < birthDate.getDate())) {
age--;
}
ageDisplay.textContent = age >= 0 ? `Age: ${age} years` : '';
}
}
if (birthdateField) {
birthdateField.addEventListener('change', calculateAge);
calculateAge(); // Calculate on load if value is set
}
});
</script>
</div>
<div class="help-text">When should recurrence stop? (optional)</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].location"><i class="material-icons">geo-alt</i> Location</label>
<input name="recurring_events[1].location" id="recurring_events[1].location" class="validate" value="Main Auditorium" placeholder="Conference Room A" type="text" />
<div class="help-text">Where will this event take place?</div></div>
</div>
<div class="col-lg-4 col-md-6">
<div class="input-field col s12"><label for="recurring_events[1].send_reminder"><i class="material-icons">notifications</i> Send Reminder</label>
<input name="recurring_events[1].send_reminder" id="recurring_events[1].send_reminder" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Send notification before event?</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="recurring_events">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Set up recurring events and reminders</p>
</section>
</div>
</div>
</div>
</div>
<div id="tab-5"
class="tab-panel"
role="tabpanel"
style="display: none;"
aria-hidden="true">
<div class="vertical-layout vertical-layout" style="display: flex; flex-direction: column; gap: 1rem; align-items: stretch">
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">badge</span>
<div class="md-input-wrapper">
<input type="text"
name="username"
id="username"
class="md-input"
value="jsmith"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="username">Username *</label>
</div>
</div>
<div class="md-help-text">Your unique username</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<svg class="material-icons md-icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z" /></svg>
<div class="md-input-wrapper">
<input type="text"
name="display_name"
id="display_name"
class="md-input"
value="John Smith"
placeholder=" " required="required" aria-required="true">
<label class="md-floating-label" for="display_name">Display Name *</label>
</div>
</div>
<div class="md-help-text">Name shown to other users</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">translate</span>
<div class="md-input-wrapper">
<select name="language"
id="language"
class="md-select" >
<option value=""></option>
<option value="en" selected="selected">πΊπΈ English</option>
<option value="es">πͺπΈ EspaΓ±ol</option>
<option value="fr">π«π· FranΓ§ais</option>
<option value="de">π©πͺ Deutsch</option>
<option value="ja">π―π΅ ζ₯ζ¬θͺ</option>
<option value="zh">π¨π³ δΈζ</option>
</select>
<label class="md-floating-label" for="language">Language</label>
</div>
</div>
<div class="md-help-text">Preferred language</div>
</div>
<div class="md-field">
<div class="md-input-wrapper">
<input type="radio"
name="ui_theme"
id="ui_theme"
class="md-input"
value="auto"
placeholder=" " >
<label class="md-floating-label" for="ui_theme">UI Theme</label>
</div>
<div class="md-help-text">Interface theme preference</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">fonts</span>
<div class="md-input-wrapper">
<input type="range"
name="font_size"
id="font_size"
class="md-input"
value="16"
placeholder=" " >
<label class="md-floating-label" for="font_size">Font Size (px)</label>
</div>
</div>
<div class="md-help-text">Adjust text size</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="accessibility_mode"
id="accessibility_mode"
class="md-checkbox"
value="true"
>
<label for="accessibility_mode" class="md-checkbox-label">Accessibility Mode</label>
</div>
<div class="md-help-text">Enable high-contrast and screen reader support</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="compact_view"
id="compact_view"
class="md-checkbox"
value="true"
>
<label for="compact_view" class="md-checkbox-label">Compact View</label>
</div>
<div class="md-help-text">Use denser layout to show more content</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="show_tutorials"
id="show_tutorials"
class="md-checkbox"
value="true"
checked="checked" >
<label for="show_tutorials" class="md-checkbox-label">Show Tutorial Tooltips</label>
</div>
<div class="md-help-text">Display helpful tips for new features</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="auto_save"
id="auto_save"
class="md-checkbox"
value="true"
checked="checked" >
<label for="auto_save" class="md-checkbox-label">Auto-Save</label>
</div>
<div class="md-help-text">Automatically save changes</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">schedule</span>
<div class="md-input-wrapper">
<input type="number"
name="auto_save_interval"
id="auto_save_interval"
class="md-input"
value="5"
placeholder=" " >
<label class="md-floating-label" for="auto_save_interval">Auto-Save Interval (minutes)</label>
</div>
</div>
<div class="md-help-text">How often to auto-save</div>
</div>
<div class="md-field">
<div class="md-model-list-container">
<section class="md-model-list-wrapper">
<label class="md-field-label">Notification Preferences</label>
<div class="model-list-container md-model-list-container" data-field-name="notification_preferences" data-min-items="0" data-max-items="20">
<div class="model-list-items md-model-list-items" id="notification_preferences-items">
<template class="model-list-item-template">
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {event_category} via {notification_type}"
data-field-name="notification_preferences">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#notification_preferences_item_0_content"
aria-expanded="false"
aria-controls="notification_preferences_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
Item #1
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="notification_preferences"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="notification_preferences_item_0_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].notification_type" id="notification_preferences[0].notification_type" class="browser-default"><option value="email">π§ Email</option>
<option value="sms">π± SMS</option>
<option value="push">π Push Notification</option>
<option value="in_app">π¬ In-App</option></select>
<label class="md-floating-label" for="notification_preferences[0].notification_type">Notification Type</label>
<div class="md-help-text">Type of notification</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].event_category" id="notification_preferences[0].event_category" class="browser-default"><option value="security">π Security Alerts</option>
<option value="updates">π° Product Updates</option>
<option value="marketing">π£ Marketing</option>
<option value="reminders">β° Reminders</option>
<option value="social">π₯ Social Activity</option></select>
<label class="md-floating-label" for="notification_preferences[0].event_category">Event Category</label>
<div class="md-help-text">What triggers this notification?</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="notification_preferences[0].enabled"><i class="material-icons">notifications</i> Enabled</label>
<input name="notification_preferences[0].enabled" id="notification_preferences[0].enabled" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Receive these notifications?</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].frequency" id="notification_preferences[0].frequency" class="browser-default"><option value="realtime">β‘ Real-time</option>
<option value="hourly">π Hourly Digest</option>
<option value="daily">π
Daily Digest</option>
<option value="weekly">π Weekly Digest</option></select>
<label class="md-floating-label" for="notification_preferences[0].frequency">Frequency</label>
<div class="md-help-text">How often to receive notifications?</div>
</div></div>
</div></div>
</div>
</div>
</div></template>
<div class="model-list-item card border mb-3"
data-index="0"
data-title-template="π {event_category} via {notification_type}"
data-field-name="notification_preferences">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#notification_preferences_item_0_content"
aria-expanded="false"
aria-controls="notification_preferences_item_0_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π security via email
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="0"
data-field-name="notification_preferences"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="notification_preferences_item_0_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].notification_type" id="notification_preferences[0].notification_type" class="browser-default"><option value="email" selected>π§ Email</option>
<option value="sms">π± SMS</option>
<option value="push">π Push Notification</option>
<option value="in_app">π¬ In-App</option></select>
<label class="md-floating-label" for="notification_preferences[0].notification_type">Notification Type</label>
<div class="md-help-text">Type of notification</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].event_category" id="notification_preferences[0].event_category" class="browser-default"><option value="security" selected>π Security Alerts</option>
<option value="updates">π° Product Updates</option>
<option value="marketing">π£ Marketing</option>
<option value="reminders">β° Reminders</option>
<option value="social">π₯ Social Activity</option></select>
<label class="md-floating-label" for="notification_preferences[0].event_category">Event Category</label>
<div class="md-help-text">What triggers this notification?</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="notification_preferences[0].enabled"><i class="material-icons">notifications</i> Enabled</label>
<input name="notification_preferences[0].enabled" id="notification_preferences[0].enabled" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Receive these notifications?</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[0].frequency" id="notification_preferences[0].frequency" class="browser-default"><option value="realtime" selected>β‘ Real-time</option>
<option value="hourly">π Hourly Digest</option>
<option value="daily">π
Daily Digest</option>
<option value="weekly">π Weekly Digest</option></select>
<label class="md-floating-label" for="notification_preferences[0].frequency">Frequency</label>
<div class="md-help-text">How often to receive notifications?</div>
</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="1"
data-title-template="π {event_category} via {notification_type}"
data-field-name="notification_preferences">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#notification_preferences_item_1_content"
aria-expanded="false"
aria-controls="notification_preferences_item_1_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π updates via push
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="1"
data-field-name="notification_preferences"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="notification_preferences_item_1_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[1].notification_type" id="notification_preferences[1].notification_type" class="browser-default"><option value="email">π§ Email</option>
<option value="sms">π± SMS</option>
<option value="push" selected>π Push Notification</option>
<option value="in_app">π¬ In-App</option></select>
<label class="md-floating-label" for="notification_preferences[1].notification_type">Notification Type</label>
<div class="md-help-text">Type of notification</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[1].event_category" id="notification_preferences[1].event_category" class="browser-default"><option value="security">π Security Alerts</option>
<option value="updates" selected>π° Product Updates</option>
<option value="marketing">π£ Marketing</option>
<option value="reminders">β° Reminders</option>
<option value="social">π₯ Social Activity</option></select>
<label class="md-floating-label" for="notification_preferences[1].event_category">Event Category</label>
<div class="md-help-text">What triggers this notification?</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="notification_preferences[1].enabled"><i class="material-icons">notifications</i> Enabled</label>
<input name="notification_preferences[1].enabled" id="notification_preferences[1].enabled" class="filled-in" checked="checked" value="1" type="checkbox" />
<div class="help-text">Receive these notifications?</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[1].frequency" id="notification_preferences[1].frequency" class="browser-default"><option value="realtime">β‘ Real-time</option>
<option value="hourly">π Hourly Digest</option>
<option value="daily" selected>π
Daily Digest</option>
<option value="weekly">π Weekly Digest</option></select>
<label class="md-floating-label" for="notification_preferences[1].frequency">Frequency</label>
<div class="md-help-text">How often to receive notifications?</div>
</div></div>
</div></div>
</div>
</div>
</div>
<div class="model-list-item card border mb-3"
data-index="2"
data-title-template="π {event_category} via {notification_type}"
data-field-name="notification_preferences">
<div class="card-header d-flex justify-content-between align-items-center">
<h6 class="mb-0">
<button class="btn btn-link text-decoration-none p-0 text-start"
type="button"
data-bs-toggle="collapse"
data-bs-target="#notification_preferences_item_2_content"
aria-expanded="false"
aria-controls="notification_preferences_item_2_content">
<i class="bi bi-chevron-right me-2"></i>
<i class="bi bi-card-list me-2"></i>
π marketing via email
</button>
</h6>
<button type="button"
class="btn btn-outline-danger btn-sm remove-item-btn"
data-index="2"
data-field-name="notification_preferences"
title="Remove this item">
<i class="bi bi-trash"></i>
</button>
</div>
<div class="collapse collapse show" id="notification_preferences_item_2_content">
<div class="card-body"><div class="row">
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[2].notification_type" id="notification_preferences[2].notification_type" class="browser-default"><option value="email" selected>π§ Email</option>
<option value="sms">π± SMS</option>
<option value="push">π Push Notification</option>
<option value="in_app">π¬ In-App</option></select>
<label class="md-floating-label" for="notification_preferences[2].notification_type">Notification Type</label>
<div class="md-help-text">Type of notification</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[2].event_category" id="notification_preferences[2].event_category" class="browser-default"><option value="security">π Security Alerts</option>
<option value="updates">π° Product Updates</option>
<option value="marketing" selected>π£ Marketing</option>
<option value="reminders">β° Reminders</option>
<option value="social">π₯ Social Activity</option></select>
<label class="md-floating-label" for="notification_preferences[2].event_category">Event Category</label>
<div class="md-help-text">What triggers this notification?</div>
</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><label for="notification_preferences[2].enabled"><i class="material-icons">notifications</i> Enabled</label>
<input name="notification_preferences[2].enabled" id="notification_preferences[2].enabled" class="filled-in" value="1" type="checkbox" />
<div class="help-text">Receive these notifications?</div></div>
</div>
<div class="col-md-6">
<div class="input-field col s12"><div class="md-field">
<select name="notification_preferences[2].frequency" id="notification_preferences[2].frequency" class="browser-default"><option value="realtime">β‘ Real-time</option>
<option value="hourly">π Hourly Digest</option>
<option value="daily">π
Daily Digest</option>
<option value="weekly" selected>π Weekly Digest</option></select>
<label class="md-floating-label" for="notification_preferences[2].frequency">Frequency</label>
<div class="md-help-text">How often to receive notifications?</div>
</div></div>
</div></div>
</div>
</div>
</div>
</div>
<div class="md-model-list-actions">
<button type="button" class="md-button md-button-tonal add-item-btn" data-target="notification_preferences">
<svg class="material-icons md-button__icon" viewBox="0 0 24 24" focusable="false" aria-hidden="true"><path d="M19 13H13v6h-2v-6H5v-2h6V5h2v6h6v2z" /></svg>
<span class="md-button__label">Add Item</span>
</button>
</div>
</div>
<p class="md-help-text">Customize notification settings</p>
</section>
</div>
</div>
<div class="md-field">
<div class="md-checkbox-container">
<input type="checkbox"
name="two_factor_enabled"
id="two_factor_enabled"
class="md-checkbox"
value="true"
checked="checked" >
<label for="two_factor_enabled" class="md-checkbox-label">Two-Factor Authentication</label>
</div>
<div class="md-help-text">Enable 2FA for enhanced security</div>
</div>
<div class="md-field">
<div class="md-field-with-icon">
<span class="material-icons md-icon">stopwatch</span>
<div class="md-input-wrapper">
<select name="session_timeout"
id="session_timeout"
class="md-select" >
<option value=""></option>
<option value="15">15 minutes</option>
<option value="30">30 minutes</option>
<option value="60" selected="selected">1 hour</option>
<option value="120">2 hours</option>
<option value="480">8 hours</option>
<option value="1440">24 hours</option>
</select>
<label class="md-floating-label" for="session_timeout">Session Timeout (minutes)</label>
</div>
</div>
<div class="md-help-text">Auto-logout after inactivity</div>
</div>
</div>
</div>
</div>
</div>
<script>
function switchTab(tabId, buttonElement) {
const tabLayout = buttonElement.closest('.tab-layout');
const panels = tabLayout.querySelectorAll('.tab-panel');
const buttons = tabLayout.querySelectorAll('.tab-button');
panels.forEach(panel => {
panel.style.display = 'none';
panel.setAttribute('aria-hidden', 'true');
});
buttons.forEach(button => {
button.classList.remove('active');
button.setAttribute('aria-selected', 'false');
});
const selectedPanel = document.getElementById(tabId);
if (selectedPanel) {
selectedPanel.style.display = 'block';
selectedPanel.setAttribute('aria-hidden', 'false');
}
buttonElement.classList.add('active');
buttonElement.setAttribute('aria-selected', 'true');
}
</script>
<style>
.tab-layout .tab-navigation {
border-bottom: 2px solid #e0e0e0;
margin-bottom: 1rem;
}
.tab-layout .tab-button {
background: none;
border: none;
padding: 0.5rem 1rem;
cursor: pointer;
border-bottom: 2px solid transparent;
margin-right: 0.5rem;
}
.tab-layout .tab-button:hover {
background-color: #f5f5f5;
}
.tab-layout .tab-button.active {
border-bottom-color: #007bff;
color: #007bff;
}
.tab-layout .tab-panel {
display: none;
}
.tab-layout .tab-panel.active {
display: block;
}
</style>
</div>
</div>
</section>
<div class="md-field">
<button type="submit" class="md-button md-button-filled">Submit</button>
</div>
<div style="margin-top: 0.5rem; font-size: 0.75rem; color: #6c757d; text-align: right;">Rendered in 0.056s</div>
</form>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// Material Design 3 form enhancements
// Floating label functionality for outlined text fields
function initializeFloatingLabels() {
const textFields = document.querySelectorAll('.md-input, .md-textarea, .md-select');
textFields.forEach(input => {
const label = input.nextElementSibling;
if (label && label.classList.contains('md-floating-label')) {
// Check initial state
function updateLabelState() {
const hasValue = input.value && input.value.trim() !== '';
const isFocused = document.activeElement === input;
if (hasValue || isFocused) {
label.style.transform = 'translateY(-28px) scale(0.75)';
label.style.color = isFocused ? '#6750a4' : '#49454f';
label.style.background = '#ffffff';
label.style.padding = '0 4px';
} else {
label.style.transform = 'translateY(0) scale(1)';
label.style.color = '#49454f';
label.style.background = 'transparent';
label.style.padding = '0';
}
}
// Set up event listeners
input.addEventListener('focus', updateLabelState);
input.addEventListener('blur', updateLabelState);
input.addEventListener('input', updateLabelState);
// Initial state check
updateLabelState();
}
});
}
// Enhanced focus and blur effects
const inputs = document.querySelectorAll('.md-input, .md-select, .md-textarea');
inputs.forEach(input => {
input.addEventListener('focus', function() {
this.style.transform = 'scale(1.01)';
this.style.transition = 'all 0.15s cubic-bezier(0.4, 0, 0.2, 1)';
});
input.addEventListener('blur', function() {
this.style.transform = 'scale(1)';
});
});
// Checkbox interactions with Material Design ripple effect
const checkboxes = document.querySelectorAll('.md-checkbox');
checkboxes.forEach(checkbox => {
checkbox.addEventListener('change', function() {
const container = this.closest('.md-checkbox-container');
if (this.checked) {
// Create ripple effect
const ripple = document.createElement('div');
ripple.style.position = 'absolute';
ripple.style.borderRadius = '50%';
ripple.style.background = 'rgba(103, 80, 164, 0.3)';
ripple.style.width = '40px';
ripple.style.height = '40px';
ripple.style.left = '-11px';
ripple.style.top = '-11px';
ripple.style.pointerEvents = 'none';
ripple.style.transform = 'scale(0)';
ripple.style.transition = 'transform 0.3s cubic-bezier(0.4, 0, 0.2, 1)';
this.style.position = 'relative';
this.appendChild(ripple);
// Animate ripple
setTimeout(() => {
ripple.style.transform = 'scale(1)';
setTimeout(() => {
ripple.style.opacity = '0';
setTimeout(() => {
if (ripple.parentNode) {
ripple.parentNode.removeChild(ripple);
}
}, 300);
}, 200);
}, 10);
}
});
});
// Enhanced form validation with Material Design styling
const form = document.querySelector('.md-form');
if (form) {
form.addEventListener('submit', function(e) {
const requiredInputs = this.querySelectorAll('input[required], select[required], textarea[required]');
let hasErrors = false;
requiredInputs.forEach(input => {
const value = input.type === 'checkbox' ? input.checked : input.value.trim();
const fieldContainer = input.closest('.md-field');
if (!value) {
input.classList.add('error');
// Add error styling to label
const label = input.nextElementSibling;
if (label && label.classList.contains('md-floating-label')) {
label.style.color = '#ba1a1a';
}
// Create or update error message
let errorDiv = fieldContainer.querySelector('.md-error-text');
if (!errorDiv) {
errorDiv = document.createElement('div');
errorDiv.className = 'md-error-text';
fieldContainer.appendChild(errorDiv);
}
errorDiv.textContent = 'This field is required';
hasErrors = true;
} else {
input.classList.remove('error');
// Remove error styling from label
const label = input.nextElementSibling;
if (label && label.classList.contains('md-floating-label')) {
label.style.color = input === document.activeElement ? '#6750a4' : '#49454f';
}
// Remove error message if it was dynamically added
const errorDiv = fieldContainer.querySelector('.md-error-text');
if (errorDiv && errorDiv.textContent === 'This field is required') {
errorDiv.remove();
}
}
});
if (hasErrors) {
e.preventDefault();
// Scroll to first error with smooth animation
const firstError = this.querySelector('.error');
if (firstError) {
firstError.scrollIntoView({
behavior: 'smooth',
block: 'center',
inline: 'nearest'
});
// Focus the field for better UX
setTimeout(() => {
firstError.focus();
}, 500);
}
}
});
// Real-time validation for better UX
const allInputs = form.querySelectorAll('input, select, textarea');
allInputs.forEach(input => {
input.addEventListener('blur', function() {
if (this.hasAttribute('required')) {
const value = this.type === 'checkbox' ? this.checked : this.value.trim();
const fieldContainer = this.closest('.md-field');
if (!value) {
this.classList.add('error');
const label = this.nextElementSibling;
if (label && label.classList.contains('md-floating-label')) {
label.style.color = '#ba1a1a';
}
} else {
this.classList.remove('error');
const label = this.nextElementSibling;
if (label && label.classList.contains('md-floating-label')) {
label.style.color = '#49454f';
}
}
}
});
});
}
# Initialize floating labels
initializeFloatingLabels();
# Reinitialize for dynamically added content
window.reinitializeMaterialForms = function() {
initializeFloatingLabels();
};
});
</script>
<script>
(function() {
document.addEventListener('DOMContentLoaded', function() {
// Prevent Enter key from submitting forms unless on submit button
const forms = document.querySelectorAll('form.md-form, form.pydantic-form');
forms.forEach(function(form) {
form.addEventListener('keydown', function(e) {
// Check if Enter key is pressed
if (e.key === 'Enter' || e.keyCode === 13) {
const target = e.target;
// Allow Enter in textareas (for multi-line input)
if (target.tagName === 'TEXTAREA') {
return;
}
// Allow Enter on submit buttons
if (target.tagName === 'BUTTON' && target.type === 'submit') {
return;
}
// Allow Enter on input type="submit"
if (target.tagName === 'INPUT' && target.type === 'submit') {
return;
}
// Prevent form submission for all other cases
e.preventDefault();
return false;
}
});
});
});
})();
</script>
class ComprehensiveTabbedForm(FormModel):
"""
Wrapper form model containing the comprehensive tabbed layout.
This form demonstrates:
- 6 major tabs covering all form capabilities
- Tab 1: Organization - 5 levels of nesting
- Tab 2: Kitchen Sink - ALL input types
- Tab 3: Contact Management - Nested contacts
- Tab 4: Scheduling - Date/time management
- Tab 5: Media & Files - Color themes and media
- Tab 6: Settings - Preferences and notifications
"""
comprehensive_tabs: ComprehensiveTabbed = FormField(
default_factory=ComprehensiveTabbed,
title="Complete Feature Showcase",
input_type="layout",
help_text="Explore all 6 tabs to see every feature of Pydantic SchemaForms"
)
{
"description": "Wrapper form model containing the comprehensive tabbed layout.\n\nThis form demonstrates:\n- 6 major tabs covering all form capabilities\n- Tab 1: Organization - 5 levels of nesting\n- Tab 2: Kitchen Sink - ALL input types\n- Tab 3: Contact Management - Nested contacts\n- Tab 4: Scheduling - Date/time management\n- Tab 5: Media & Files - Color themes and media\n- Tab 6: Settings - Preferences and notifications",
"properties": {
"comprehensive_tabs": {
"autofocus": false,
"description": "Explore all 6 tabs to see every feature of Pydantic SchemaForms",
"disabled": false,
"help_text": "Explore all 6 tabs to see every feature of Pydantic SchemaForms",
"input_type": "layout",
"readonly": false,
"title": "Complete Feature Showcase"
}
},
"title": "ComprehensiveTabbedForm",
"type": "object"
}{
"comprehensive_tabs": {
"required": false
}
}{
"errors": {},
"data": {
"organization": {
"company_name": "TechCorp International",
"company_code": "TECH-2024",
"headquarters_address": "123 Innovation Drive, San Francisco, CA 94105",
"ceo_name": "Jane Smith",
"ceo_email": "jane.smith@techcorp.com",
"founded_date": "2010-01-15",
"employee_count": 5000,
"annual_revenue": 500000000.0,
"website": "https://www.techcorp.com",
"departments": [
{
"name": "Engineering",
"description": "Software development and infrastructure",
"department_head": "John Doe",
"head_email": "john.doe@techcorp.com",
"established_date": "2010-06-01",
"budget": 50000000.0,
"teams": [
{
"name": "Backend Services",
"description": "API and database services",
"team_lead": "Alice Johnson",
"formed_date": "2015-03-01",
"members": [
{
"name": "Bob Wilson",
"email": "bob.wilson@techcorp.com",
"role": "Senior Backend Developer",
"hire_date": "2016-01-15",
"experience_years": 12,
"manager": "Alice Johnson",
"certifications": [
{
"name": "AWS Solutions Architect Professional",
"issuer": "Amazon Web Services",
"issue_date": "2022-05-01",
"expiry_date": "2025-05-01",
"credential_id": "AWS-12345",
"credential_url": "https://aws.amazon.com/verification/12345"
},
{
"name": "Certified Kubernetes Administrator",
"issuer": "Cloud Native Computing Foundation",
"issue_date": "2023-01-15",
"expiry_date": "2026-01-15",
"credential_id": "CKA-67890",
"credential_url": "https://cncf.io/verify/67890"
}
]
}
]
}
],
"projects": [
{
"name": "Microservices Migration",
"description": "Migrate monolithic application to microservices architecture",
"status": "in_progress",
"start_date": "2024-01-01",
"target_end_date": "2024-12-31",
"budget": 2000000.0,
"project_manager": "Carol Lee",
"tasks": [
{
"title": "Refactor Auth Service",
"description": "Extract authentication into standalone microservice",
"priority": "high",
"status": "in_progress",
"start_date": "2024-02-01",
"due_date": "2024-03-31",
"assigned_to": "Bob Wilson",
"estimated_hours": 120.0,
"subtasks": [
{
"title": "Create service skeleton",
"description": "Set up FastAPI project structure",
"assigned_to": "Bob Wilson",
"estimated_hours": 16.0,
"status": "completed"
}
]
}
]
}
]
}
]
},
"kitchen_sink": {
"text_input": "Sample text value",
"email_input": "user@example.com",
"password_input": "SecurePass123!",
"search_input": "search query",
"url_input": "https://example.com",
"tel_input": "+1-555-987-6543",
"textarea_input": "This is a multi-line\ntext area\nwith sample content.",
"number_input": 42,
"decimal_input": 3.14159,
"range_input": 75,
"select_input": "option3",
"radio_input": "large",
"multiselect_input": [
"python",
"typescript",
"rust"
],
"checkbox_input": true,
"toggle_input": false,
"date_input": "2024-06-15",
"time_input": "14:30",
"datetime_input": "2024-06-15T14:30:00",
"color_input": "#e74c3c",
"hidden_input": "hidden_secret_value"
},
"contacts": {
"first_name": "John",
"last_name": "Smith",
"email": "john.smith@example.com",
"company": "Acme Corporation",
"job_title": "Senior Software Engineer",
"birth_date": "1985-04-12",
"phone_numbers": [
{
"phone_type": "mobile",
"number": "+1 (555) 123-4567",
"is_primary": true
},
{
"phone_type": "work",
"number": "+1 (555) 987-6543",
"is_primary": false
}
],
"addresses": [
{
"address_type": "home",
"street_line1": "123 Main Street",
"street_line2": "Apt 4B",
"city": "San Francisco",
"state": "CA",
"postal_code": "94105",
"country": "US"
},
{
"address_type": "work",
"street_line1": "456 Corporate Blvd",
"street_line2": "Suite 200",
"city": "Palo Alto",
"state": "CA",
"postal_code": "94301",
"country": "US"
}
],
"notes": "Prefers email communication. Available Monday-Friday 9am-5pm PST."
},
"scheduling": {
"calendar_name": "Work Calendar",
"timezone": "America/Los_Angeles",
"default_event_duration": 60,
"work_start_time": "09:00",
"work_end_time": "17:00",
"weekend_days": [
"saturday",
"sunday"
],
"recurring_events": [
{
"event_name": "Weekly Team Standup",
"event_type": "meeting",
"start_date": "2024-01-08",
"start_time": "10:00",
"duration_minutes": 30,
"recurrence_pattern": "weekly",
"end_date": "2024-12-31",
"location": "Conference Room A",
"send_reminder": true
},
{
"event_name": "Monthly All Hands",
"event_type": "meeting",
"start_date": "2024-01-15",
"start_time": "14:00",
"duration_minutes": 90,
"recurrence_pattern": "monthly",
"end_date": null,
"location": "Main Auditorium",
"send_reminder": true
}
]
},
"media": {
"profile_picture_url": "https://example.com/avatars/user123.jpg",
"background_image_url": "https://example.com/backgrounds/abstract.jpg",
"favicon_color": "#3498db",
"enable_animations": true,
"enable_sound": false,
"video_quality": "1080p",
"autoplay_videos": false,
"color_themes": [
{
"theme_name": "Ocean Blue",
"primary_color": "#3498db",
"secondary_color": "#2ecc71",
"accent_color": "#e74c3c",
"background_color": "#ffffff",
"text_color": "#2c3e50",
"is_default": true
},
{
"theme_name": "Dark Mode",
"primary_color": "#1a1a1a",
"secondary_color": "#34495e",
"accent_color": "#f39c12",
"background_color": "#0a0a0a",
"text_color": "#ecf0f1",
"is_default": false
}
],
"max_upload_size_mb": 25
},
"settings": {
"username": "jsmith",
"display_name": "John Smith",
"language": "en",
"ui_theme": "auto",
"font_size": 16,
"accessibility_mode": false,
"compact_view": false,
"show_tutorials": true,
"auto_save": true,
"auto_save_interval": 5,
"notification_preferences": [
{
"notification_type": "email",
"event_category": "security",
"enabled": true,
"frequency": "realtime"
},
{
"notification_type": "push",
"event_category": "updates",
"enabled": true,
"frequency": "daily"
},
{
"notification_type": "email",
"event_category": "marketing",
"enabled": false,
"frequency": "weekly"
}
],
"two_factor_enabled": true,
"session_timeout": 60
},
"comprehensive_tabs": "<examples.nested_forms_example.ComprehensiveTabbed object at 0x7b87d8449a90>"
}
}