<?php
if (!defined("_GNUBOARD_")) exit;

$_dm = (!empty($_COOKIE['vpnlink_dark']) && $_COOKIE['vpnlink_dark'] === '1')
    || (isset($_g5_vpn_theme_adm) && $_g5_vpn_theme_adm === 'dark');
$_dm_cls = $_dm ? ' vpns-dm' : '';
?>
<style>
/* ── 테마 변수 ── */
.vpns-wrap {
    --vpns-card-bg   : #fff;
    --vpns-card-br   : #dee2e6;
    --vpns-th-bg     : #f4f5f7;
    --vpns-th-color  : #495057;
    --vpns-td-color  : #212529;
    --vpns-muted     : #6c757d;
    --vpns-row-hover : #f8f9fa;
    --vpns-tag-bg    : rgba(13,110,253,0.08);
    --vpns-tag-color : #0a58ca;
    --vpns-tag-br    : rgba(13,110,253,0.25);
    --vpns-well-bg   : #f8f9fa;
    --vpns-well-br   : #dee2e6;
    --vpns-well-color: #495057;
    --vpns-shadow    : 0 1px 4px rgba(0,0,0,0.08);
    --vpns-shadow-hv : 0 3px 10px rgba(0,0,0,0.13);
}
.vpns-dm {
    --vpns-card-bg   : #26262c;
    --vpns-card-br   : #3a3a44;
    --vpns-th-bg     : #1c1c22;
    --vpns-th-color  : #b0b0bc;
    --vpns-td-color  : #c8c8d2;
    --vpns-muted     : #8a8a96;
    --vpns-row-hover : #2e2e38;
    --vpns-tag-bg    : rgba(100,150,255,0.12);
    --vpns-tag-color : #7ab0ff;
    --vpns-tag-br    : rgba(100,150,255,0.3);
    --vpns-well-bg   : #202026;
    --vpns-well-br   : #3a3a44;
    --vpns-well-color: #c0c0cc;
    --vpns-shadow    : 0 1px 4px rgba(0,0,0,0.3);
    --vpns-shadow-hv : 0 3px 10px rgba(0,0,0,0.5);
}

/* ── btn-default ── */
.vpns-dm .btn-default {
    background-image: none !important;
    background-color: #2c2c34 !important;
    border-color: #4a4a54 !important;
    color: #c8c8d2 !important;
}
.vpns-dm .btn-default:hover,
.vpns-dm .btn-default:focus,
.vpns-dm .btn-default:active {
    background-image: none !important;
    background-color: #38383e !important;
    border-color: #5a5a64 !important;
    color: #e4e4ec !important;
}
/* style.css:88의 .btn-default i { color:#444 } 를 다크모드에서 무력화 */
.vpns-dm .btn i { color: inherit !important; }
.vpns-dm .btn-default[disabled],
.vpns-dm .btn-default.disabled {
    background-image: none !important;
    background-color: #202026 !important;
    border-color: #36363e !important;
    color: #66666e !important;
}

/* ── 안내 박스 ── */
.vpns-infobar {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 11px 15px;
    margin-bottom: 14px;
    border-radius: 6px;
    border: 1px solid var(--vpns-well-br);
    background: var(--vpns-well-bg);
    color: var(--vpns-well-color);
    font-size: 13px;
}
.vpns-infobar .vpns-stat {
    white-space: nowrap;
    font-weight: 700;
    font-size: 1.15em;
    color: var(--vpns-td-color);
}
.vpns-infobar .vpns-stat span {
    color: #3b82f6;
}
.vpns-infobar .vpns-divider {
    width: 1px; height: 22px;
    background: var(--vpns-card-br);
    flex-shrink: 0;
}
.vpns-infobar .vpns-guide {
    flex: 1;
    color: var(--vpns-muted);
    font-size: 0.88em;
    line-height: 1.5;
}

/* ── 뷰 전환 바 ── */
.vpns-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}
.vpns-viewhint {
    font-size: 12px;
    color: var(--vpns-muted);
    margin-bottom: 12px;
}

