{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/article/form" class="btn btn-primary">＋ 发布文章</a>
</div>
<div class="card">
  <div class="card-hd flex-wrap gap-2">
    <form id="searchForm" class="fi" style="flex:1">
      <select name="category_id" class="fctrl" style="min-width:130px">
        <option value="">全部分类</option>
        {{range .categories}}
        <option value="{{.ID}}" {{if eq $.category_id (printf "%d" .ID)}}selected{{end}}>{{.Name}}</option>
        {{if .Children}}
        {{range .Children}}
        <option value="{{.ID}}" {{if eq $.category_id (printf "%d" .ID)}}selected{{end}}>├ {{.Name}}</option>
        {{if .Children}}
        {{range .Children}}
        <option value="{{.ID}}" {{if eq $.category_id (printf "%d" .ID)}}selected{{end}}>│ ├ {{.Name}}</option>
        {{end}}
        {{end}}
        {{end}}
        {{end}}
        {{end}}
      </select>
      <input type="text" name="keyword" class="fctrl" placeholder="搜索标题…" value="{{.keyword}}" style="min-width:180px">
      <button type="submit" class="btn btn-primary">搜索</button>
      {{if or .category_id .keyword}}<a href="/admin/article" class="btn btn-ghost">清除</a>{{end}}
    </form>
  </div>
  <div class="tbl-wrap">
  <form id="sortForm">
  <table class="tbl">
    <thead>
      <tr>
        <th style="width:34px"><input type="checkbox" id="selectAll"></th>
        <th style="width:44px">ID</th>
        <th>标题</th>
        <th style="width:90px">栏目</th>
        <th style="width:50px">作者</th>
        <th style="width:45px">点击</th>
        <th style="width:60px">排序</th>
        <th style="width:70px">状态</th>
        <th style="width:120px">发布时间</th>
        <th style="width:165px">操作</th>
      </tr>
    </thead>
    <tbody>
      {{range .articles}}
      <tr>
        <td><input type="checkbox" name="ids" value="{{.ID}}"></td>
        <td><span class="badge badge-id">{{.ID}}</span></td>
        <td>{{if eq .IsTop 1}}<span class="badge badge-top">置顶</span>{{end}}<strong>{{.Title}}</strong>{{if and (ne .Category.ID 0) (eq .Category.Type "page")}} <span class="badge badge-yellow">单页</span>{{end}}</td>
        <td><span class="badge {{if eq .Category.Type "page"}}badge-yellow{{else}}badge-blue{{end}}">{{.Category.Name}}</span></td>
        <td class="text-muted text-sm">{{.Author}}</td>
        <td class="text-muted text-sm">{{.Hits}}</td>
        <td><input type="number" name="sort_{{.ID}}" class="fctrl" style="width:54px;text-align:center" value="{{.Sort}}" min="0"></td>
        <td>{{if eq .Status 1}}<span class="badge badge-green">已发布</span>{{else}}<span class="badge badge-yellow">草稿</span>{{end}}</td>
        <td class="text-muted text-sm">{{.CreatedAt.Format "2006-01-02"}}<br>{{.CreatedAt.Format "15:04"}}</td>
        <td><div class="tbl-acts">
          <a href="/admin/article/form?id={{.ID}}" class="btn btn-sm btn-info">编辑</a>
          <a href="/article/{{.ID}}" target="_blank" class="btn btn-sm btn-ghost">查看</a>
           <button type="button" class="btn btn-sm btn-danger" onclick="articleDel({{.ID}})">删除</button>
        </div></td>
      </tr>
      {{else}}
      <tr><td colspan="10"><div class="empty"><div class="empty-ico">📄</div><p>暂无文章</p></div></td></tr>
      {{end}}
    </tbody>
  </table>
  </form>
  </div>
  <div class="card-bd" style="padding-top:12px">
    <div class="flex items-center justify-between flex-wrap gap-2">
      <div class="flex gap-2">
        <button class="btn btn-sm btn-primary" onclick="saveArticleSort()">保存排序</button>
        <button class="btn btn-sm btn-danger" onclick="articleBatchDel()">批量删除</button>
      </div>
      {{if gt .pagination.TotalPage 1}}
      <div class="pages">
        {{if gt .pagination.Page 1}}
        <a href="?page={{sub .pagination.Page 1}}{{if .category_id}}&category_id={{.category_id}}{{end}}{{if .keyword}}&keyword={{.keyword}}{{end}}" class="page-btn">‹ 上一页</a>
        {{end}}
        {{range $i := pages .pagination.Page .pagination.TotalPage}}
        <a href="?page={{$i}}{{if $.category_id}}&category_id={{$.category_id}}{{end}}{{if $.keyword}}&keyword={{$.keyword}}{{end}}" class="page-btn {{if eq $i $.pagination.Page}}active{{end}}">{{$i}}</a>
        {{end}}
        {{if lt .pagination.Page .pagination.TotalPage}}
        <a href="?page={{add .pagination.Page 1}}{{if .category_id}}&category_id={{.category_id}}{{end}}{{if .keyword}}&keyword={{.keyword}}{{end}}" class="page-btn">下一页 ›</a>
        {{end}}
      </div>
      {{end}}
    </div>
  </div>
</div>
<script>
document.getElementById('selectAll').addEventListener('change',function(){document.querySelectorAll('input[name="ids"]').forEach(function(c){c.checked=this.checked},this)});
function saveArticleSort(){
  var btn=document.querySelector('.card-bd .btn-primary');btn.disabled=true;btn.textContent='保存中…';
  fetch('/admin/article/sort',{method:'POST',body:new FormData(document.getElementById('sortForm'))})
    .then(function(r){return r.json()})
    .then(function(d){toast(d.msg,d.code===0?'success':'error');if(d.code===0)setTimeout(function(){location.reload()},600);else{btn.disabled=false;btn.textContent='保存排序'}})
    .catch(function(){btn.disabled=false;btn.textContent='保存排序';toast('请求失败','error')});
}
function showModal(t,m,cb){
  var o=document.createElement('div');
  o.style.cssText='position:fixed;inset:0;background:rgba(15,23,42,.3);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;display:flex;align-items:center;justify-content:center;font-family:system-ui,sans-serif';
  o.innerHTML='<div style="background:#fff;border-radius:12px;padding:28px 32px 22px;min-width:340px;box-shadow:0 20px 60px rgba(0,0,0,.18);text-align:center"><h3 style="margin:0 0 10px;font-size:18px;color:#1e293b">'+t+'</h3><p style="margin:0 0 22px;color:#64748b;font-size:14px;line-height:1.6">'+m+'</p><div style="display:flex;gap:10px;justify-content:center"><button class="btn btn-secondary" id="mc" style="min-width:80px;cursor:pointer">取消</button><button class="btn btn-danger" id="md" style="min-width:80px;cursor:pointer">确认删除</button></div></div>';
  document.body.appendChild(o);
  document.getElementById('mc').onclick=function(){o.remove()};
  document.getElementById('md').onclick=function(){o.remove();cb()};
  o.onclick=function(e){if(e.target===o)o.remove()};
}
function articleDel(id){
  showModal('确认删除','确定要删除该文章吗？此操作无法恢复。',function(){
    var f=new FormData();f.append('id',id);
    fetch('/admin/article/delete',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){try{toast(d.msg,d.code===0?'success':'error')}catch(e){alert(d.msg)};if(d.code===0)setTimeout(function(){location.reload()},600)})
      .catch(function(){try{toast('请求失败','error')}catch(e){alert('请求失败')}});
  });
}
function articleBatchDel(){
  var ids=[];document.querySelectorAll('input[name="ids"]:checked').forEach(function(c){ids.push(c.value)});
  if(!ids.length){try{toast('请选择文章','warning')}catch(e){alert('请选择文章')};return}
  showModal('批量删除','确定删除选中的 '+ids.length+' 篇文章吗？',function(){
    var f=new FormData();f.append('ids',ids.join(','));
    fetch('/admin/article/batch_delete',{method:'POST',body:f})
      .then(function(r){return r.json()})
      .then(function(d){try{toast(d.msg,d.code===0?'success':'error')}catch(e){alert(d.msg)};if(d.code===0)setTimeout(function(){location.reload()},600)})
      .catch(function(){try{toast('请求失败','error')}catch(e){alert('请求失败')}});
  });
}
</script>
    </div>
  </div>

</body>
</html>