{{{ template "common/header" . }}}

<div class="ui grid">
    <!--the vertical menu-->
   {{{ template "host/menu" . }}}

    <div class="twelve wide column">
        <div class="pageHeader">
            <div class="segment">
                <h3 class="ui dividing header">
                    <i class="large add icon"></i>
                    <div class="content">
                        添加主机
                    </div>
                </h3>
            </div>
        </div>
        <form class="ui form fluid vertical segment">
            <div class="two fields">
                <div class="field">
                    <label>主机名 (域名或IP)</label>
                    <div class="ui small left icon input">
                        <input type="text" placeholder="127.0.0.1" name="name">
                    </div>
                </div>
                <div class="field">
                    <label>主机别名 (方便记忆和引用)</label>
                    <div class="ui small left icon input">
                        <input type="text" placeholder="db" name="alias">
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>SSH用户名</label>
                    <div class="ui small left icon input">
                        <input type="text" placeholder="root" name="username">
                    </div>
                </div>
                <div class="field">
                    <label>SSH密码</label>
                    <div class="ui small left icon input">
                        <input type="text" placeholder="123456" name="password">
                    </div>
                </div>

            </div>
            <div class="two fields">
                <div class="field">
                    <label>SSH端口</label>
                    <div class="ui small left icon input">
                        <input type="text" placeholder="22" name="port" value="22">
                    </div>
                </div>
            </div>
            <div class="two fields">
                <div class="field">
                    <label>备注</label>
                    <div class="ui small left icon input">
                        <textarea rows="5" name="remark" placeholder="数据库服务器"></textarea>
                    </div>
                </div>
            </div>

            <div class="ui primary submit button">提交</div>
        </form>
    </div>
    <!--the newDevice form-->
</div>


<script type="text/javascript">
    $('.ui.form').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 : '请输入主机名'
                            }
                        ]
                    },
                    alias: {
                        identifier  : 'alias',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入主机别名'
                            }
                        ]
                    },
                    username: {
                        identifier  : 'username',
                        rules: [
                            {
                                type   : 'empty',
                                prompt : '请输入SSH用户名'
                            }
                        ]
                    },
                    port: {
                        identifier  : 'port',
                        rules: [
                            {
                                type   : 'integer',
                                prompt : '请输入SSH端口'
                            }
                        ]
                    }
                },
                inline : true
            });
</script>

{{{ template "common/footer" . }}}