/* ── 카드 공통 ── */
.vpns-card {
    background: var(--vpns-card-bg);
    border: 1px solid var(--vpns-card-br);
    border-radius: 8px;
    height: 100%;
    transition: box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
}
.vpns-card:hover { box-shadow: var(--vpns-shadow-hv); border-color: #6c8ebf; }
.vpns-dm .vpns-card:hover { border-color: #5070a0; }
.vpns-card-body { padding: 14px 15px; }

.vpns-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}
.vpns-badge {
    display: inline-block;
    padding: 3px 9px;
    border-radius: 5px;
    font-weight: 700;
    font-size: 0.8em;
    color: #fff;
    letter-spacing: 0.02em;
}
.vpns-online {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.8em;
    font-weight: 500;
}
.vpns-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.vpns-card .vpns-name {
    font-size: 1em;
    font-weight: 700;
    color: var(--vpns-td-color);
    margin: 0 0 3px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.vpns-card .vpns-ip {
    font-size: 0.82em;
    color: var(--vpns-muted);
    margin-bottom: 8px;
    font-family: monospace;
}
.vpns-tags { margin-bottom: 9px; }
.vpns-tag {
    display: inline-block;
    padding: 2px 7px;
    margin: 0 3px 3px 0;
    border-radius: 4px;
    background: var(--vpns-tag-bg);
    color: var(--vpns-tag-color);
    border: 1px solid var(--vpns-tag-br);
    font-size: 0.78em;
    font-weight: 600;
}
.vpns-card .vpns-vpncount {
    font-size: 0.85em;
    color: var(--vpns-td-color);
    margin-bottom: 3px;
}
.vpns-card .vpns-lastseen {
    font-size: 0.8em;
    color: var(--vpns-muted);
    margin-bottom: 12px;
}
.vpns-card .vpns-lastseen i { margin-right: 3px; }

/* ── 컴팩트 카드 ── */
.vpns-cc {
    display: block;
    text-decoration: none !important;
    background: var(--vpns-card-bg);
    border: 1px solid var(--vpns-card-br);
    border-radius: 6px;
    padding: 9px 10px;
    margin-bottom: 8px;
    transition: box-shadow 0.15s, border-color 0.15s;
    color: inherit;
}
.vpns-cc:hover { box-shadow: var(--vpns-shadow-hv); border-color: #6c8ebf; text-decoration: none !important; color: inherit; }
.vpns-dm .vpns-cc:hover { border-color: #5070a0; }
.vpns-cc.vpns-cc-offline { opacity: 0.65; cursor: default; }
.vpns-cc-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.vpns-cc .vpns-badge { font-size: 0.72em; padding: 2px 6px; }
.vpns-cc .vpns-name {
    font-size: 0.85em;
    font-weight: 700;
    color: var(--vpns-td-color);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 2px;
}
.vpns-cc .vpns-ip {
    font-size: 0.76em;
    color: var(--vpns-muted);
    font-family: monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-bottom: 4px;
}
.vpns-cc .vpns-cc-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 4px;
}
.vpns-cc .vpns-vpncount {
    font-size: 0.76em;
    color: var(--vpns-muted);
}
.vpns-cc .vpns-tag { font-size: 0.72em; padding: 1px 5px; margin: 0; }

/* ── 목록형 테이블 ── */
.vpns-table {
    font-size: 13px;
    margin-bottom: 0;
    color: var(--vpns-td-color);
}
.vpns-table thead th {
    background-color: var(--vpns-th-bg) !important;
    color: var(--vpns-th-color) !important;
    border-color: var(--vpns-card-br) !important;
    font-size: 0.85em;
    font-weight: 600;
    padding: 8px 10px;
    white-space: nowrap;
}
.vpns-table tbody td {
    border-color: var(--vpns-card-br) !important;
    color: var(--vpns-td-color) !important;
    vertical-align: middle;
    padding: 7px 10px;
}
.vpns-table tbody tr:hover td {
    background-color: var(--vpns-row-hover) !important;
}
.vpns-table td .vpns-muted {
    color: var(--vpns-muted) !important;
    font-size: 0.88em;
}

/* ── 빈 목록 ── */
.vpns-dm .alert-info {
    background-color: #162030 !important;
    border-color: #1e3a5f !important;
    color: #7eafdf !important;
}

/* ── 페이지네이션 ── */
.vpns-dm .pagination > li > a,
.vpns-dm .pagination > li > span {
    background-color: #26262c !important;
    border-color: #3a3a44 !important;
    color: #c8c8d2 !important;
}
.vpns-dm .pagination > .active > a,
.vpns-dm .pagination > .active > span {
    background-color: #3f65a8 !important;
    border-color: #3f65a8 !important;
    color: #fff !important;
}

/* ── 로그 모달 (드래그·리사이즈 가능) ── */
#vpnsLogModal .modal           { overflow: hidden; }
#vpnsLogModal .modal-dialog    {
    position: absolute;
    margin: 0;
    width: 94%;
    max-width: 1300px;
    min-width: 480px;
    height: 82vh;
    min-height: 280px;
    resize: both;         /* CSS 네이티브 리사이즈 핸들 */
    overflow: hidden;     /* resize: both 동작 조건 */
    display: flex;
    flex-direction: column;
}
#vpnsLogModal .modal-content   {
    border-radius: 8px;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    height: 100%;
}
#vpnsLogModal .modal-header    {
    padding: 12px 16px;
    flex: 0 0 auto;
    cursor: move;
    user-select: none;
    -webkit-user-select: none;
}
#vpnsLogModal .modal-title     { font-size: 1em; font-weight: 700; }
#vpnsLogModal .modal-body      {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0;
    overflow: hidden;
}
#vpnsLogFrame                  { display: block; border: none; width: 100%; height: 100%; }
/* 다크모드 모달 */
#vpnsLogModal.dm .modal-content { background-color: #1a1a22 !important; border-color: #3a3a44 !important; color: #c8c8d2; }
#vpnsLogModal.dm .modal-header  { border-bottom-color: #3a3a44 !important; }
#vpnsLogModal.dm .close         { color: #c8c8d2 !important; text-shadow: none; opacity: 0.8; }
#vpnsLogModal.dm .close:hover   { color: #fff !important; opacity: 1; }
</style>

