<vn-crud-model
    vn-id="model"
    url="departments/getLeaves"
    auto-load="false">
</vn-crud-model>
<vn-portal slot="topbar">
    <vn-searchbar
        vn-focus
        info="Search departments by id, name or code"
        on-search="$ctrl.onSearch($params)"
        base-state="worker.department">
    </vn-searchbar>
</vn-portal>
<form name="form" class="vn-w-md">
    <vn-card class="vn-pa-md">
        <vn-treeview vn-id="treeview" root-label="Departments" read-only="false"
            fetch-func="$ctrl.onFetch($item)"
            remove-func="$ctrl.onRemove($item)"
            create-func="$ctrl.onCreate($parent)"
            sort-func="$ctrl.onSort($a, $b)"
            on-drop="$ctrl.onDrop($dropped, $dragged)"
            on-drag-start="$ctrl.onDragStart(item)"
            on-drag-end="$ctrl.onDragEnd(item)">
            <a
                style="display: block; color: inherit;"
                ui-sref="worker.department.card.summary({id: item.id})"
                translate>
                {{::item.name}}
            </a>
        </vn-treeview>
    </vn-card>
</form>
<vn-confirm
    vn-id="deleteNode"
    on-accept="$ctrl.onRemoveResponse()"
    question="Delete department"
    message="Are you sure you want to delete it?">
</vn-confirm>
<!-- Create department dialog -->
<vn-dialog
    vn-id="createNode"
    on-open="$ctrl.onCreateDialogOpen()"
    on-accept="$ctrl.onCreateResponse()"
    message="New department">
    <tpl-body>
        <vn-textfield
            vn-one
            label="Name"
            ng-model="$ctrl.newChild.name"
            vn-focus>
        </vn-textfield>
    </tpl-body>
    <tpl-buttons>
        <input type="button" response="cancel" translate-attr="{value: 'Cancel'}"/>
        <button response="accept" translate>Create</button>
    </tpl-buttons>
</vn-dialog>