@model string
<div id="edit-skills-dialog" data-width="820" class="modal fade" tabindex="-1" role="dialog" style="display: none;" data-backdrop="static">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
            <h4 class="modal-title">Edit Skills</h4>
        </div>
        <div class="modal-body" id="mix-edit-scenario-teams-dialog-content">
            <div class="row">
                <form name="frmAddSkill">
                    <div class="col-md-10">
                        <input class="form-control" id="AddItemName" name="AddItemName" type="text" ng-model="data.AddItemName"
                               ng-maxlength="512" placeholder="Enter new Skill Group name here..." />
                        <span ng-show="frmAddSkill.AddItemName.$error.maxlength" class="field-validation-error" data-valmsg-for="AddItemName" data-valmsg-replace="true"><span for="AddItemName" class="">Name should not exceed 512 characters.</span></span>
                    </div>
                    <div class="col-md-2">
                        <button type="submit" class="btn btn-success" ng-disabled="!data.AddItemName" ng-click="frmAddSkill.$valid && addSkillGroup(false)">Add</button>
                        <button type="reset" class="btn btn-default" ng-click="cancelAddSkillGroup()">Clear</button>
                    </div>
                </form>
            </div>
            <div class="table-light table-responsive edit-skills-tree no-margin-b">
                <form name="frmSkillsGrid" id="frmSkillsGrid" editable-form>
                    <table class="table table-striped table-bordered dataTable" id="edit-skills-table">
                        <thead>
                            <tr>
                                <th class="headcol"></th>
                                <th class="headcol">Name</th>
                            </tr>
                        </thead>
                        <tbody ng-repeat="skillGroup in data.ViewModel | orderBy: 'Name' track by $index">
                            @* Skill Group row *@
                            <tr>
                                <td>
                                    <div class="grid-actions-div">
                                        <a href="javascript:void(0);" ng-click="removeSkill(skillGroup, true)" title="Delete Skill Group"><i class="fa fa-times-circle icon red"></i></a>
                                        <a href="javascript:void(0);" ng-click="addSkill(skillGroup)" title="Add Skill" class="addSkill"><i class="fa fa-plus-square icon green"></i></a>
                                    </div>
                                </td>
                                <td class="item-name">
                                    <div ng-click="onGroupClick(skillGroup, $event)" class="item-collapse-container" ng-show="skillGroup.HasChildren">
                                        <i class="fa blue" ng-class="skillGroup.CollapsedClass" style="margin-right: 5px;" ng-attr-title="{{skillGroup.Collapsed ? 'Expand' : 'Collapse'}}"></i>
                                    </div>
                                    <a href="javascript:void(0);" id="{{ skillGroup.Id }}" data-isgroup="true" editable-text="skillGroup.Name" e-name="ColValue_{{skillGroup.Id}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, skillGroup, $index)"
                                       ng-click="onShow(this)" e-required e-maxlength="512">
                                        {{ skillGroup.Name || '' }}
                                    </a>
                                </td>
                            </tr>
                            <tr class="skillRow" ng-repeat="skill in skillGroup.Children track by $index" ng-show="!skillGroup.Collapsed">
                                <td>
                                    <div class="grid-actions-div">
                                        <a href="javascript:void(0);" ng-click="removeSkill(skill, false)" title="Delete Skill"><i class="fa fa-times-circle icon red"></i></a>
                                    </div>
                                </td>
                                <td ng-click="onSkillClick(skillGroup.Id, skill, $event)">
                                    <div class="item-name level2">
                                        <a href="javascript:void(0);" id="{{ skill.Id }}" editable-text="skill.Name" e-name="ColValue_{{skill.Id}}" e-ng-blur="onTxtBlur(this);" onshow="watchKeyInput(this)" buttons="no" blur="submit" onbeforesave="checkValue($data, skill, $index)"
                                           ng-click="onShow(this)" e-required e-maxlength="512">
                                            {{ skill.Name || '' }}
                                        </a>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </form>
            </div>
            <div class="alert alert-warning no-margin-b" ng-show="data.GroupsWithS2RAndChildren.length > 0">
                <p class="form-group-margin">The following Skill Groups have Resource data assigned and you are going to add Skills to these Skill Groups. Please choose which Skill Groups should transfer their Resource data to child Skills (Group-level data will be wiped out):</p>
                <div ng-repeat="skillGroup in data.GroupsWithS2RAndChildren track by $index" class="checkbox">
                    <nobr><label class="text-normal"><input type="checkbox" class="px" ng-model="skillGroup.CopyDataUponDelete" ng-change="onCopyDataUponDeleteClick(skillGroup)"> <span class="lbl">{{ skillGroup.Name || '' }}</span></label></nobr>
                </div>
            </div>
        </div> <!-- / .modal-body -->
        <div class="modal-footer">
            <button type="button" class="btn btn-primary" ng-disabled="!frmSkillsGrid.$valid" ng-click="frmSkillsGrid.$valid && saveChanges()">Save</button>
            <button type="button" class="btn btn-default" ng-click="cancelForm()">Cancel</button>
        </div>
    </div> <!-- / .modal-content -->
</div> <!-- /.modal -->