<?php /* ── 로그 팝업 모달 (iframe 방식, 드래그·리사이즈 가능) ── */ ?>
<div class="modal fade" id="vpnsLogModal" tabindex="-1" role="dialog" aria-labelledby="vpnsLogModalLabel"
     <?php if ($_dm) echo 'data-dm="1"'; ?>>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="vpnsLogModalLabel">
                    <i class="fa fa-history"></i> 관리자 로그인 이력
                </h4>
            </div>
            <div class="modal-body">
                <iframe id="vpnsLogFrame" src="about:blank" frameborder="0"></iframe>
            </div>
        </div>
    </div>
</div>

<script>
/* ── 뷰 모드 localStorage 복원 (DOM 완성 전 실행) ── */
(function() {
    var KEY      = 'vpns_view_mode';
    var VALID    = ['card', 'compact', 'list'];
    var hasParam = <?php echo isset($_GET['view']) ? 'true' : 'false'; ?>;
    var current  = '<?php echo $view_mode; ?>';

    if (hasParam) {
        /* view 파라미터가 있으면 현재 선택 저장 */
        try { localStorage.setItem(KEY, current); } catch(e) {}
    } else {
        /* view 파라미터 없이 접근 → 저장된 뷰로 이동 */
        try {
            var saved = localStorage.getItem(KEY);
            if (saved && VALID.indexOf(saved) !== -1 && saved !== current) {
                location.replace('?ap=myvpnservers&view=' + saved);
            }
        } catch(e) {}
    }
})();

