{include file="_partials/head.tpl"}

<div class="page-head">
  <div>
    <h1>{lang key="admin.media_title"}</h1>
    <p class="muted">{lang key="admin.media_subtitle"}. {lang key="admin.news_total"}: {pagination.total}</p>
  </div>
  <div class="actions">
    <button class="btn btn-primary" type="button" onclick="document.getElementById('mf').click()">{lang key="admin.media_upload_btn"}</button>
  </div>
</div>

<form id="uploadForm" enctype="multipart/form-data" style="display:none">
  {csrf}
  <input type="file" id="mf" name="file" accept="image/*,application/pdf">
</form>

<div id="uploadStatus" class="muted"></div>

[if {media}]
<div class="media-grid">
  [foreach var="media" as="m"]
    <div class="media-item">
      [if {m.width}]
        <img src="{m.url|thumb}" alt="{m.original_name}" loading="lazy" data-lightbox="media" data-lightbox-src="{m.url}" style="cursor:zoom-in">
      [else]
        <div class="media-file">📄 {m.original_name}</div>
      [/if]
      <div class="media-info">
        <div class="media-name" title="{m.original_name}">{m.original_name}</div>
        <div class="media-meta">{m.mime}</div>
        <div class="media-actions">
          <a href="{m.url}" target="_blank">{lang key="admin.open"}</a>
          <button type="button" onclick="navigator.clipboard.writeText('{m.url}'); this.textContent='{lang key="admin.copied"}'">URL</button>
          <form method="post" action="/admin/media/{m.id}/delete" style="display:inline" data-confirm="{lang key=&quot;admin.delete_confirm&quot;}">
            {csrf}
            <button type="submit" class="danger">{lang key="admin.delete"}</button>
          </form>
        </div>
      </div>
    </div>
  [/foreach]
</div>
{include file="_partials/pagination.tpl"}
[else]
<div class="empty-state">
  {icon name="media" size="40"}
  <p>{lang key="admin.media_empty"}</p>
</div>
[/if]

<script>
(function () {
  var input = document.getElementById('mf');
  var form = document.getElementById('uploadForm');
  var status = document.getElementById('uploadStatus');
  if (!input) return;
  input.addEventListener('change', function () {
    if (!input.files.length) return;
    var fd = new FormData(form);
    fd.set('file', input.files[0]);
    status.textContent = 'Загрузка...';
    fetch('/admin/media/upload', {
      method: 'POST',
      body: fd,
      credentials: 'same-origin',
      headers: { 'X-CSRF-Token': (document.querySelector('meta[name=csrf-token]') || {}).content || '' }
    }).then(function (r) { return r.json(); })
      .then(function (j) {
        if (j.ok) { status.textContent = 'Готово. Обновление...'; location.reload(); }
        else { status.textContent = 'Ошибка: ' + (j.error || 'unknown'); }
      })
      .catch(function (e) { status.textContent = 'Ошибка: ' + e.message; });
  });
})();
</script>

<style>
.media-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }
.media-item { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.media-item img { width: 100%; height: 120px; object-fit: cover; display: block; }
.media-file { height: 120px; display: flex; align-items: center; justify-content: center; color: var(--text-muted); font-size: 12px; }
.media-info { padding: 8px 10px; font-size: 12px; }
.media-name { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.media-meta { color: var(--text-muted); margin: 2px 0 6px; }
.media-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.media-actions a, .media-actions button { font-size: 11px; padding: 2px 6px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 4px; color: var(--text-muted); cursor: pointer; text-decoration: none; }
.media-actions button.danger { color: var(--danger); border-color: rgba(226,86,103,.3); }
.media-actions a:hover, .media-actions button:hover { color: var(--accent); }
</style>

{include file="_partials/foot.tpl"}
