Organization (Shared Models) - 5 Levels Deep 🏢

description Organization (Shared Models) - 5 Levels Deep 🏢

Reusable organization-only example powered by models in shared_models.py. Async

building

Company Name *

Legal name of the company

code

Company Code *

Unique identifier for this company

map-marker

Headquarters Address *

Main office address

star

CEO Name *

Chief Executive Officer

CEO Email *

Email address of the CEO

Founded Date *

When was the company founded?

people

Total Employees

Total number of employees

cash-coin

Annual Revenue ($)

Company annual revenue in USD

public

Company Website

Company website URL

Company Departments

Department Name

Name of the department

Department Description

Description of department responsibilities

Department Head

Who leads this department?

Department Head Email

Contact email for the department head

Established Date

When was this department established?

Annual Budget ($)

Department annual budget in USD

Teams

Team Name

Name of the team

Team Description

Brief description of the team's responsibilities

Team Lead Name

Who leads this team?

Formation Date

When was this team formed?

Team Members

Member Name

Full name of the team member

Email Address

Contact email address

Role

Job title or role

Hire Date

When did this person join?

Years of Experience

Total professional experience in years

Manager Name

Who supervises this team member?

Certifications

Certification Name

Name of the certification

Issuing Organization

Organization that issued the certification

Issue Date

When was this certification issued?

Expiry Date

When does this certification expire? (Leave empty if no expiry)

Credential ID

Unique ID for credential verification

Credential URL

Link to verify the credential

Professional certifications and credentials

Add team members and their certifications

Teams within this department and their members

Active Projects

Project Name

Name of the project

Project Description

What is this project about?

flag

Project Status

Current project status

Project Start Date

When does this project start?

Target End Date

When should this project be completed?

Budget ($)

Project budget in USD

Project Manager

Who is managing this project?

Project Tasks

Task Title

What is this task?

Task Description

Full description of what needs to be done

exclamation-circle

Priority Level

Task priority level

Task Status

Current task status

Start Date

When should this task start?

Due Date

When is this task due?

Assigned To

Who is responsible for this task?

Estimated Hours

Estimated time to complete (in hours)

Subtasks

Subtask Title

What is this subtask about?

Description

Additional details about this subtask

Assigned To

Who is responsible for this subtask?

Estimated Hours

Estimated time to complete

Status

Current status of the subtask

Break down this task into smaller subtasks

Add tasks with subtasks to organize project work

Projects managed by this department

Organize departments with teams, members, and projects

Rendered in 0.034s

Debug panel (development only) — 0.034s render

<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-shared?style=material"
      >
    
    
