{$layout}
{$template "../menu"}

<second-menu>
    <menu-item @click.prevent="createReporter">[添加终端]</menu-item>
</second-menu>

<form class="ui form" method="get" action="/clusters/monitors/reporters">
    <div class="ui fields inline">
        <div class="ui field">
            <input type="text" name="keyword" v-model="keyword" placeholder="名称、地域、IP..."/>
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
        </div>
    </div>
</form>


<p class="comment" v-if="reporters.length == 0">暂时还没有终端。</p>

<table class="ui table selectable celled" v-if="reporters.length > 0">
    <thead>
        <tr>
            <th>终端名称</th>
            <th>区域</th>
            <th>网络提供商</th>
            <th>当前IP</th>
            <th class="one wide">状态</th>
            <th class="two op">操作</th>
        </tr>
    </thead>
    <tr v-for="reporter in reporters">
        <td>
            <a :href="Tea.url('.reporter', {reporterId: reporter.id})"><keyword :v-word="keyword">{{reporter.name}}</keyword></a>
        </td>
        <td>
            <span v-if="reporter.location.length > 0"><keyword :v-word="keyword">{{reporter.location}}</keyword></span>
            <span v-else-if="reporter.status.location.length > 0" class="grey"><keyword :v-word="keyword">{{reporter.status.location}}</keyword></span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span v-if="reporter.isp.length > 0"><keyword :v-word="keyword">{{reporter.isp}}</keyword></span>
            <span v-else-if="reporter.status.isp.length > 0" class="grey"><keyword :v-word="keyword">{{reporter.status.isp}}</keyword></span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span v-if="reporter.status.ip.length > 0"><keyword :v-word="keyword">{{reporter.status.ip}}</keyword></span>
            <span v-else class="disabled">-</span>
        </td>
        <td>
            <span v-if="!reporter.isOn" class="red">禁用</span>
            <span v-else-if="!reporter.isActive" class="red">离线</span>
            <span v-else class="green">在线</span>
        </td>
        <td>
            <a :href="Tea.url('.reporter', {reporterId: reporter.id})">详情</a> &nbsp;
            <a href="" @click.prevent="deleteReporter(reporter.id)">删除</a>
        </td>
    </tr>
</table>

<div class="page" v-html="page"></div>