{template "header.html"}

<style>
.api-join-wrap {
    --aj-primary: #3598dc;
    --aj-primary-hover: #2a7ab9;
    --aj-border: #e8ecf1;
    --aj-bg: #f7f9fc;
    --aj-text: #3d4a5c;
    --aj-muted: #8a96a8;
    --aj-radius: 6px;
    --aj-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
}
.api-join-wrap .api-join-search {
    background: var(--aj-bg);
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    padding: 12px 14px;
    margin-bottom: 14px;
    box-shadow: var(--aj-shadow);
}
.api-join-wrap .api-join-search form {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.api-join-wrap .api-join-search .search-input-wrap {
    flex: 1;
    min-width: 180px;
    position: relative;
}
.api-join-wrap .api-join-search .search-input-wrap .fa-search {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--aj-muted);
    font-size: 13px;
    pointer-events: none;
}
.api-join-wrap .api-join-search .form-control {
    height: 34px;
    padding-left: 32px;
    border-color: #dce3ed;
    border-radius: var(--aj-radius);
    box-shadow: none;
    transition: border-color .2s, box-shadow .2s;
}
.api-join-wrap .api-join-search .form-control:focus {
    border-color: var(--aj-primary);
    box-shadow: 0 0 0 3px rgba(53, 152, 220, 0.12);
}
.api-join-wrap .api-join-search .btn.blue {
    height: 34px;
    padding: 0 16px;
    border-radius: var(--aj-radius);
    font-weight: 500;
    letter-spacing: 0.02em;
    transition: background-color .2s, transform .15s;
}
.api-join-wrap .api-join-search .btn.blue:hover {
    background-color: var(--aj-primary-hover);
}
.api-join-wrap .api-join-search .btn.blue:active {
    transform: scale(0.98);
}
.api-join-wrap .table-scrollable {
    border: 1px solid var(--aj-border);
    border-radius: var(--aj-radius);
    overflow: hidden;
    box-shadow: var(--aj-shadow);
    background: #fff;
}
.api-join-wrap .api-join-table {
    margin-bottom: 0;
    border: 0;
}
.api-join-wrap .api-join-table thead tr.heading th {
    background: linear-gradient(180deg, #f9fbfd 0%, #f1f5f9 100%);
    color: var(--aj-text);
    font-weight: 600;
    font-size: 12px;
    border-bottom: 1px solid var(--aj-border);
    padding: 10px 12px;
    white-space: nowrap;
}
.api-join-wrap .api-join-table thead tr.heading th.myselect {
    width: 42px;
    text-align: center;
}
.api-join-wrap .api-join-table tbody td {
    padding: 9px 12px;
    color: var(--aj-text);
    font-size: 13px;
    vertical-align: middle;
    border-color: #eef2f6;
    transition: background-color .15s;
}
.api-join-wrap .api-join-table tbody tr:hover td {
    background-color: #f5f9fd;
}
.api-join-wrap .api-join-table tbody tr:nth-child(even) td {
    background-color: #fbfcfe;
}
.api-join-wrap .api-join-table tbody tr:nth-child(even):hover td {
    background-color: #f5f9fd;
}
.api-join-wrap .api-join-table tbody td:first-child + td {
    color: var(--aj-muted);
    font-family: Consolas, Monaco, monospace;
    font-size: 12px;
}
.api-join-wrap .api-join-table .myselect {
    text-align: center;
}
.api-join-wrap .api-join-table .mt-checkbox > span {
    border-radius: 3px;
}
.api-join-wrap .api-join-footer {
    padding: 14px 0 4px;
    margin: 0;
}
.api-join-wrap .api-join-footer .pagination {
    margin: 0;
}
.api-join-wrap .api-join-footer .pagination > li > a,
.api-join-wrap .api-join-footer .pagination > li > span {
    border-radius: var(--aj-radius);
    margin: 0 2px;
    color: var(--aj-text);
    border-color: var(--aj-border);
    transition: all .15s;
}
.api-join-wrap .api-join-footer .pagination > li > a:hover {
    background: var(--aj-bg);
    border-color: #c5d3e3;
    color: var(--aj-primary);
}
.api-join-wrap .api-join-footer .pagination > .active > a,
.api-join-wrap .api-join-footer .pagination > .active > a:hover,
.api-join-wrap .api-join-footer .pagination > .active > a:focus,
.api-join-wrap .api-join-footer .pagination > .active > span,
.api-join-wrap .api-join-footer .pagination > .active > span:hover,
.api-join-wrap .api-join-footer .pagination > .active > span:focus,
.api-join-wrap .api-join-footer .pagination > li.active > a,
.api-join-wrap .api-join-footer .pagination > li.active > a:hover,
.api-join-wrap .api-join-footer .pagination > li.active > span {
    color: #fff;
    background: var(--aj-primary);
    border-color: var(--aj-primary);
}
.api-join-wrap .api-join-empty td {
    text-align: center;
    color: var(--aj-muted);
    padding: 36px 12px !important;
    font-size: 13px;
}
.api-join-wrap .api-join-empty td:before {
    content: "\f07b";
    font-family: FontAwesome;
    display: block;
    font-size: 28px;
    color: #c5d0dc;
    margin-bottom: 8px;
}
</style>

<div class="api-join-wrap">
    <div class="api-join-search table-search-tool">
        <form action="{SELF}" method="get">
            {$search}
            <div class="search-input-wrap">
                <i class="fa fa-search"></i>
                <input type="text" class="form-control" placeholder="{dr_lang('输入关键词搜索')}" value="{$param['keyword']}" name="keyword" />
            </div>
            <button type="submit" class="btn blue btn-sm onloading" name="submit">
                <i class="fa fa-search"></i> {dr_lang('搜索')}
            </button>
        </form>
    </div>

    <form class="form-horizontal" role="form" id="myform">
        {dr_form_hidden()}
        <input type="hidden" name="isajax" value="1">
        <div class="table-scrollable">
            <table class="table table-striped table-bordered table-hover table-checkable dataTable api-join-table">
                <thead>
                <tr class="heading">
                    <th class="myselect">
                        <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="group-checkable" data-set=".checkboxes" />
                            <span></span>
                        </label>
                    </th>
                    <th width="100">Id</th>
                    {loop $field['setting']['option']['field'] $tt}
                    {if $tt['field']}
                    <th width="{$tt['width']}">{$tt['name']}</th>
                    {/if}
                    {/loop}
                </tr>
                </thead>
                <tbody>
                {table table=$table where=$where order=updatetime page=1 pagesize=$pagesize urlrule=$urlrule}
                <tr class="odd gradeX" id="dr_row_{$t.id}">
                    <td class="myselect">
                        <label class="mt-table mt-checkbox mt-checkbox-single mt-checkbox-outline">
                            <input type="checkbox" class="checkboxes" name="ids[]" value="{$t.id}" />
                            <span></span>
                        </label>
                    </td>
                    <td>{$t.id}</td>
                    {loop $field['setting']['option']['field'] $tt}
                    {if $tt['field']}
                    <td>{dr_list_function($tt.func, $t[$tt['field']], $param, $t, NULL, NULL)}</td>
                    {/if}
                    {/loop}
                </tr>
                {/table}
                </tbody>
            </table>
        </div>

        <div class="row fc-list-footer api-join-footer">
            <div class="col-md-12 text-center">
                {$pages}
            </div>
        </div>
    </form>
</div>

<script>
    $(function () {
        var $tbody = $('.api-join-table tbody');
        if ($tbody.children('tr').length === 0) {
            var colCount = $('.api-join-table thead th').length || 1;
            $tbody.append('<tr class="api-join-empty"><td colspan="' + colCount + '">' + '{dr_lang('暂无数据')}' + '</td></tr>');
        }

        $('.pagination a').click(function () {
            if ($('.checkboxes').is(':checked')) {
                var url = $(this).attr('href');
                var msg = '{dr_lang('离开本页面后，当前选择的项目将被取消')}';
                layer.confirm(
                    msg,
                    {
                        icon: 3,
                        shade: 0,
                        title: lang['ts'],
                        btn: [lang['ok'], lang['esc']]
                    }, function(index){
                        window.location.href = url;
                        return true;
                    });
                return false;
            }
        });
    })
</script>
{template "footer.html"}