<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&#x27;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&#x27;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&#x27;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&#x27;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>
    <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 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.034s</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>


        <script>
        (function() {
            'use strict';

            // Ensure this runs after DOM is loaded
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initializeModelLists);
            } else {
                initializeModelLists();
            }

            function initializeModelLists() {
                // Add item functionality
                const addButtons = document.querySelectorAll('.add-item-btn');
                addButtons.forEach(button => {
                    if (!button.hasAttribute('data-initialized')) {
                        button.setAttribute('data-initialized', 'true');
                        button.addEventListener('click', handleAddItem);
                    }
                });

                // Remove item functionality - use direct event listeners
                const removeButtons = document.querySelectorAll('.remove-item-btn');
                removeButtons.forEach(button => {
                    if (!button.hasAttribute('data-initialized')) {
                        button.setAttribute('data-initialized', 'true');
                        button.addEventListener('click', handleRemoveItem);
                    }
                });

                // Also set up delegation for dynamically added buttons
                document.addEventListener('click', function(e) {
                    const button = e.target.closest && e.target.closest('.remove-item-btn');
                    if (!button) return;

                    // Always handle delegated remove clicks.
                    // Newly-added items are cloned and may inherit `data-initialized`,
                    // which would otherwise prevent the fallback from running.
                    handleRemoveItem.call(button, e);
                });
            }

            function handleAddItem(e) {
                e.preventDefault();
                e.stopPropagation();

                const fieldName = this.dataset.target;
                const container = document.querySelector(
                    `.model-list-container[data-field-name="${fieldName}"], .model-list-block[data-field-name="${fieldName}"]`
                );
                if (!container) return;

                const itemsContainer = container.querySelector('.model-list-items');
                const maxItems = parseInt(container.dataset.maxItems || '10');
                const currentItems = itemsContainer.querySelectorAll('.model-list-item').length;

                if (currentItems >= maxItems) {
                    alert(`Maximum ${maxItems} items allowed.`);
                    return;
                }

                addNewListItem(fieldName, currentItems);
                updateItemIndices(itemsContainer);
            }

            function handleRemoveItem(e) {
                e.preventDefault();
                e.stopPropagation();

                // When called via event delegation, e.currentTarget is the document.
                // Always resolve the actual remove button from the click target.
                const button = (e.target && e.target.closest && e.target.closest('.remove-item-btn')) || e.currentTarget || this;
                const item = button.closest('.model-list-item');
                if (!item) return;

                const container = item.closest('.model-list-container');
                if (!container) return;

                const minItems = parseInt(container.dataset.minItems || '0');
                const itemsContainer = container.querySelector('.model-list-items');
                const currentItems = itemsContainer.querySelectorAll('.model-list-item').length;

                if (currentItems <= minItems) {
                    alert(`Minimum ${minItems} items required.`);
                    return;
                }

                // Check if item has data
                const hasData = Array.from(item.querySelectorAll('input, select, textarea')).some(input => {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                        return input.checked;
                    }
                    return input.value && input.value.trim() !== '';
                });

                if (hasData) {
                    if (!confirm('Are you sure you want to remove this item? All data will be lost.')) {
                        return;
                    }
                }

                item.remove();
                updateItemIndices(itemsContainer);
            }

            // Update titles when input fields change
            document.addEventListener('input', function(e) {
                if (e.target.name && (e.target.name.includes('.name') || e.target.name.includes('.relationship'))) {
                    updateItemTitle(e.target);
                }
            });

            // Handle collapse icons
            document.addEventListener('click', function(e) {
                const collapseButton = e.target.closest('[data-bs-toggle="collapse"]');
                if (collapseButton) {
                    const icon = collapseButton.querySelector('.bi-chevron-down, .bi-chevron-right');
                    if (icon) {
                        setTimeout(() => {
                            const isExpanded = collapseButton.getAttribute('aria-expanded') === 'true';
                            icon.className = isExpanded ? 'bi bi-chevron-down me-2' : 'bi bi-chevron-right me-2';
                        }, 50);
                    }
                }
            });
        })();

        function addNewListItem(fieldName, index) {
            const container = document.querySelector(
                `.model-list-container[data-field-name="${fieldName}"], .model-list-block[data-field-name="${fieldName}"]`
            );
            const itemsContainer = container.querySelector('.model-list-items');

            // Prefer cloning an existing item (preserves any per-item chrome).
            // If the list is currently empty, fall back to a hidden <template>.
            let templateNode = itemsContainer.querySelector('.model-list-item');
            if (!templateNode) {
                const template = itemsContainer.querySelector('template.model-list-item-template');
                if (template && template.content && template.content.firstElementChild) {
                    templateNode = template.content.firstElementChild;
                }
            }

            if (templateNode) {
                const newItem = templateNode.cloneNode(true);

                // Clear all input values
                newItem.querySelectorAll('input, select, textarea').forEach(input => {
                    if (input.type === 'checkbox' || input.type === 'radio') {
                        input.checked = false;
                    } else {
                        input.value = '';
                    }
                });

                // Update data-index
                newItem.dataset.index = index;

                // Update field names and IDs
                updateFieldNames(newItem, fieldName, index);

                // Update collapse IDs
                updateCollapseIds(newItem, fieldName, index);

                // Expand the new item
                const collapseDiv = newItem.querySelector('.collapse');
                if (collapseDiv) {
                    collapseDiv.classList.add('show');
                }

                // Update collapse button aria-expanded
                const collapseButton = newItem.querySelector('[data-bs-toggle="collapse"]');
                if (collapseButton) {
                    collapseButton.setAttribute('aria-expanded', 'true');
                    const icon = collapseButton.querySelector('.bi-chevron-down, .bi-chevron-right');
                    if (icon) {
                        icon.className = 'bi bi-chevron-down me-2';
                    }
                }

                itemsContainer.appendChild(newItem);
            }
        }

        function updateItemIndices(container) {
            const items = container.querySelectorAll('.model-list-item');
            items.forEach((item, index) => {
                item.dataset.index = index;

                // Update field names first
                const fieldName = container.closest('.model-list-container').dataset.fieldName;
                updateFieldNames(item, fieldName, index);
                updateCollapseIds(item, fieldName, index);

                // Update title using the dynamic template
                updateItemTitleFromData(item, index);
            });
        }

        function updateFieldNames(item, fieldName, index) {
            item.querySelectorAll('input, select, textarea').forEach(input => {
                if (input.name) {
                    // Update name attribute to use correct index
                    input.name = input.name.replace(/\[\d+\]/, `[${index}]`);
                }
                if (input.id) {
                    // Update id attribute
                    input.id = input.id.replace(/\[\d+\]/, `[${index}]`);
                }
            });

            item.querySelectorAll('label').forEach(label => {
                if (label.getAttribute('for')) {
                    label.setAttribute('for', label.getAttribute('for').replace(/\[\d+\]/, `[${index}]`));
                }
            });
        }

        function updateCollapseIds(item, fieldName, index) {
            const collapseDiv = item.querySelector('.collapse');
            const collapseButton = item.querySelector('[data-bs-toggle="collapse"]');

            if (collapseDiv && collapseButton) {
                const newId = `${fieldName}_item_${index}_content`;
                collapseDiv.id = newId;
                collapseButton.setAttribute('data-bs-target', `#${newId}`);
                collapseButton.setAttribute('aria-controls', newId);
            }
        }

        function updateItemTitle(inputElement) {
            const item = inputElement.closest('.model-list-item');
            if (!item) return;

            updateItemTitleFromData(item);
        }

        function updateItemTitleFromData(item, forceIndex = null) {
            const index = forceIndex !== null ? forceIndex : parseInt(item.dataset.index);
            const titleTemplate = item.dataset.titleTemplate || 'Item #{index}';
            const titleElement = item.querySelector('h6 button, h6 span');

            if (!titleElement) return;

            // Extract current form data from the item
            const formData = { index: index + 1 };
            item.querySelectorAll('input, select, textarea').forEach(input => {
                if (input.name) {
                    // Extract field name (e.g., "pets[0].name" -> "name")
                    const fieldMatch = input.name.match(/\.([^.]+)$/);
                    if (fieldMatch) {
                        const fieldName = fieldMatch[1];
                        if (input.type === 'checkbox') {
                            formData[fieldName] = input.checked;
                        } else {
                            formData[fieldName] = input.value || '';
                        }
                    }
                }
            });

            // Generate title from template
            let newTitle;
            try {
                newTitle = titleTemplate.replace(/\{([^}]+)\}/g, (match, key) => {
                    return formData[key] || '';
                });
            } catch (e) {
                newTitle = `Item #${index + 1}`;
            }

            // Update the title while preserving icons
            const cardIcon = '<i class="bi bi-card-list me-2"></i>';
            if (titleElement.tagName === 'BUTTON') {
                const chevronIcon = titleElement.querySelector('.bi-chevron-down, .bi-chevron-right');
                const chevronHtml = chevronIcon ? chevronIcon.outerHTML : '<i class="bi bi-chevron-down me-2"></i>';
                titleElement.innerHTML = `${chevronHtml}${cardIcon}${newTitle}`;
            } else {
                titleElement.innerHTML = `${cardIcon}${newTitle}`;
            }
        }
        </script>

