{{{ 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">
                    <a href="/host/create">
                        <i class="large add icon"></i>
                        <div class="content">
                            添加主机
                        </div>
                    </a>
                </h3>
            </div>
        </div>
        <form class="ui form">
            <div class="three fields">
                <div class="field">
                    <input type="text" placeholder="ID" name="id" value="{{{if gt .Params.Id 0}}}{{{.Params.Id}}}{{{end}}}">
                </div>
                <div class="field">
                    <input type="text" placeholder="主机名" name="name" value="{{{.Params.Name}}}">
                </div>
                <div class="field">
                    <button class="ui linkedin submit button">搜索</button>
                </div>
            </div>
        </form>
        <table class="ui striped table">
            <thead>
            <tr>
                <th>ID</th>
                <th>主机名</th>
                <th>别名</th>
                <th>用户名</th>
                <th>端口</th>
                <th>备注</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            {{{range $i, $v := .Hosts}}}
            <tr>
                <td>{{{.Id}}}</td>
                <td>{{{.Name}}}</td>
                <td>{{{.Alias}}}</td>
                <td>{{{.Username}}}</td>
                <td>{{{.Port}}}</td>
                <td>{{{.Remark}}}</td>
                <td class="operation">
                    <a class="ui purple button"  href="/host/edit/{{{.Id}}}">编辑</a>
                    <button class="ui positive button" onclick="util.removeConfirm('/host/remove/{{{.Id}}}')">删除</button><br>
                    <div style="margin-top: 5px;">
                        <a class="ui twitter button" href="/task?host_id={{{.Id}}}">查看任务</a>
                        <button class="ui blue button" @click="ping({{{.Id}}})">连接测试</button>
                    </div>
                </td>
            </tr>
            {{{end}}}
            </tbody>
        </table>
        {{{ template "common/pagination" .}}}
    </div>
</div>

<script type="text/javascript">
    var Vue = new Vue({
       el: '.ui.striped.table',
       methods: {
           ping: function(id) {
               swal({
                   title: '',
                   text: "连接中.......",
                   type: 'info',
                   showConfirmButton: false
               });
               util.get("/host/ping/" + id, function(code, message) {
                   swal('操作成功', '连接成功', 'success');
               })
           }
       }
    });
</script>

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