Organization (Shared Models) - 5 Levels Deep 🏢

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

Company Name *

Legal name of the company

Company Code *

Unique identifier for this company

Headquarters Address *

Main office address

CEO Name *

Chief Executive Officer

CEO Email *

Email address of the CEO

Founded Date *

When was the company founded?

Total Employees

Total number of employees

Annual Revenue ($)

Company annual revenue in USD

Company Website

Company website URL

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

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?

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?

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

Project Name

Name of the project

Project Description

What is this project about?

Project Status

flag

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?

Task Title

What is this task?

Task Description

Full description of what needs to be done

Priority Level

exclamation-circle

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)

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>


<form id=""
      class="pydantic-form "
      style=""
      method="POST"
      action="/organization-shared?style=none"
      novalidate>
    
    <div class="field"><label for="company_name">Company Name *</label>
<input name="company_name" id="company_name" value="TechCorp International" required="required" minlength="2" maxlength="200" placeholder="Enter company name" type="text" />
<div class="help-text">Legal name of the company</div></div>
<div class="field"><label for="company_code">Company Code *</label>
<input name="company_code" id="company_code" value="TECH-2024" required="required" minlength="2" maxlength="50" placeholder="e.g., ACME-2024" type="text" />
<div class="help-text">Unique identifier for this company</div></div>
<div class="field"><label for="headquarters_address">Headquarters Address *</label>
<textarea name="headquarters_address" id="headquarters_address" required="required" maxlength="500" placeholder="Full address of headquarters">123 Innovation Drive, San Francisco, CA 94105</textarea>
<div class="help-text">Main office address</div></div>
<div class="field"><label for="ceo_name">CEO Name *</label>
<input name="ceo_name" id="ceo_name" value="Jane Smith" required="required" maxlength="100" placeholder="Name of the CEO" type="text" />
<div class="help-text">Chief Executive Officer</div></div>
<div class="field"><label for="ceo_email">CEO Email *</label>
<input name="ceo_email" id="ceo_email" value="jane.smith@techcorp.com" required="required" placeholder="ceo@company.com" inputmode="email" type="email" />
<div class="help-text">Email address of the CEO</div></div>
<div class="field"><label for="founded_date">Founded Date *</label>
<div class="birthdate-input-group"><input name="founded_date" id="founded_date" value="2010-01-15" required="required" max="2026-03-07" min="1876-01-01" type="date" />
            <div class="age-display" id="founded_date_age" style="margin-top: 5px; font-size: 0.9em; color: #666;"></div>
            <script>
            document.addEventListener('DOMContentLoaded', function() {
                const birthdateField = document.getElementById('founded_date');
                const ageDisplay = document.getElementById('founded_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 the company founded?</div></div>
<div class="field"><label for="employee_count">Total Employees</label>
<input name="employee_count" id="employee_count" value="5000" min="1" max="1000000" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Total number of employees</div></div>
<div class="field"><label for="annual_revenue">Annual Revenue ($)</label>
<input name="annual_revenue" id="annual_revenue" value="500000000.0" min="0" max="100" step="0.1" placeholder="50.0%" inputmode="numeric" type="number" />
<div class="help-text">Company annual revenue in USD</div></div>
<div class="field"><label for="website">Company Website</label>
<input name="website" id="website" value="https://www.techcorp.com" placeholder="https://www.example.com" type="text" />
<div class="help-text">Company website URL</div></div>

<div class="model-list-block" data-field-name="departments" data-min-items="1" data-max-items="500">
    <div class="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="field"><label for="departments[0].name">Department Name</label>
<input name="departments[0].name" id="departments[0].name" 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="field"><label for="departments[0].description">Department Description</label>
<textarea name="departments[0].description" id="departments[0].description" 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="field"><label for="departments[0].department_head">Department Head</label>
<input name="departments[0].department_head" id="departments[0].department_head" 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="field"><label for="departments[0].head_email">Department Head Email</label>
<input name="departments[0].head_email" id="departments[0].head_email" 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="field"><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" 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="field"><label for="departments[0].budget">Annual Budget ($)</label>
<input name="departments[0].budget" id="departments[0].budget" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams" data-min-items="1" data-max-items="50">
    <div class="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="field"><label for="departments[0].teams[0].name">Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" 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="field"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" 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="field"><label for="departments[0].teams[0].team_lead">Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" 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="field"><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" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
    <div class="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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members">Add Item</button>
    
<div class="model-list-help">Add team members and their certifications</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].name">Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" 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="field"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" 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="field"><label for="departments[0].teams[0].team_lead">Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" 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="field"><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" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
    <div class="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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members">Add Item</button>
    
<div class="model-list-help">Add team members and their certifications</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams">Add Item</button>
    
<div class="model-list-help">Teams within this department and their members</div>

    
</div>

                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].projects" data-min-items="0" data-max-items="100">
    <div class="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="field"><label for="departments[0].projects[0].name">Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" 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="field"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" 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="field"><div class="field">
<label for="departments[0].projects[0].status">Project Status</label>
<div class="input-with-icon"><span class="input-icon">flag</span>
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status"><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>
</div>
<div class="help-text">Current project status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].budget">Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" 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="field"><label for="departments[0].projects[0].project_manager">Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</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">
            <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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks">Add Item</button>
    
