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

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

    <div class="twelve wide column">
        {{{if .IsAdmin}}}
            <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>
        {{{end}}}
        <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 celled table">
            <thead>
            <tr>
                <th>ID</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>{{{.Port}}}</td>
                <td>{{{.Remark}}}</td>
                <td class="operation">
                    {{{if $.IsAdmin}}}
                    <a class="ui purple button"  href="/host/edit/{{{.Id}}}">编辑</a>
                    <button class="ui positive button" onclick="util.removeConfirm('/host/remove/{{{.Id}}}')">删除</button><br>
                    {{{end}}}
                    <div style="margin-top: 5px;">
                        <a class="ui twitter button" href="/task?host_id={{{.Id}}}">查看任务</a>
                        {{{if $.IsAdmin}}}
                        <button class="ui blue button" @click="ping({{{.Id}}})">连接测试</button>
                        {{{end}}}
                    </div>
                </td>
            </tr>
            {{{end}}}
            </tbody>
        </table>
        {{{ template "common/pagination" .}}}
    </div>
</div>

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

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