{layout admin/layout}

<div class="nv-page-head">
  <div>
    <div class="nv-page-title">{lang cover.title}</div>
    <div class="nv-page-desc">{lang cover.desc}</div>
  </div>
</div>

{if $flash.message}<div class="nv-alert nv-alert-{$flash.type}">{$flash.message}</div>{/if}

<div class="nv-form-grid" style="align-items:start">
  <div class="nv-card">
    <div class="nv-card-body">
      <div class="nv-page-title" style="font-size:15px;margin-bottom:10px">{lang cover.nodes_title}</div>
      <form method="post" action="{$entry_prefix}/admin/plugin/random-cover/nodes">
        <input type="hidden" name="_token" value="{$csrf}">
        {if !empty($nodes)}
        <div style="max-height:320px;overflow:auto;border:1px solid #eef1f6;border-radius:8px;padding:10px">
          {loop $nodes as $n}
          <label style="display:block;padding:3px 0;padding-left:{$n.indent}px">
            <input type="checkbox" name="nodes[]" value="{$n.id}" {if $n.checked}checked{/if}> {$n.name}
          </label>
          {/loop}
        </div>
        {else}
        <p class="nv-muted">{lang cover.no_nodes}</p>
        {/if}
        <div class="nv-toolbar" style="margin-top:10px">
          <button class="nv-btn nv-btn-primary" type="submit">{lang cover.save_nodes}</button>
          <span class="nv-hint">{lang cover.save_nodes_hint}</span>
        </div>
      </form>
    </div>
  </div>

  <div class="nv-card">
    <div class="nv-card-body">
      <div class="nv-page-title" style="font-size:15px;margin-bottom:10px">{lang cover.upload_title}</div>
      <form method="post" action="{$entry_prefix}/admin/plugin/random-cover/upload" enctype="multipart/form-data">
        <input type="hidden" name="_token" value="{$csrf}">
        <div class="nv-form-row">
          <input class="nv-input" type="file" name="files[]" multiple accept="image/*">
          <p class="nv-field-hint">{lang cover.upload_hint}</p>
        </div>
        <div class="nv-toolbar">
          <button class="nv-btn nv-btn-primary" type="submit">{lang cover.upload}</button>
        </div>
      </form>
    </div>
  </div>
</div>

<div class="nv-card" style="margin-top:16px">
  <div class="nv-card-body">
    <div class="nv-page-title" style="font-size:15px;margin-bottom:10px">{lang cover.gallery}</div>
    {if !empty($bgs)}
    <div style="display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px">
      {loop $bgs as $b}
      <div style="border:1px solid #eef1f6;border-radius:10px;overflow:hidden">
        <div style="height:110px;background:#f3f4f6 center/cover no-repeat;background-image:url('{$b.url}')"></div>
        <div style="padding:8px 10px;font-size:12px">
          <div style="white-space:nowrap;overflow:hidden;text-overflow:ellipsis">{$b.name}</div>
          <div class="nv-muted">{$b.size_text}</div>
          <form method="post" action="{$entry_prefix}/admin/plugin/random-cover/delete" onsubmit="return confirm('{lang cover.confirm_delete}');" style="margin-top:6px">
            <input type="hidden" name="_token" value="{$csrf}">
            <input type="hidden" name="id" value="{$b.id}">
            <button class="nv-btn nv-btn-xs nv-btn-danger" type="submit">{lang admin.delete}</button>
          </form>
        </div>
      </div>
      {/loop}
    </div>
    {else}
    <div class="nv-empty"><div class="nv-empty-title">{lang cover.empty_title}</div><div>{lang cover.empty_hint}</div></div>
    {/if}
  </div>
</div>