{extend name="layout" /}
{block name="title"}附近文章{/block}
{block name="content"}
<div class="main article">
    <div class="layui-tab layui-tab-brief">
        <ul class="layui-tab-title"><li class="layui-this">附近文章（半径 {$radius} km）</li></ul>
    </div>
    <div id="geo-tip" class="item"><div class="item-content"><h3>正在获取您的位置…</h3></div></div>
    {if empty($list)}
    <div class="item"><div class="item-content"><h3>附近暂无文章</h3><p>可在 URL 手动传 ?lat=&lng= 查看</p></div></div>
    {else}
    {volist name="list" id="item"}
    <div class="item">
        <div class="item-content">
            <h3><a href="{$item.url}">{$item.title}</a></h3>
            <p class="meta"><span>{$item.category}</span>{if $item.distance}<span>约 {$item.distance} km</span>{/if}</p>
        </div>
    </div>
    {/volist}
    {/if}
</div>
<script>
(function(){
    var tip = document.getElementById('geo-tip');
    if (navigator.geolocation) {
        navigator.geolocation.getCurrentPosition(function(p){
            if (tip) tip.style.display='none';
            window.location.href = '/blog/nearby?lat='+p.coords.latitude+'&lng='+p.coords.longitude+'&radius=10';
        }, function(){ if (tip) tip.querySelector('h3').textContent='获取位置失败，可在 URL 手动传 ?lat=&lng='; });
    } else if (tip) {
        tip.querySelector('h3').textContent='浏览器不支持定位，请在 URL 手动传 ?lat=&lng=';
    }
})();
</script>
{/block}