{% template "common/header" . %}

<div class="ui grid">
   {% template "host/menu" . %}

    <div class="twelve wide column">
        <div class="pageHeader">
            <div class="segment">
                <h3 class="ui dividing header">
                        <div class="content">
                            添加主机
                        </div>
                </h3>
            </div>
        </div>
        <form class="ui form fluid vertical segment">
            <input type="hidden" name="id" value="{%.Host.Id%}">
            <div class="four fields">
                <div class="field">
                    <label>主机名</label>
                    <div class="ui small input">
                        <input type="text"  name="name" value="{%.Host.Name%}" placeholder="127.0.0.1">
                    </div>
                </div>
                <div class="field">
                    <label>端口</label>
                    <div class="ui small  input">
                        <input type="text"  name="port" value="{%.Host.Port%}" placeholder="5921">
                    </div>
                </div>
                <div class="field">
                    <label>节点名称</label>
                    <div class="ui small  input">
                        <input type="text" name="alias" value="{%.Host.Alias%}"
                        placeholder="节点名称如web">
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>备注</label>
                    <div class="ui small  input">
                        <textarea rows="7" name="remark" >{%.Host.Remark%}</textarea>
                    </div>
                </div>
            </div>

            <div class="ui primary submit button">保存</div>
            <a class="ui button" onclick="location.href='/host';">取消</a>
        </form>
    </div>
</div>


<script type="text/javascript">
    var $uiForm = $('.ui.form');
    $($uiForm).form(
            {
                onSuccess: function(event, fields) {
                    util.post('/host/store', fields, function(code, message) {
                        location.href = "/host"
                    });

                    return false;
                },
                fields: {
                    name: {
                        identifier  : 'name',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机名'
                            },
                            {
                                type   : 'maxLength[64]',
                                prompt : '长度不能超过64'
                            }
                        ]
                    },
                    alias: {
                        identifier  : 'alias',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机别名'
                            },
                            {
                                type   : 'maxLength[32]',
                                prompt : '长度不能超过32'
                            }
                        ]
                    },
                    port: {
                        identifier  : 'port',
                        rules: [
                            {
                                type   : 'integer[1..65535]',
                                prompt : '请输入有效的端口号'
                            }
                        ]
                    },
                    remark: {
                        identifier  : 'remark',
                        rules: [
                            {
                                type   : 'maxLength[100]',
                                prompt : '长度不能超过100'
                            }
                        ]
                    }
                },
                inline : true
            });
</script>

{% template "common/footer" . %}