<vn-watcher
    vn-id="watcher"
    data="$ctrl.department"
    form="form"
    url="Departments">
</vn-watcher>
<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" ng-submit="watcher.submit()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
        <vn-vertical>
            <vn-horizontal>
                <vn-textfield
                    vn-one
                    label="Name"
                    ng-model="$ctrl.department.name"
                    vn-name="Name">
                </vn-textfield>
                <vn-textfield
                    vn-one
                    label="Code"
                    ng-model="$ctrl.department.code"
                    vn-name="Code">
                </vn-textfield>
            </vn-horizontal>
            <vn-horizontal>
                <vn-textfield
                    vn-one
                    label="Chat"
                    ng-model="$ctrl.department.chatName"
                    vn-name="Chat">
                </vn-textfield>
                <vn-textfield type="Email"
                    vn-one
                    label="Email"
                    ng-model="$ctrl.department.notificationEmail"
                    vn-name="Email">
                </vn-textfield>
            </vn-horizontal>
            <vn-horizontal>
                <vn-autocomplete
                    ng-model="$ctrl.department.workerFk"
                    url="Workers/activeWithInheritedRole"
                    show-field="nickname"
                    search-function="{firstName: $search}"
                    label="Boss department">
                </vn-autocomplete>
                <vn-autocomplete
                    ng-model="$ctrl.department.clientFk"
                    url="Clients/"
                    show-field="name"
                    search-function="{firstName: $search}"
                    label="Self-consumption customer">
                </vn-autocomplete>
            </vn-horizontal>
            <vn-horizontal>
                    <vn-check
                        label="Telework"
                        ng-model="$ctrl.department.isTeleworking">
                    </vn-check>
                    <vn-check
                        label="Notify on errors"
                        ng-model="$ctrl.department.hasToMistake">
                    </vn-check>
            </vn-horizontal>
            <vn-horizontal>         
                    <vn-check
                        label="worksInProduction"
                        ng-model="$ctrl.department.isProduction">
                    </vn-check>
                    <vn-check
                        label="Fill in days without physical check-ins"
                        ng-model="$ctrl.department.hasToRefill">
                    </vn-check>
            </vn-horizontal> 
            <vn-horizontal>  
                    <vn-check
                        label="Send check-ins by email"
                        ng-model="$ctrl.department.hasToSendMail">
                    </vn-check>   
            </vn-horizontal>
        </vn-vertical>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!watcher.dataChanged()"
            label="Save">
        </vn-submit>
        <vn-button
            class="cancel"
            label="Undo changes"
            disabled="!watcher.dataChanged()"
            ng-click="watcher.loadOriginalData()">
        </vn-button>
    </vn-button-bar>
</form>