<div class="model-list-help">Add tasks with subtasks to organize project work</div>

    
</div>

                </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="field"><label for="departments[0].projects[0].name">Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" 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="field"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" 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="field"><div class="field">
<label for="departments[0].projects[0].status">Project Status</label>
<div class="input-with-icon"><span class="input-icon">flag</span>
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status"><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>
</div>
<div class="help-text">Current project status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].budget">Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" 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="field"><label for="departments[0].projects[0].project_manager">Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</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">
            <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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks">Add Item</button>
    
<div class="model-list-help">Add tasks with subtasks to organize project work</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects">Add Item</button>
    
<div class="model-list-help">Projects managed by this department</div>

    
</div>

                </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="field"><label for="departments[0].name">Department Name</label>
<input name="departments[0].name" id="departments[0].name" 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="field"><label for="departments[0].description">Department Description</label>
<textarea name="departments[0].description" id="departments[0].description" 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="field"><label for="departments[0].department_head">Department Head</label>
<input name="departments[0].department_head" id="departments[0].department_head" 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="field"><label for="departments[0].head_email">Department Head Email</label>
<input name="departments[0].head_email" id="departments[0].head_email" 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="field"><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" 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="field"><label for="departments[0].budget">Annual Budget ($)</label>
<input name="departments[0].budget" id="departments[0].budget" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams" data-min-items="1" data-max-items="50">
    <div class="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="field"><label for="departments[0].teams[0].name">Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" 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="field"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" 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="field"><label for="departments[0].teams[0].team_lead">Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" 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="field"><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" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
    <div class="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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members">Add Item</button>
    
<div class="model-list-help">Add team members and their certifications</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].name">Team Name</label>
<input name="departments[0].teams[0].name" id="departments[0].teams[0].name" 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="field"><label for="departments[0].teams[0].description">Team Description</label>
<textarea name="departments[0].teams[0].description" id="departments[0].teams[0].description" 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="field"><label for="departments[0].teams[0].team_lead">Team Lead Name</label>
<input name="departments[0].teams[0].team_lead" id="departments[0].teams[0].team_lead" 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="field"><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" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members" data-min-items="1" data-max-items="100">
    <div class="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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" placeholder="Direct manager name" type="text" />
<div class="help-text">Who supervises this team member?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" placeholder="https://..." type="text" />
<div class="help-text">Link to verify the credential</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </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="field"><label for="departments[0].teams[0].members[0].name">Member Name</label>
<input name="departments[0].teams[0].members[0].name" id="departments[0].teams[0].members[0].name" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].role">Role</label>
<input name="departments[0].teams[0].members[0].role" id="departments[0].teams[0].members[0].role" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].experience_years">Years of Experience</label>
<input name="departments[0].teams[0].members[0].experience_years" id="departments[0].teams[0].members[0].experience_years" 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="field"><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" 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">
                    
<div class="model-list-block" data-field-name="departments[0].teams[0].members[0].certifications" data-min-items="0" data-max-items="20">
    <div class="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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].name">Certification Name</label>
<input name="departments[0].teams[0].members[0].certifications[0].name" id="departments[0].teams[0].members[0].certifications[0].name" 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="field"><label for="departments[0].teams[0].members[0].certifications[0].issuer">Issuing Organization</label>
<input name="departments[0].teams[0].members[0].certifications[0].issuer" id="departments[0].teams[0].members[0].certifications[0].issuer" 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="field"><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" 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="field"><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" 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="field"><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" 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="field"><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" 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>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members[0].certifications">Add Item</button>
    
<div class="model-list-help">Professional certifications and credentials</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams[0].members">Add Item</button>
    
<div class="model-list-help">Add team members and their certifications</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].teams">Add Item</button>
    
<div class="model-list-help">Teams within this department and their members</div>

    
</div>

                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].projects" data-min-items="0" data-max-items="100">
    <div class="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="field"><label for="departments[0].projects[0].name">Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" 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="field"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" 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="field"><div class="field">