class CompanyOrganizationForm(FormModel):
    """
    Root company structure with 5 levels of nesting.

    This model demonstrates how SchemaForms can render deeply nested data by
    composing `model_list` fields across multiple `FormModel` classes:

    Company -> Department -> Team -> TeamMember -> Certification
                        -> Project -> Task -> Subtask
    """

    company_name: str = FormField(
        title="Company Name",
        input_type="text",
        placeholder="Enter company name",
        help_text="Legal name of the company",
        icon="building",
        min_length=2,
        max_length=200
    )

    company_code: str = FormField(
        title="Company Code",
        input_type="text",
        placeholder="e.g., ACME-2024",
        help_text="Unique identifier for this company",
        icon="code",
        min_length=2,
        max_length=50
    )

    headquarters_address: str = FormField(
        title="Headquarters Address",
        input_type="textarea",
        placeholder="Full address of headquarters",
        help_text="Main office address",
        icon="map-marker",
        max_length=500
    )

    ceo_name: str = FormField(
        title="CEO Name",
        input_type="text",
        placeholder="Name of the CEO",
        help_text="Chief Executive Officer",
        icon="star",
        max_length=100
    )

    ceo_email: EmailStr = FormField(
        title="CEO Email",
        input_type="email",
        placeholder="ceo@company.com",
        help_text="Email address of the CEO"
    )

    founded_date: date = FormField(
        title="Founded Date",
        input_type="date",
        help_text="When was the company founded?"
    )

    employee_count: int = FormField(
        0,
        title="Total Employees",
        input_type="number",
        help_text="Total number of employees",
        icon="people",
        min_value=1,
        max_value=1000000
    )

    annual_revenue: float = FormField(
        0.0,
        title="Annual Revenue ($)",
        input_type="number",
        help_text="Company annual revenue in USD",
        icon="cash-coin",
        min_value=0
    )

    website: Optional[str] = FormField(
        None,
        title="Company Website",
        input_type="text",
        placeholder="https://www.example.com",
        help_text="Company website URL",
        icon="globe",
        max_length=500
    )

    departments: List[Department] = FormField(
        default_factory=list,
        title="Company Departments",
        input_type="model_list",
        help_text="Organize departments with teams, members, and projects",
        icon="diagram-2",
        min_length=1,
        max_length=500,
        model_class=Department,
        add_button_text="🏢 Add Department",
        remove_button_text="Remove Department",
        collapsible_items=True,
        items_expanded=False,
        item_title_template="🏢 {name} (Head: {department_head})",
        section_design={
            "section_title": "Organizational Structure",
            "section_description": "Complete company hierarchy with departments, teams, members, and projects",
            "icon": "bi bi-diagram-2",
            "collapsible": True,
            "collapsed": False
        }
    )

    @field_validator('company_code')
    @classmethod
    def validate_code(cls, v):
        """Normalize and validate company code input for demonstration purposes."""
        if not v.replace('-', '').replace('_', '').isalnum():
            raise ValueError("Company code can only contain letters, numbers, hyphens, and underscores")
        return v.upper()