$(function() {
    var LOG_URL = '<?php echo APMS_PARTNER_URL; ?>/?ap=vpnserver_sso_log&_iframe=1';
    var $modal  = $('#vpnsLogModal');
    var $dlg    = $modal.find('.modal-dialog');
    var frame   = document.getElementById('vpnsLogFrame');

    if (!!$modal.data('dm')) $modal.addClass('dm');

    $('#vpnsLogBtn').on('click', function() { $modal.modal('show'); });

    /* iframe 로드 */
    $modal.on('show.bs.modal', function() {
        if (!frame.src || frame.src === 'about:blank') frame.src = LOG_URL;
    });
    /* 화면 중앙 배치 (열릴 때마다) */
    $modal.on('shown.bs.modal', function() {
        $dlg.css({
            top:  Math.max(10, (window.innerHeight - $dlg.outerHeight()) / 2) + 'px',
            left: Math.max(0,  (window.innerWidth  - $dlg.outerWidth())  / 2) + 'px'
        });
    });
    /* 닫힐 때 위치·크기·src 초기화 */
    $modal.on('hidden.bs.modal', function() {
        frame.src = 'about:blank';
        $dlg.css({ top: '', left: '', width: '', height: '' });
    });

    /* ── 드래그 (헤더를 잡아 이동) ── */
    var drag = { on: false, sx: 0, sy: 0, sl: 0, st: 0 };
    $modal.find('.modal-header').on('mousedown', function(e) {
        if ($(e.target).closest('.close').length) return;
        drag.on = true;
        drag.sx = e.clientX;  drag.sy = e.clientY;
        drag.sl = parseInt($dlg.css('left')) || 0;
        drag.st = parseInt($dlg.css('top'))  || 0;
        e.preventDefault();
    });
    $(document).on('mousemove.vpnslog', function(e) {
        if (!drag.on) return;
        $dlg.css({
            left: drag.sl + e.clientX - drag.sx + 'px',
            top:  drag.st + e.clientY - drag.sy + 'px'
        });
    }).on('mouseup.vpnslog', function() { drag.on = false; });
});
</script>

<div class="vpns-wrap<?php echo $_dm_cls; ?>">

<h1 style="margin-bottom:14px;"><i class="fa fa-server"></i> 내 VPN서버관리</h1>

<div class="vpns-infobar">
    <div class="vpns-stat">서버 <span><?php echo number_format($total_count); ?></span>대</div>
    <div class="vpns-divider"></div>
    <div class="vpns-guide">
        클릭하면 해당 서버의 관리자 패널로 자동 로그인됩니다.
        서버 추가는 각 VPN 서버 관리 패널의 <strong>판매자 인증 &amp; 서버 등록</strong>에서 진행합니다.
    </div>
</div>

<div class="vpns-toolbar">
    <div style="display:flex; gap:6px;">
        <a href="?ap=myvpnservers&view=card"    class="btn btn-sm <?php echo ($view_mode === 'card')    ? 'btn-primary' : 'btn-default'; ?>"><i class="fa fa-th-large"></i> 카드형</a>
        <a href="?ap=myvpnservers&view=compact" class="btn btn-sm <?php echo ($view_mode === 'compact') ? 'btn-primary' : 'btn-default'; ?>"><i class="fa fa-th"></i> 컴팩트형</a>
        <a href="?ap=myvpnservers&view=list"    class="btn btn-sm <?php echo ($view_mode === 'list')    ? 'btn-primary' : 'btn-default'; ?>"><i class="fa fa-list"></i> 목록형</a>
    </div>
    <button type="button" id="vpnsLogBtn" class="btn btn-default btn-sm">
        <i class="fa fa-history fa-fw"></i> 관리자 로그인 이력
    </button>
</div>
<div class="vpns-viewhint">
    <?php if ($view_mode === 'card') { ?>
        <i class="fa fa-info-circle"></i> 카드형 — 1~5대 서버를 상세하게 볼 때 적합합니다.
    <?php } elseif ($view_mode === 'compact') { ?>
        <i class="fa fa-info-circle"></i> 컴팩트형 — 수십 대를 한눈에 격자로 볼 때 적합합니다.
    <?php } else { ?>
        <i class="fa fa-info-circle"></i> 목록형 — 수백 대를 표로 빠르게 스캔할 때 적합합니다.
    <?php } ?>
</div>

