{{template "layout.html" .}}
<div class="flex items-center justify-between" style="margin-bottom:20px">
  <div></div>
  <a href="/admin/article/form?model_id={{.modelType.ID}}" class="btn btn-primary">＋ 发布{{.modelType.Name}}</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:140px" onchange="this.form.submit()">
        <option value="">全部分类</option>
        {{range .categories}}
        <option value="{{.Category.ID}}" {{if eq $.filterCatID .Category.ID}}selected{{end}}>{{if gt .Depth 0}}{{range seq .Depth}}├─{{end}}{{end}}{{.Category.Name}}</option>
        {{end}}
      </select>
      <input type="text" name="keyword" class="fctrl" placeholder="搜索标题…" value="{{.keyword}}" style="min-width:200px">
      <button type="submit" class="btn btn-primary">搜索</button>
      {{if or .keyword .filterCatID}}<a href="/admin/model_content/{{.modelType.ID}}" 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;text-align:center">栏目</th>
        <th style="width:70px">作者</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></td>
        <td style="text-align:center"><span class="badge badge-blue">{{.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>暂无{{$.modelType.Name}}</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}}&keyword={{.keyword}}&category_id={{.filterCatID}}" class="page-btn">‹ 上一页</a>
        {{end}}
        {{range $i := pages .pagination.Page .pagination.TotalPage}}
        <a href="?page={{$i}}&keyword={{$.keyword}}&category_id={{$.filterCatID}}" 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}}&keyword={{.keyword}}&category_id={{.filterCatID}}" 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>

</body>
</html>