<div class="vn-w-md" ng-show="$ctrl.currentPDA">
    <vn-card class="vn-pa-lg">
        <vn-horizontal>
            <vn-textfield
                label="Current PDA"
                ng-model="$ctrl.currentPDA.description"
                disabled="true">
                <append>
                    <vn-icon-button
                        icon="delete"
                        vn-tooltip="Deallocate PDA"
                        ng-click="$ctrl.deallocatePDA()"
                        vn-acl="hr, productionAssi">
                    </vn-icon-button>
                </append>
            </vn-textfield>
        </vn-horizontal>
    </vn-card>
</div>
<form name="form" ng-show="!$ctrl.currentPDA" ng-submit="$ctrl.allocatePDA()" class="vn-w-md">
    <vn-card class="vn-pa-lg">
            <vn-horizontal>
                <vn-autocomplete
                    vn-acl="hr, productionAssi"
                    ng-model="$ctrl.newPDA"
                    url="DeviceProductions"
                    fields="['id', 'modelFk', 'serialNumber']"
                    where="{'stateFk': 'idle'}"
                    label="New PDA"
                    order="id"
                    value-field="id"
                    show-field="serialNumber">
                    <tpl-item>
                        <div>
                            ID: {{id}}
                        </div>
                        <div class="text-caption text-grey">
                            {{modelFk}}, {{serialNumber}}
                        </div>
                    </tpl-item>
                </vn-autocomplete>
            </vn-horizontal>
    </vn-card>
    <vn-button-bar>
        <vn-submit
            disabled="!$ctrl.newPDA"
            label="Assign">
        </vn-submit>
    </vn-button-bar>
</form>