{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{$model.title} · {lang admin.content}{lang admin.content_list_suffix}</div>
    <div class="nv-page-desc">{lang admin.model_id} <span class="nv-tag">{$model.name}</span>, {lang admin.total} {$pager.total} {lang admin.unit_items}{lang admin.content}</div>
  </div>
  <div class="nv-page-actions">
    <a class="nv-btn" href="{$entry_prefix}/admin/model/{$model.id}/fields">{lang admin.field_management}</a>
    <a class="nv-btn nv-btn-primary" href="{$entry_prefix}/admin/content/{$model.name}/create">{lang admin.create}{lang admin.content}</a>
  </div>
</div>

<div class="nv-card">
  <input type="hidden" id="flagCsrf" value="{$csrf}">
  <form class="nv-filters" method="get" action="{$entry_prefix}/admin/content/{$model.name}">
    <input class="nv-input nv-input-sm" type="text" name="keyword" value="{$filters.keyword}" placeholder="{lang admin.search_title_description}">
    <select class="nv-input nv-input-sm" name="status">
      <option value="">{lang admin.all}{lang admin.status}</option>
      <option value="1" {if $filters.status == 1}selected{/if}>{lang admin.published}</option>
      <option value="0" {if $filters.status == 0}selected{/if}>{lang admin.draft}</option>
      <option value="2" {if $filters.status == 2}selected{/if}>{lang admin.pending_review}</option>
      <option value="3" {if $filters.status == 3}selected{/if}>{lang admin.recycle_bin}</option>
    </select>
    <select class="nv-input nv-input-sm" name="order">
      <option value="sort_desc" {if $filters.order == 'sort_desc'}selected{/if}>{lang admin.sort_order} ↓</option>
      <option value="sort_asc" {if $filters.order == 'sort_asc'}selected{/if}>{lang admin.sort_order} ↑</option>
      <option value="id_desc" {if $filters.order == 'id_desc'}selected{/if}>{lang admin.order_newest}</option>
      <option value="id_asc" {if $filters.order == 'id_asc'}selected{/if}>{lang admin.order_oldest}</option>
      <option value="views_desc" {if $filters.order == 'views_desc'}selected{/if}>{lang admin.content_views}</option>
      <option value="updated_desc" {if $filters.order == 'updated_desc'}selected{/if}>{lang admin.order_updated}</option>
    </select>
    <select class="nv-input nv-input-sm" name="hot" title="{lang admin.flag_hot}">
      <option value="">{lang admin.flag_hot}·{lang admin.all}</option>
      <option value="1" {if $filters.flags.hot == '1'}selected{/if}>{lang admin.flag_hot_only}</option>
    </select>
    <select class="nv-input nv-input-sm" name="recommend" title="{lang admin.flag_recommend}">
      <option value="">{lang admin.flag_recommend}·{lang admin.all}</option>
      <option value="1" {if $filters.flags.recommend == '1'}selected{/if}>{lang admin.flag_recommend_only}</option>
    </select>
    <select class="nv-input nv-input-sm" name="essence" title="{lang admin.flag_essence}">
      <option value="">{lang admin.flag_essence}·{lang admin.all}</option>
      <option value="1" {if $filters.flags.essence == '1'}selected{/if}>{lang admin.flag_essence_only}</option>
    </select>
    <select class="nv-input nv-input-sm" name="top" title="{lang admin.flag_top}">
      <option value="">{lang admin.flag_top}·{lang admin.all}</option>
      <option value="1" {if $filters.flags.top == '1'}selected{/if}>{lang admin.flag_top_only}</option>
    </select>
    <button class="nv-btn nv-btn-sm nv-btn-primary" type="submit">{lang admin.filter}</button>
    <a class="nv-btn nv-btn-sm" href="{$entry_prefix}/admin/content/{$model.name}">{lang admin.reset}</a>
    <span class="nv-spacer"></span>
  </form>

  <form method="post" action="{$entry_prefix}/admin/content/{$model.name}/delete" id="batchForm">
    <input type="hidden" name="_token" value="{$csrf}">

    <div class="nv-card-body nv-flush">
      {if $list}
      <table class="nv-table">
        <thead>
          <tr>
            <th style="width:38px"><input type="checkbox" id="checkAll"></th>
            <th class="nv-col-id">ID</th>
            <th>{lang admin.title}</th>
            <th style="width:96px">{lang admin.status}</th>
            <th style="width:150px">{lang admin.col_flags}</th>
            <th style="width:70px">{lang admin.sort}</th>
            <th style="width:130px">{lang admin.published}</th>
            <th class="nv-col-actions">{lang admin.actions}</th>
          </tr>
        </thead>
        <tbody>
          {foreach $list as $item}
          <tr>
            <td><input type="checkbox" class="nv-check" name="ids[]" value="{$item.id}"></td>
            <td class="nv-col-id">{$item.id}</td>
            <td>
              <a href="{$entry_prefix}/admin/content/{$model.name}/edit/{$item.id}">{$item.title|limit=46}</a>
              {if $item.slug}<div class="nv-hint nv-mono">{$item.slug}</div>{/if}
            </td>
            <td>
              {if $item.status == 1}
              <span class="nv-badge nv-badge-success">{lang admin.published}</span>
              {elseif $item.status == 0}
              <span class="nv-badge nv-badge-warn">{lang admin.draft}</span>
              {elseif $item.status == 2}
              <span class="nv-badge nv-badge-info">{lang admin.pending_review}</span>
              {else}
              <span class="nv-badge nv-badge-danger">{lang admin.recycle_bin}</span>
              {/if}
            </td>
            <td class="nv-col-flags">
              <button type="button" class="nv-flag {if $item.hot}nv-flag-hot-on{else}nv-flag-off{/if}" data-flag="hot" data-id="{$item.id}" data-value="{if $item.hot}1{else}0{/if}" title="{lang admin.flag_hot}">{lang admin.flag_hot_short}</button>
              <button type="button" class="nv-flag {if $item.recommend}nv-flag-rec-on{else}nv-flag-off{/if}" data-flag="recommend" data-id="{$item.id}" data-value="{if $item.recommend}1{else}0{/if}" title="{lang admin.flag_recommend}">{lang admin.flag_recommend_short}</button>
              <button type="button" class="nv-flag {if $item.essence}nv-flag-ess-on{else}nv-flag-off{/if}" data-flag="essence" data-id="{$item.id}" data-value="{if $item.essence}1{else}0{/if}" title="{lang admin.flag_essence}">{lang admin.flag_essence_short}</button>
              <button type="button" class="nv-flag {if $item.top}nv-flag-top-on{else}nv-flag-off{/if}" data-flag="top" data-id="{$item.id}" data-value="{if $item.top}1{else}0{/if}" title="{lang admin.flag_top}">{lang admin.flag_top_short}</button>
            </td>
            <td>{$item.sort}</td>
            <td class="nv-muted">{$item.created_at|date=Y-m-d}</td>
            <td class="nv-col-actions">
              <a class="nv-btn nv-btn-xs" href="{$entry_prefix}/admin/content/{$model.name}/edit/{$item.id}">{lang admin.edit}</a>
              {if $item.url}<a class="nv-btn nv-btn-xs" href="{$item.url}" target="_blank" rel="noopener">{lang admin.view}</a>{/if}
            </td>
          </tr>
          {/foreach}
        </tbody>
      </table>
      {else}
      <div class="nv-empty">
        <div class="nv-empty-title">{lang admin.empty_content_prefix}{lang admin.content}</div>
        <div><a href="{$entry_prefix}/admin/content/{$model.name}/create">{lang admin.publish_first_prefix}{lang admin.content}</a></div>
      </div>
      {/if}
    </div>

    <div class="nv-toolbar">
      <label class="nv-hint"><input type="checkbox" id="checkAllBottom"> {lang admin.select_all}</label>
      <select class="nv-input nv-input-sm" name="status">
        <option value="1">{lang admin.set_as}{lang admin.published}</option>
        <option value="0">{lang admin.set_as}{lang admin.draft}</option>
        <option value="2">{lang admin.set_as}{lang admin.pending_review}</option>
        <option value="3">{lang admin.move_to}{lang admin.recycle_bin}</option>
      </select>
      <button class="nv-btn nv-btn-sm" type="submit" formaction="{$entry_prefix}/admin/content/{$model.name}/status">{lang admin.apply}{lang admin.status}</button>
      <button class="nv-btn nv-btn-sm nv-btn-danger nv-confirm" type="submit" formaction="{$entry_prefix}/admin/content/{$model.name}/delete" data-message="{lang admin.confirm_delete_selected}">{lang admin.delete_selected}</button>
    </div>
  </form>

  {include admin/partials/pager}
</div>

<script>
(function () {
  var all = document.getElementById('checkAll');
  var bottom = document.getElementById('checkAllBottom');
  var boxes = document.querySelectorAll('.nv-check');

  function toggle(source) {
    for (var i = 0; i < boxes.length; i++) {
      boxes[i].checked = source.checked;
    }
  }
  if (all) { all.addEventListener('change', function () { toggle(all); if (bottom) { bottom.checked = all.checked; } }); }
  if (bottom) { bottom.addEventListener('change', function () { toggle(bottom); if (all) { all.checked = bottom.checked; } }); }
})();

// ---- 内容常用属性快捷开关（热点/推荐/加精/置顶）----
(function () {
  var csrf = document.getElementById('flagCsrf');
  csrf = csrf ? csrf.value : '';
  var model = '{$model.name}';
  var buttons = document.querySelectorAll('.nv-flag');
  Array.prototype.forEach.call(buttons, function (btn) {
    btn.addEventListener('click', function () {
      var flag = btn.getAttribute('data-flag');
      var id = btn.getAttribute('data-id');
      var cur = btn.getAttribute('data-value');
      var next = (cur === '1') ? 0 : 1;
      btn.disabled = true;
      var fd = new FormData();
      fd.append('_token', csrf);
      fd.append('id', id);
      fd.append('flag', flag);
      fd.append('value', next);
      fetch('{$entry_prefix}/admin/content/' + model + '/flag', {
        method: 'POST',
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
        body: fd
      }).then(function (r) { return r.json(); }).then(function (res) {
        btn.disabled = false;
        if (res && res.code === 0) {
          btn.setAttribute('data-value', next);
          btn.classList.toggle('nv-flag-off', next === 0);
          btn.classList.toggle('nv-flag-hot-on', flag === 'hot' && next === 1);
          btn.classList.toggle('nv-flag-rec-on', flag === 'recommend' && next === 1);
          btn.classList.toggle('nv-flag-ess-on', flag === 'essence' && next === 1);
          btn.classList.toggle('nv-flag-top-on', flag === 'top' && next === 1);
        } else {
          alert((res && res.message) ? res.message : '{lang admin.action_failed}');
        }
      }).catch(function () {
        btn.disabled = false;
        alert('{lang admin.network_error_retry}');
      });
    });
  });
})();
</script>