<!-- Localization completed -->
<div ng-show='errorMessage' class='modal-header'>
    <div ng-show='errorMessage' class='error'><span>{{errorMessage}}</span></div>
</div>
<div class='modal-body'>
    <form class='form-horizontal'>

        <div class='form-group'>
            <label class='col-sm-4 control-label'><span localized>form.device.number</span><br>
                <span style="color: #aaa; font-size: 10px" localized>form.device.number.hint</span></label>
            <div class='col-sm-8'>
                <input ng-model='device.number' type='text' class='form-control' ng-disabled="!canEditDevice || migratingDevice" title="{{migrationHint}}"
                       focus-me>
            </div>
        </div>

        <div class='form-group'>
            <label class='col-sm-4 control-label' localized>form.device.desc</label>
            <div class='col-sm-8'>
                <textarea ng-model='device.description' class='form-control no-resize' rows="5"></textarea>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice">
            <label class='col-sm-4 control-label' localized>form.device.groups</label>
            <div class='col-sm-8'>
                <div ng-dropdown-multiselect
                     options='groupsList'
                     translation-texts='tableFilteringTexts'
                     selected-model='groupsSelection'
                     class='left margin-right-half custom-multi-select'></div>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice">
            <label class='col-sm-4 control-label' localized>form.device.config</label>
            <div class='col-sm-8'>
                <select class='form-control'
                        ng-model='device.configurationId'
                        ng-options="configuration.id as configuration.name for configuration in configurations">
                </select>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice">
            <label class='col-sm-4 control-label' for="imei" localized>form.device.imei</label>
            <div class='col-sm-8'>
                <input ng-model='device.imei' id="imei" maxlength="15" type='text' class='form-control'
                       ui-mask="{{'999999999999999'}}" ui-options="{clearOnBlur: false, allowInvalidValue: true}"/>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice">
            <label class='col-sm-4 control-label' for="phone" localized>form.device.phone.number</label>
            <div class='col-sm-8'>
                <input ng-model='device.phone' id="phone" type='text' class='form-control'
                       ui-mask="{{settings.phoneNumberFormat}}" ui-options="{clearOnBlur: false, allowInvalidValue: true}">
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice && settings.customPropertyName1">
            <label class='col-sm-4 control-label' for="custom1">{{settings.customPropertyName1}}</label>
            <div class='col-sm-8'>
                <input ng-model='device.custom1' id="custom1" type='text' class='form-control'
                       ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="!settings.customMultiline1">
                <textarea ng-model='device.custom1' id="custom1t" type='text' class='form-control' rows="5"
                          ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="settings.customMultiline1"></textarea>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice && settings.customPropertyName2">
            <label class='col-sm-4 control-label' for="custom2">{{settings.customPropertyName2}}</label>
            <div class='col-sm-8'>
                <input ng-model='device.custom2' id="custom2" type='text' class='form-control'
                       ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="!settings.customMultiline2">
                <textarea ng-model='device.custom2' id="custom2t" type='text' class='form-control' rows="5"
                          ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="settings.customMultiline2"></textarea>
            </div>
        </div>

        <div class='form-group' ng-if="canEditDevice && settings.customPropertyName3">
            <label class='col-sm-4 control-label' for="custom3">{{settings.customPropertyName3}}</label>
            <div class='col-sm-8'>
                <input ng-model='device.custom3' id="custom3" type='text' class='form-control'
                       ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="!settings.customMultiline3">
                <textarea ng-model='device.custom3' id="custom3t" type='text' class='form-control' rows="5"
                          ui-options="{clearOnBlur: false, allowInvalidValue: true}" ng-if="settings.customMultiline3"></textarea>

            </div>
        </div>

        <div class='form-group'>
            <div class='col-sm-offset-4 col-sm-8'>
                <button type='submit' class='btn btn-default' ng-click='save()' ng-disabled="loading"
                        localized>button.save</button>
                <button type='button' class='btn btn-default' ng-click='closeModal()'
                        ng-disabled="loading"
                        localized>button.cancel</button>
            </div>
        </div>
    </form>
</div>
