{% 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" . %}