<label for="departments[0].projects[0].status">Project Status</label>
<div class="input-with-icon"><span class="input-icon">flag</span>
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status"><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>
</div>
<div class="help-text">Current project status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].budget">Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" 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="field"><label for="departments[0].projects[0].project_manager">Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" maxlength="100" placeholder="PM name" type="text" />
<div class="help-text">Who is managing this project?</div></div>
                </div>
                <div class="col-12">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</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">
            <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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks">Add Item</button>
    
<div class="model-list-help">Add tasks with subtasks to organize project work</div>

    
</div>

                </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="field"><label for="departments[0].projects[0].name">Project Name</label>
<input name="departments[0].projects[0].name" id="departments[0].projects[0].name" 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="field"><label for="departments[0].projects[0].description">Project Description</label>
<textarea name="departments[0].projects[0].description" id="departments[0].projects[0].description" 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="field"><div class="field">
<label for="departments[0].projects[0].status">Project Status</label>
<div class="input-with-icon"><span class="input-icon">flag</span>
<select name="departments[0].projects[0].status" id="departments[0].projects[0].status"><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>
</div>
<div class="help-text">Current project status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].budget">Budget ($)</label>
<input name="departments[0].projects[0].budget" id="departments[0].projects[0].budget" 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="field"><label for="departments[0].projects[0].project_manager">Project Manager</label>
<input name="departments[0].projects[0].project_manager" id="departments[0].projects[0].project_manager" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks" data-min-items="1" data-max-items="200">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high">🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</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">
            <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="field"><label for="departments[0].projects[0].tasks[0].title">Task Title</label>
<input name="departments[0].projects[0].tasks[0].title" id="departments[0].projects[0].tasks[0].title" 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="field"><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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].priority">Priority Level</label>
<div class="input-with-icon"><span class="input-icon">exclamation-circle</span>
<select name="departments[0].projects[0].tasks[0].priority" id="departments[0].projects[0].tasks[0].priority"><option value="low">🟢 Low</option>
<option value="medium">🟡 Medium</option>
<option value="high" selected>🔴 High</option>
<option value="critical">⛔ Critical</option></select>
</div>
<div class="help-text">Task priority level</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].status">Task Status</label>
<select name="departments[0].projects[0].tasks[0].status" id="departments[0].projects[0].tasks[0].status"><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>
<div class="help-text">Current task status</div>
</div></div>
                </div>
                <div class="col-lg-4 col-md-6">
                    <div class="field"><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" 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="field"><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" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].estimated_hours">Estimated Hours</label>
<input name="departments[0].projects[0].tasks[0].estimated_hours" id="departments[0].projects[0].tasks[0].estimated_hours" 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">
                    
<div class="model-list-block" data-field-name="departments[0].projects[0].tasks[0].subtasks" data-min-items="0" data-max-items="50">
    <div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed">✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].title">Subtask Title</label>
<input name="departments[0].projects[0].tasks[0].subtasks[0].title" id="departments[0].projects[0].tasks[0].subtasks[0].title" 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="field"><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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].assigned_to">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" 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="field"><label for="departments[0].projects[0].tasks[0].subtasks[0].estimated_hours">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" 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="field"><div class="field">
<label for="departments[0].projects[0].tasks[0].subtasks[0].status">Status</label>
<select name="departments[0].projects[0].tasks[0].subtasks[0].status" id="departments[0].projects[0].tasks[0].subtasks[0].status"><option value="pending">⏳ Pending</option>
<option value="in_progress">🔄 In Progress</option>
<option value="completed" selected>✅ Completed</option>
<option value="blocked">🚫 Blocked</option></select>
<div class="help-text">Current status of the subtask</div>
</div></div>
                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks[0].subtasks">Add Item</button>
    
<div class="model-list-help">Break down this task into smaller subtasks</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects[0].tasks">Add Item</button>
    
<div class="model-list-help">Add tasks with subtasks to organize project work</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments[0].projects">Add Item</button>
    
<div class="model-list-help">Projects managed by this department</div>

    
</div>

                </div></div>
                </div>
            </div>
        </div></div>
    <button type="button" class="add-item-btn" data-target="departments">Add Item</button>
    
<div class="model-list-help">Organize departments with teams, members, and projects</div>

    
</div>

    
<button type="submit">Submit</button>
<div style="margin-top: 0.5rem; font-size: 0.75rem; color: #6c757d; text-align: right;">Rendered in 0.034s</div>
</form>


<script>
(function() {
    document.addEventListener('DOMContentLoaded', function() {
        // Prevent Enter key from submitting forms unless on submit button
        const forms = document.querySelectorAll('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