{$layout}
{$template "menu"}

<second-menu>
    <menu-item href="" @click.prevent="createRoute()">
        <i class="pi pi-pen-to-square"></i>
        创建线路
    </menu-item>
</second-menu>

<form class="ui form" action="/ns/routes" method="get" v-show="categories.length > 0">
    <div class="ui fields inline">
        <div class="ui field">
            <b-select
                name="categoryId"
                v-model="categoryId"
                :options="[
                    {label: '[选择分类]', value: '0'},
                    ...categories.map(category => ({
                        label: category.name,
                        value: category.id,
                    }))
                ]"
            ></b-select>

            <!-- <select name="categoryId" class="ui dropdown" v-model="categoryId">
                <option value="0">[选择分类]</option>
                <option v-for="category in categories" :value="category.id">{{category.name}}</option>
            </select> -->
        </div>
        <div class="ui field">
            <button class="ui button" type="submit">搜索</button>
            &nbsp;
            <a href="/ns/routes" v-if="categoryId > 0">[清除条件]</a>
        </div>
    </div>
</form>

<div class="margin"></div>

<div v-if="routes.length == 0">
    <b-empty><span v-if="categoryId > 0">当前分类下</span>暂时还没有线路。</b-empty>
</div>

<div v-show="routes.length > 0">
    <table class="ui table selectable celled" id="sortable-table">
        <thead>
            <tr>
                <th style="width: 3em"></th>
                <th>线路名称</th>
                <th class="two wide">代号</th>
                <th class="two wide">优先级 &nbsp; <tip-icon content="优先级越高越优先匹配。"></tip-icon></th>
                <th class="two wide">公用&nbsp; <tip-icon content="设置为“公用”的线路允许用户使用。"></tip-icon></th>
                <th class="two wide">状态</th>
                <th class="two op">操作</th>
            </tr>
        </thead>
        <tbody v-for="route in routes" :v-id="route.id">
            <tr>
                <td style="text-align: center;"><i class="icon bars handle grey"></i> </td>
                <td><a href="" @click.prevent="updateRoute(route.id)">{{route.name}} <i class="icon expand small"></i></a>
                    <div>
                        <grey-label v-if="route.category.id > 0">{{route.category.name}}</grey-label>
                        <grey-label v-if="route.category.id == 0" class="disabled">[未分类]</grey-label>
                    </div>
                </td>
                <td>id:{{route.id}}</td>
                <td>
                    <span v-if="route.priority > 0">{{route.priority}}</span>
                    <span v-else class="disabled">0</span>
                </td>
                <td>
                    <span v-if="route.isPublic" class="green">Y</span>
                    <span v-else class="disabled">N</span>
                </td>
                <td>
                    <label-on :v-is-on="route.isOn"></label-on>
                </td>
                <td>
                    <a href="" @click.prevent="updateRoute(route.id)">修改</a> &nbsp;
                    <a href="" @click.prevent="deleteRoute(route.id)">删除</a>
                </td>
            </tr>
        </tbody>
    </table>

    <p class="comment" v-if="routes.length > 0">可以拖动左侧的<i class="icon bars"></i>排序；其中只有设置为"公用"的线路才允许用户使用。</p>
</div>