{
  "$defs": {
    "Certification": {
      "description": "Level 5: Individual certification credential.",
      "properties": {
        "name": {
          "autofocus": false,
          "description": "Name of the certification",
          "disabled": false,
          "help_text": "Name of the certification",
          "icon": "award",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "e.g., AWS Solutions Architect",
          "readonly": false,
          "title": "Certification Name",
          "type": "string"
        },
        "issuer": {
          "autofocus": false,
          "description": "Organization that issued the certification",
          "disabled": false,
          "help_text": "Organization that issued the certification",
          "icon": "building",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "e.g., Amazon Web Services",
          "readonly": false,
          "title": "Issuing Organization",
          "type": "string"
        },
        "issue_date": {
          "autofocus": false,
          "description": "When was this certification issued?",
          "disabled": false,
          "format": "date",
          "help_text": "When was this certification issued?",
          "input_type": "date",
          "readonly": false,
          "title": "Issue Date",
          "type": "string"
        },
        "expiry_date": {
          "anyOf": [
            {
              "format": "date",
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "When does this certification expire? (Leave empty if no expiry)",
          "disabled": false,
          "help_text": "When does this certification expire? (Leave empty if no expiry)",
          "input_type": "date",
          "readonly": false,
          "title": "Expiry Date"
        },
        "credential_id": {
          "anyOf": [
            {
              "maxLength": 100,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Unique ID for credential verification",
          "disabled": false,
          "help_text": "Unique ID for credential verification",
          "input_type": "text",
          "placeholder": "Optional credential identifier",
          "readonly": false,
          "title": "Credential ID"
        },
        "credential_url": {
          "anyOf": [
            {
              "maxLength": 500,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Link to verify the credential",
          "disabled": false,
          "help_text": "Link to verify the credential",
          "input_type": "text",
          "placeholder": "https://...",
          "readonly": false,
          "title": "Credential URL"
        }
      },
      "required": [
        "name",
        "issuer",
        "issue_date"
      ],
      "title": "Certification",
      "type": "object"
    },
    "Department": {
      "description": "Level 2: Department with teams (Level 3) and projects (Level 3).",
      "properties": {
        "name": {
          "autofocus": false,
          "description": "Name of the department",
          "disabled": false,
          "help_text": "Name of the department",
          "icon": "building",
          "input_type": "text",
          "maxLength": 100,
          "minLength": 2,
          "placeholder": "e.g., Engineering, Sales",
          "readonly": false,
          "title": "Department Name",
          "type": "string"
        },
        "description": {
          "anyOf": [
            {
              "maxLength": 1000,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Description of department responsibilities",
          "disabled": false,
          "help_text": "Description of department responsibilities",
          "input_type": "textarea",
          "placeholder": "What does this department do?",
          "readonly": false,
          "title": "Department Description"
        },
        "department_head": {
          "autofocus": false,
          "description": "Who leads this department?",
          "disabled": false,
          "help_text": "Who leads this department?",
          "icon": "crown",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "Head of department name",
          "readonly": false,
          "title": "Department Head",
          "type": "string"
        },
        "head_email": {
          "autofocus": false,
          "description": "Contact email for the department head",
          "disabled": false,
          "format": "email",
          "help_text": "Contact email for the department head",
          "input_type": "email",
          "placeholder": "head@company.com",
          "readonly": false,
          "title": "Department Head Email",
          "type": "string"
        },
        "established_date": {
          "autofocus": false,
          "description": "When was this department established?",
          "disabled": false,
          "format": "date",
          "help_text": "When was this department established?",
          "input_type": "date",
          "readonly": false,
          "title": "Established Date",
          "type": "string"
        },
        "budget": {
          "autofocus": false,
          "default": 0.0,
          "description": "Department annual budget in USD",
          "disabled": false,
          "help_text": "Department annual budget in USD",
          "icon": "cash-coin",
          "input_type": "number",
          "minimum": 0,
          "readonly": false,
          "title": "Annual Budget ($)",
          "type": "number"
        },
        "teams": {
          "add_button_text": "\ud83d\udc65 Add Team",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Teams within this department and their members",
          "disabled": false,
          "help_text": "Teams within this department and their members",
          "icon": "people",
          "input_type": "model_list",
          "item_title_template": "\ud83d\udc65 {name} (Lead: {team_lead})",
          "items": {
            "$ref": "#/$defs/Team"
          },
          "items_expanded": false,
          "maxItems": 50,
          "minItems": 1,
          "model_class": "examples.shared_models.Team",
          "readonly": false,
          "remove_button_text": "Remove Team",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-diagram-2",
            "section_description": "Organize teams with members and their certifications",
            "section_title": "Department Teams"
          },
          "title": "Teams",
          "type": "array"
        },
        "projects": {
          "add_button_text": "\ud83d\ude80 Add Project",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Projects managed by this department",
          "disabled": false,
          "help_text": "Projects managed by this department",
          "icon": "kanban",
          "input_type": "model_list",
          "item_title_template": "\ud83d\ude80 {name}",
          "items": {
            "$ref": "#/$defs/Project"
          },
          "items_expanded": false,
          "maxItems": 100,
          "minItems": 0,
          "model_class": "examples.shared_models.Project",
          "readonly": false,
          "remove_button_text": "Remove Project",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-kanban",
            "section_description": "Projects in progress with tasks and subtasks",
            "section_title": "Department Projects"
          },
          "title": "Active Projects",
          "type": "array"
        }
      },
      "required": [
        "name",
        "department_head",
        "head_email",
        "established_date"
      ],
      "title": "Department",
      "type": "object"
    },
    "Project": {
      "description": "Level 3: Project with tasks (Level 4) that have subtasks (Level 5).",
      "properties": {
        "name": {
          "autofocus": false,
          "description": "Name of the project",
          "disabled": false,
          "help_text": "Name of the project",
          "icon": "kanban",
          "input_type": "text",
          "maxLength": 200,
          "minLength": 3,
          "placeholder": "e.g., Mobile App Redesign",
          "readonly": false,
          "title": "Project Name",
          "type": "string"
        },
        "description": {
          "autofocus": false,
          "description": "What is this project about?",
          "disabled": false,
          "help_text": "What is this project about?",
          "input_type": "textarea",
          "maxLength": 2000,
          "placeholder": "Detailed description of the project",
          "readonly": false,
          "title": "Project Description",
          "type": "string"
        },
        "status": {
          "autofocus": false,
          "default": "planning",
          "description": "Current project status",
          "disabled": false,
          "help_text": "Current project status",
          "icon": "flag",
          "input_type": "select",
          "options": [
            {
              "label": "\ud83d\udccb Planning",
              "value": "planning"
            },
            {
              "label": "\ud83d\ude80 In Progress",
              "value": "in_progress"
            },
            {
              "label": "\u23f8\ufe0f On Hold",
              "value": "on_hold"
            },
            {
              "label": "\u2705 Completed",
              "value": "completed"
            },
            {
              "label": "\ud83d\udce6 Archived",
              "value": "archived"
            }
          ],
          "readonly": false,
          "title": "Project Status",
          "type": "string"
        },
        "start_date": {
          "autofocus": false,
          "description": "When does this project start?",
          "disabled": false,
          "format": "date",
          "help_text": "When does this project start?",
          "input_type": "date",
          "readonly": false,
          "title": "Project Start Date",
          "type": "string"
        },
        "target_end_date": {
          "autofocus": false,
          "description": "When should this project be completed?",
          "disabled": false,
          "format": "date",
          "help_text": "When should this project be completed?",
          "input_type": "date",
          "readonly": false,
          "title": "Target End Date",
          "type": "string"
        },
        "budget": {
          "autofocus": false,
          "default": 0.0,
          "description": "Project budget in USD",
          "disabled": false,
          "help_text": "Project budget in USD",
          "icon": "cash-coin",
          "input_type": "number",
          "minimum": 0,
          "readonly": false,
          "title": "Budget ($)",
          "type": "number"
        },
        "project_manager": {
          "autofocus": false,
          "description": "Who is managing this project?",
          "disabled": false,
          "help_text": "Who is managing this project?",
          "icon": "person-badge",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "PM name",
          "readonly": false,
          "title": "Project Manager",
          "type": "string"
        },
        "tasks": {
          "add_button_text": "\ud83d\udcdd Add Task",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Add tasks with subtasks to organize project work",
          "disabled": false,
          "help_text": "Add tasks with subtasks to organize project work",
          "icon": "list-check",
          "input_type": "model_list",
          "item_title_template": "\ud83d\udccb {title}",
          "items": {
            "$ref": "#/$defs/Task"
          },
          "items_expanded": false,
          "maxItems": 200,
          "minItems": 1,
          "model_class": "examples.shared_models.Task",
          "readonly": false,
          "remove_button_text": "Remove Task",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-list-task",
            "section_description": "Organize project work into tasks and subtasks",
            "section_title": "Project Tasks"
          },
          "title": "Project Tasks",
          "type": "array"
        }
      },
      "required": [
        "name",
        "description",
        "start_date",
        "target_end_date",
        "project_manager"
      ],
      "title": "Project",
      "type": "object"
    },
    "Subtask": {
      "description": "Level 5: Individual subtask within a task.",
      "properties": {
        "title": {
          "autofocus": false,
          "description": "What is this subtask about?",
          "disabled": false,
          "help_text": "What is this subtask about?",
          "icon": "list-check",
          "input_type": "text",
          "maxLength": 200,
          "placeholder": "Brief description of the subtask",
          "readonly": false,
          "title": "Subtask Title",
          "type": "string"
        },
        "description": {
          "anyOf": [
            {
              "maxLength": 1000,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Additional details about this subtask",
          "disabled": false,
          "help_text": "Additional details about this subtask",
          "input_type": "textarea",
          "placeholder": "Detailed description of the subtask",
          "readonly": false,
          "title": "Description"
        },
        "assigned_to": {
          "autofocus": false,
          "description": "Who is responsible for this subtask?",
          "disabled": false,
          "help_text": "Who is responsible for this subtask?",
          "icon": "person",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "Team member name",
          "readonly": false,
          "title": "Assigned To",
          "type": "string"
        },
        "estimated_hours": {
          "autofocus": false,
          "default": 1.0,
          "description": "Estimated time to complete",
          "disabled": false,
          "help_text": "Estimated time to complete",
          "icon": "clock",
          "input_type": "number",
          "maximum": 100,
          "minimum": 0.5,
          "readonly": false,
          "title": "Estimated Hours",
          "type": "number"
        },
        "status": {
          "autofocus": false,
          "default": "pending",
          "description": "Current status of the subtask",
          "disabled": false,
          "help_text": "Current status of the subtask",
          "input_type": "select",
          "options": [
            {
              "label": "\u23f3 Pending",
              "value": "pending"
            },
            {
              "label": "\ud83d\udd04 In Progress",
              "value": "in_progress"
            },
            {
              "label": "\u2705 Completed",
              "value": "completed"
            },
            {
              "label": "\ud83d\udeab Blocked",
              "value": "blocked"
            }
          ],
          "readonly": false,
          "title": "Status",
          "type": "string"
        }
      },
      "required": [
        "title",
        "assigned_to"
      ],
      "title": "Subtask",
      "type": "object"
    },
    "Task": {
      "description": "Level 4: Project task with subtasks (Level 5).",
      "properties": {
        "title": {
          "autofocus": false,
          "description": "What is this task?",
          "disabled": false,
          "help_text": "What is this task?",
          "icon": "bookmark",
          "input_type": "text",
          "maxLength": 200,
          "minLength": 3,
          "placeholder": "Brief task name",
          "readonly": false,
          "title": "Task Title",
          "type": "string"
        },
        "description": {
          "autofocus": false,
          "description": "Full description of what needs to be done",
          "disabled": false,
          "help_text": "Full description of what needs to be done",
          "input_type": "textarea",
          "maxLength": 2000,
          "placeholder": "Detailed description of the task",
          "readonly": false,
          "title": "Task Description",
          "type": "string"
        },
        "priority": {
          "autofocus": false,
          "default": "medium",
          "description": "Task priority level",
          "disabled": false,
          "help_text": "Task priority level",
          "icon": "exclamation-circle",
          "input_type": "select",
          "options": [
            {
              "label": "\ud83d\udfe2 Low",
              "value": "low"
            },
            {
              "label": "\ud83d\udfe1 Medium",
              "value": "medium"
            },
            {
              "label": "\ud83d\udd34 High",
              "value": "high"
            },
            {
              "label": "\u26d4 Critical",
              "value": "critical"
            }
          ],
          "readonly": false,
          "title": "Priority Level",
          "type": "string"
        },
        "status": {
          "autofocus": false,
          "default": "planning",
          "description": "Current task status",
          "disabled": false,
          "help_text": "Current task status",
          "input_type": "select",
          "options": [
            {
              "label": "\ud83d\udccb Planning",
              "value": "planning"
            },
            {
              "label": "\ud83d\udd04 In Progress",
              "value": "in_progress"
            },
            {
              "label": "\ud83d\udc40 In Review",
              "value": "in_review"
            },
            {
              "label": "\u2705 Completed",
              "value": "completed"
            },
            {
              "label": "\u274c Cancelled",
              "value": "cancelled"
            }
          ],
          "readonly": false,
          "title": "Task Status",
          "type": "string"
        },
        "start_date": {
          "autofocus": false,
          "description": "When should this task start?",
          "disabled": false,
          "format": "date",
          "help_text": "When should this task start?",
          "input_type": "date",
          "readonly": false,
          "title": "Start Date",
          "type": "string"
        },
        "due_date": {
          "autofocus": false,
          "description": "When is this task due?",
          "disabled": false,
          "format": "date",
          "help_text": "When is this task due?",
          "input_type": "date",
          "readonly": false,
          "title": "Due Date",
          "type": "string"
        },
        "assigned_to": {
          "anyOf": [
            {
              "maxLength": 100,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Who is responsible for this task?",
          "disabled": false,
          "help_text": "Who is responsible for this task?",
          "input_type": "text",
          "placeholder": "Team member name",
          "readonly": false,
          "title": "Assigned To"
        },
        "estimated_hours": {
          "autofocus": false,
          "default": 8.0,
          "description": "Estimated time to complete (in hours)",
          "disabled": false,
          "help_text": "Estimated time to complete (in hours)",
          "icon": "clock",
          "input_type": "number",
          "maximum": 1000,
          "minimum": 0.5,
          "readonly": false,
          "title": "Estimated Hours",
          "type": "number"
        },
        "subtasks": {
          "add_button_text": "\u2795 Add Subtask",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Break down this task into smaller subtasks",
          "disabled": false,
          "help_text": "Break down this task into smaller subtasks",
          "icon": "list-check",
          "input_type": "model_list",
          "item_title_template": "\ud83d\udd39 {title}",
          "items": {
            "$ref": "#/$defs/Subtask"
          },
          "items_expanded": false,
          "maxItems": 50,
          "minItems": 0,
          "model_class": "examples.shared_models.Subtask",
          "readonly": false,
          "remove_button_text": "Remove Subtask",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-list-check",
            "section_description": "Organize this task into smaller, manageable subtasks",
            "section_title": "Task Breakdown"
          },
          "title": "Subtasks",
          "type": "array"
        }
      },
      "required": [
        "title",
        "description",
        "start_date",
        "due_date"
      ],
      "title": "Task",
      "type": "object"
    },
    "Team": {
      "description": "Level 3: Team with members (Level 4) who have certifications (Level 5).",
      "properties": {
        "name": {
          "autofocus": false,
          "description": "Name of the team",
          "disabled": false,
          "help_text": "Name of the team",
          "icon": "people",
          "input_type": "text",
          "maxLength": 100,
          "minLength": 2,
          "placeholder": "e.g., Backend Team",
          "readonly": false,
          "title": "Team Name",
          "type": "string"
        },
        "description": {
          "anyOf": [
            {
              "maxLength": 500,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Brief description of the team's responsibilities",
          "disabled": false,
          "help_text": "Brief description of the team's responsibilities",
          "input_type": "textarea",
          "placeholder": "What does this team do?",
          "readonly": false,
          "title": "Team Description"
        },
        "team_lead": {
          "autofocus": false,
          "description": "Who leads this team?",
          "disabled": false,
          "help_text": "Who leads this team?",
          "icon": "star",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "Name of the team lead",
          "readonly": false,
          "title": "Team Lead Name",
          "type": "string"
        },
        "formed_date": {
          "autofocus": false,
          "description": "When was this team formed?",
          "disabled": false,
          "format": "date",
          "help_text": "When was this team formed?",
          "input_type": "date",
          "readonly": false,
          "title": "Formation Date",
          "type": "string"
        },
        "members": {
          "add_button_text": "\ud83d\udc64 Add Team Member",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Add team members and their certifications",
          "disabled": false,
          "help_text": "Add team members and their certifications",
          "icon": "people",
          "input_type": "model_list",
          "item_title_template": "\ud83d\udc64 {name} - {role}",
          "items": {
            "$ref": "#/$defs/TeamMember"
          },
          "items_expanded": false,
          "maxItems": 100,
          "minItems": 1,
          "model_class": "examples.shared_models.TeamMember",
          "readonly": false,
          "remove_button_text": "Remove Member",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-people",
            "section_description": "Members of this team with their certifications and experience",
            "section_title": "Team Members"
          },
          "title": "Team Members",
          "type": "array"
        }
      },
      "required": [
        "name",
        "team_lead",
        "formed_date"
      ],
      "title": "Team",
      "type": "object"
    },
    "TeamMember": {
      "description": "Level 4: Team member with certifications (Level 5).",
      "properties": {
        "name": {
          "autofocus": false,
          "description": "Full name of the team member",
          "disabled": false,
          "help_text": "Full name of the team member",
          "icon": "person",
          "input_type": "text",
          "maxLength": 100,
          "minLength": 2,
          "placeholder": "Enter full name",
          "readonly": false,
          "title": "Member Name",
          "type": "string"
        },
        "email": {
          "autofocus": false,
          "description": "Contact email address",
          "disabled": false,
          "format": "email",
          "help_text": "Contact email address",
          "input_type": "email",
          "placeholder": "member@company.com",
          "readonly": false,
          "title": "Email Address",
          "type": "string"
        },
        "role": {
          "autofocus": false,
          "description": "Job title or role",
          "disabled": false,
          "help_text": "Job title or role",
          "icon": "briefcase",
          "input_type": "text",
          "maxLength": 100,
          "placeholder": "e.g., Senior Developer",
          "readonly": false,
          "title": "Role",
          "type": "string"
        },
        "hire_date": {
          "autofocus": false,
          "description": "When did this person join?",
          "disabled": false,
          "format": "date",
          "help_text": "When did this person join?",
          "input_type": "date",
          "readonly": false,
          "title": "Hire Date",
          "type": "string"
        },
        "experience_years": {
          "autofocus": false,
          "default": 0,
          "description": "Total professional experience in years",
          "disabled": false,
          "help_text": "Total professional experience in years",
          "icon": "hourglass-split",
          "input_type": "number",
          "maximum": 70,
          "minimum": 0,
          "readonly": false,
          "title": "Years of Experience",
          "type": "integer"
        },
        "manager": {
          "anyOf": [
            {
              "maxLength": 100,
              "type": "string"
            },
            {
              "type": "null"
            }
          ],
          "autofocus": false,
          "default": null,
          "description": "Who supervises this team member?",
          "disabled": false,
          "help_text": "Who supervises this team member?",
          "input_type": "text",
          "placeholder": "Direct manager name",
          "readonly": false,
          "title": "Manager Name"
        },
        "certifications": {
          "add_button_text": "\u2795 Add Certification",
          "autofocus": false,
          "collapsible_items": true,
          "description": "Professional certifications and credentials",
          "disabled": false,
          "help_text": "Professional certifications and credentials",
          "icon": "award",
          "input_type": "model_list",
          "item_title_template": "{name} - {issuer}",
          "items": {
            "$ref": "#/$defs/Certification"
          },
          "items_expanded": false,
          "maxItems": 20,
          "minItems": 0,
          "model_class": "examples.shared_models.Certification",
          "readonly": false,
          "remove_button_text": "Remove",
          "section_design": {
            "collapsed": false,
            "collapsible": true,
            "icon": "bi bi-award",
            "section_description": "Add credentials and certifications",
            "section_title": "Professional Certifications"
          },
          "title": "Certifications",
          "type": "array"
        }
      },
      "required": [
        "name",
        "email",
        "role",
        "hire_date"
      ],
      "title": "TeamMember",
      "type": "object"
    }
  },
  "description": "Root company structure with 5 levels of nesting.\n\nThis model demonstrates how SchemaForms can render deeply nested data by\ncomposing `model_list` fields across multiple `FormModel` classes:\n\nCompany -> Department -> Team -> TeamMember -> Certification\n                    -> Project -> Task -> Subtask",
  "properties": {
    "company_name": {
      "autofocus": false,
      "description": "Legal name of the company",
      "disabled": false,
      "help_text": "Legal name of the company",
      "icon": "building",
      "input_type": "text",
      "maxLength": 200,
      "minLength": 2,
      "placeholder": "Enter company name",
      "readonly": false,
      "title": "Company Name",
      "type": "string"
    },
    "company_code": {
      "autofocus": false,
      "description": "Unique identifier for this company",
      "disabled": false,
      "help_text": "Unique identifier for this company",
      "icon": "code",
      "input_type": "text",
      "maxLength": 50,
      "minLength": 2,
      "placeholder": "e.g., ACME-2024",
      "readonly": false,
      "title": "Company Code",
      "type": "string"
    },
    "headquarters_address": {
      "autofocus": false,
      "description": "Main office address",
      "disabled": false,
      "help_text": "Main office address",
      "icon": "map-marker",
      "input_type": "textarea",
      "maxLength": 500,
      "placeholder": "Full address of headquarters",
      "readonly": false,
      "title": "Headquarters Address",
      "type": "string"
    },
    "ceo_name": {
      "autofocus": false,
      "description": "Chief Executive Officer",
      "disabled": false,
      "help_text": "Chief Executive Officer",
      "icon": "star",
      "input_type": "text",
      "maxLength": 100,
      "placeholder": "Name of the CEO",
      "readonly": false,
      "title": "CEO Name",
      "type": "string"
    },
    "ceo_email": {
      "autofocus": false,
      "description": "Email address of the CEO",
      "disabled": false,
      "format": "email",
      "help_text": "Email address of the CEO",
      "input_type": "email",
      "placeholder": "ceo@company.com",
      "readonly": false,
      "title": "CEO Email",
      "type": "string"
    },
    "founded_date": {
      "autofocus": false,
      "description": "When was the company founded?",
      "disabled": false,
      "format": "date",
      "help_text": "When was the company founded?",
      "input_type": "date",
      "readonly": false,
      "title": "Founded Date",
      "type": "string"
    },
    "employee_count": {
      "autofocus": false,
      "default": 0,
      "description": "Total number of employees",
      "disabled": false,
      "help_text": "Total number of employees",
      "icon": "people",
      "input_type": "number",
      "maximum": 1000000,
      "minimum": 1,
      "readonly": false,
      "title": "Total Employees",
      "type": "integer"
    },
    "annual_revenue": {
      "autofocus": false,
      "default": 0.0,
      "description": "Company annual revenue in USD",
      "disabled": false,
      "help_text": "Company annual revenue in USD",
      "icon": "cash-coin",
      "input_type": "number",
      "minimum": 0,
      "readonly": false,
      "title": "Annual Revenue ($)",
      "type": "number"
    },
    "website": {
      "anyOf": [
        {
          "maxLength": 500,
          "type": "string"
        },
        {
          "type": "null"
        }
      ],
      "autofocus": false,
      "default": null,
      "description": "Company website URL",
      "disabled": false,
      "help_text": "Company website URL",
      "icon": "globe",
      "input_type": "text",
      "placeholder": "https://www.example.com",
      "readonly": false,
      "title": "Company Website"
    },
    "departments": {
      "add_button_text": "\ud83c\udfe2 Add Department",
      "autofocus": false,
      "collapsible_items": true,
      "description": "Organize departments with teams, members, and projects",
      "disabled": false,
      "help_text": "Organize departments with teams, members, and projects",
      "icon": "diagram-2",
      "input_type": "model_list",
      "item_title_template": "\ud83c\udfe2 {name} (Head: {department_head})",
      "items": {
        "$ref": "#/$defs/Department"
      },
      "items_expanded": false,
      "maxItems": 500,
      "minItems": 1,
      "model_class": "examples.shared_models.Department",
      "readonly": false,
      "remove_button_text": "Remove Department",
      "section_design": {
        "collapsed": false,
        "collapsible": true,
        "icon": "bi bi-diagram-2",
        "section_description": "Complete company hierarchy with departments, teams, members, and projects",
        "section_title": "Organizational Structure"
      },
      "title": "Company Departments",
      "type": "array"
    }
  },
  "required": [
    "company_name",
    "company_code",
    "headquarters_address",
    "ceo_name",
    "ceo_email",
    "founded_date"
  ],
  "title": "CompanyOrganizationForm",
  "type": "object"
}

{
  "company_name": {
    "required": true,
    "type": "string",
    "minLength": 2,
    "maxLength": 200
  },
  "company_code": {
    "required": true,
    "type": "string",
    "minLength": 2,
    "maxLength": 50
  },
  "headquarters_address": {
    "required": true,
    "type": "string",
    "maxLength": 500
  },
  "ceo_name": {
    "required": true,
    "type": "string",
    "maxLength": 100
  },
  "ceo_email": {
    "required": true,
    "type": "string",
    "format": "email"
  },
  "founded_date": {
    "required": true,
    "type": "string",
    "format": "date"
  },
  "employee_count": {
    "required": false,
    "type": "integer",
    "minimum": 1,
    "maximum": 1000000
  },
  "annual_revenue": {
    "required": false,
    "type": "number",
    "minimum": 0
  },
  "website": {
    "required": false
  },
  "departments": {
    "required": false,
    "type": "array"
  }
}

{
  "errors": {},
  "data": {
    "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"
                  }
                ]
              }
            ]
          }
        ],
        "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"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}

Back to Examples

Try Different Styles

Bootstrap Material Design Plain HTML

API Endpoints Available

Schema: GET /api/forms/organization-shared/schema

Render: GET /api/forms/organization-shared/render

Submit: POST /api/forms/organization-shared/submit

Docs: Interactive API Docs