<?php if (empty($list)) { ?>
    <div class="alert alert-info" style="margin-top:6px;">
        <i class="fa fa-info-circle"></i>
        아직 등록된 VPN 서버가 없습니다.
        각 VPN 서버 관리 패널(system_info.php)에서 판매자 계정으로 인증하면 이곳에 표시됩니다.
    </div>
<?php } else { ?>

    <?php
    foreach ($list as $k => $srv) {
        $list[$k]['sso_url']      = G5_URL . '/mylib/ikev2_partner_server_sso.php?vs_no=' . (int)$srv['vs_no'];
        $list[$k]['display_name'] = $srv['vs_alias'] !== '' ? $srv['vs_alias'] : $srv['vs_hostname'];
        $list[$k]['vpn_types_arr'] = array_filter(array_map('trim', explode(',', (string)($srv['vs_vpn_types'] ?? ''))));
    }
    ?>

    <?php if ($view_mode === 'card') { ?>

    <div class="row" style="margin-top:4px;">
    <?php foreach ($list as $srv) {
        $gc = get_text($srv['grade_color']);
    ?>
        <div class="col-sm-6 col-md-4 col-lg-3" style="margin-bottom:16px; display:flex;">
            <div class="vpns-card" style="border-top:3px solid <?php echo $gc; ?>; width:100%;">
                <div class="vpns-card-body">
                    <div class="vpns-card-header">
                        <span class="vpns-badge" style="background:<?php echo $gc; ?>;">
                            <?php echo $srv['vs_grade'] ? get_text($srv['vs_grade']) : '미진단'; ?>
                        </span>
                        <span class="vpns-online" style="color:<?php echo $srv['is_online'] ? '#22c55e' : '#9ca3af'; ?>;">
                            <span class="vpns-dot" style="background:<?php echo $srv['is_online'] ? '#22c55e' : '#9ca3af'; ?>;"></span>
                            <?php echo $srv['is_online'] ? '온라인' : '오프라인'; ?>
                        </span>
                    </div>

                    <div class="vpns-name" title="<?php echo get_text($srv['display_name']); ?>">
                        <?php echo get_text($srv['display_name']); ?>
                    </div>
                    <div class="vpns-ip"><?php echo get_text($srv['vs_ip']); ?></div>

                    <?php if (!empty($srv['vpn_types_arr'])) { ?>
                    <div class="vpns-tags">
                        <?php foreach ($srv['vpn_types_arr'] as $vt) { ?>
                            <span class="vpns-tag"><?php echo get_text($vt); ?></span>
                        <?php } ?>
                    </div>
                    <?php } ?>

                    <div class="vpns-vpncount">
                        VPN ID: <strong><?php echo number_format((int)$srv['vs_current_vpn_count']); ?></strong>
                        <span style="color:var(--vpns-muted);">/ 권장 <?php echo number_format((int)$srv['vs_recommended_vpn_count']); ?>개</span>
                    </div>
                    <div class="vpns-lastseen">
                        <i class="fa fa-clock-o"></i>
                        마지막 접속:
                        <?php echo $srv['vs_last_seen_at'] ? date('Y-m-d H:i', strtotime($srv['vs_last_seen_at'])) : '기록 없음'; ?>
                    </div>

                    <?php if ($srv['vs_admin_url']) { ?>
                        <a href="<?php echo get_text($srv['sso_url']); ?>" target="_blank" rel="noopener"
                           class="btn btn-primary btn-sm btn-block">
                            <i class="fa fa-external-link"></i> 서버 관리 열기
                        </a>
                    <?php } else { ?>
                        <button class="btn btn-default btn-sm btn-block" disabled>
                            <i class="fa fa-exclamation-circle"></i> 관리 주소 미등록
                        </button>
                    <?php } ?>
                </div>
            </div>
        </div>
    <?php } ?>
    </div>

    <?php } elseif ($view_mode === 'compact') { ?>

    <div class="row" style="margin-top:4px;">
    <?php foreach ($list as $srv) {
        $gc      = get_text($srv['grade_color']);
        $has_url = !empty($srv['vs_admin_url']);
    ?>
        <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
            <a href="<?php echo $has_url ? get_text($srv['sso_url']) : '#'; ?>"
               target="<?php echo $has_url ? '_blank' : '_self'; ?>"
               rel="noopener"
               class="vpns-cc<?php echo $has_url ? '' : ' vpns-cc-offline'; ?>"
               style="border-left:3px solid <?php echo $gc; ?>;"
               <?php echo !$has_url ? 'onclick="return false;"' : ''; ?>>
                <div class="vpns-cc-top">
                    <span class="vpns-badge" style="background:<?php echo $gc; ?>;">
                        <?php echo $srv['vs_grade'] ? get_text($srv['vs_grade']) : '?'; ?>
                    </span>
                    <span class="vpns-dot" style="background:<?php echo $srv['is_online'] ? '#22c55e' : '#9ca3af'; ?>;"
                          title="<?php echo $srv['is_online'] ? '온라인' : '오프라인'; ?>"></span>
                </div>
                <div class="vpns-name" title="<?php echo get_text($srv['display_name']); ?>">
                    <?php echo get_text($srv['display_name']); ?>
                </div>
                <div class="vpns-ip"><?php echo get_text($srv['vs_ip']); ?></div>
                <div class="vpns-cc-footer">
                    <span class="vpns-vpncount">
                        ID <?php echo (int)$srv['vs_current_vpn_count']; ?>/<?php echo number_format((int)$srv['vs_recommended_vpn_count']); ?>
                    </span>
                    <?php if (!empty($srv['vpn_types_arr'])) { ?>
                        <span class="vpns-tag"><?php echo get_text(reset($srv['vpn_types_arr'])); ?></span>
                    <?php } ?>
                </div>
            </a>
        </div>
    <?php } ?>
    </div>

    <?php } else { /* 목록형 */ ?>

    <div class="table-responsive" style="margin-top:4px;">
    <table class="table table-hover vpns-table">
        <thead>
            <tr>
                <th style="width:32px; text-align:center;"></th>
                <th style="width:72px;">등급</th>
                <th>별명 / 호스트명</th>
                <th style="width:130px;">IP</th>
                <th style="width:110px;">프로토콜</th>
                <th style="width:100px;">VPN ID</th>
                <th style="width:130px;">마지막 접속</th>
                <th style="width:80px;"></th>
            </tr>
        </thead>
        <tbody>
        <?php foreach ($list as $srv) { ?>
            <tr>
                <td style="text-align:center;">
                    <span class="vpns-dot"
                          style="background:<?php echo $srv['is_online'] ? '#22c55e' : '#9ca3af'; ?>;"
                          title="<?php echo $srv['is_online'] ? '온라인' : '오프라인'; ?>"></span>
                </td>
                <td>
                    <span class="vpns-badge" style="background:<?php echo get_text($srv['grade_color']); ?>;">
                        <?php echo $srv['vs_grade'] ? get_text($srv['vs_grade']) : '-'; ?>
                    </span>
                </td>
                <td title="<?php echo get_text($srv['display_name']); ?>">
                    <strong><?php echo get_text($srv['display_name']); ?></strong>
                    <?php if ($srv['vs_alias'] !== '' && $srv['vs_hostname'] !== '') { ?>
                        <br><span class="vpns-muted" style="font-family:monospace; font-size:0.82em;"><?php echo get_text($srv['vs_hostname']); ?></span>
                    <?php } ?>
                </td>
                <td>
                    <span class="vpns-muted" style="font-family:monospace;"><?php echo get_text($srv['vs_ip']); ?></span>
                </td>
                <td>
                    <?php foreach ($srv['vpn_types_arr'] as $vt) { ?>
                        <span class="vpns-tag"><?php echo get_text($vt); ?></span>
                    <?php } ?>
                </td>
                <td>
                    <?php echo number_format((int)$srv['vs_current_vpn_count']); ?>
                    <span class="vpns-muted">/ <?php echo number_format((int)$srv['vs_recommended_vpn_count']); ?></span>
                </td>
                <td>
                    <span class="vpns-muted">
                        <?php echo $srv['vs_last_seen_at'] ? date('Y-m-d H:i', strtotime($srv['vs_last_seen_at'])) : '-'; ?>
                    </span>
                </td>
                <td>
                    <?php if ($srv['vs_admin_url']) { ?>
                        <a href="<?php echo get_text($srv['sso_url']); ?>"
                           target="_blank" rel="noopener"
                           class="btn btn-primary btn-xs">
                            <i class="fa fa-external-link"></i> 관리
                        </a>
                    <?php } else { ?>
                        <span class="vpns-muted">—</span>
                    <?php } ?>
                </td>
            </tr>
        <?php } ?>
        </tbody>
    </table>
    </div>

    <?php } ?>

    <div class="text-center" style="margin-top:12px;">
        <ul class="pagination pagination-sm en">
            <?php echo apms_paging($write_pages, $page, $total_page, $list_page); ?>
        </ul>
    </div>

<?php } ?>

</div><!-- /.vpns-wrap -->
