{% extends "base.html" %}{% block title %}Wgraj pliki – {{ repo_name }}{% endblock %}
{% block head %}
<style>
.up-drop { border: 2px dashed var(--border); border-radius: var(--radius); padding: 2.2rem 1.2rem; text-align: center; cursor: pointer; transition: border-color 0.15s, background 0.15s; background: var(--bg2); }
.up-drop:hover, .up-drop.drag { border-color: var(--accent); background: var(--accent-glow); }
.up-drop .up-ico { margin-bottom: 0.5rem; }
.up-list { margin-top: 0.9rem; display: flex; flex-direction: column; gap: 0.35rem; }
.up-item { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; font-size: 0.82rem; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius-xs); padding: 0.4rem 0.7rem; }
.up-item .n { font-family: var(--mono); word-break: break-all; }
.up-item .s { color: var(--muted); flex-shrink: 0; font-size: 0.72rem; }
.up-hint { font-size: 0.75rem; color: var(--muted); margin-top: 0.5rem; }
</style>
{% endblock %}
{% block content %}
<div class="card" style="max-width:680px;margin:0 auto">
 <div class="card-header">
  <h2><svg class="i16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/></svg> Wgraj pliki do {{ repo_name }}</h2>
  <a href="{{ subpath('/git/' ~ repo_name) }}{% if dir_path %}/tree/{{ dir_path }}{% endif %}" class="btn btn-sm">← Powrót</a>
 </div>
 <div style="padding:1rem">
  <form method="POST" enctype="multipart/form-data" id="up-form" onsubmit="document.getElementById('up-btn').disabled=true;document.getElementById('up-btn-lbl').textContent='Wgrywanie…'">
   <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
   <input type="hidden" name="dir" value="{{ dir_path }}">
   <div class="up-drop" id="up-drop" role="button" tabindex="0" aria-label="Wybierz pliki do wgrania">
    <div class="up-ico">
     <svg viewBox="0 0 24 24" width="34" height="34" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true" style="opacity:0.6"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><path d="M17 8l-5-5-5 5"/><path d="M12 3v12"/><path d="M7 17h10"/></svg>
    </div>
    <div><strong>Kliknij lub upuść pliki tutaj</strong></div>
    <div class="up-hint">obrazy (PNG/JPG/GIF/WebP/SVG/AVIF), dokumenty i inne pliki – do 50 MB każdy, max 25 naraz</div>
    <input type="file" name="files" id="up-file" multiple style="display:none">
   </div>
   <div class="up-item" style="margin-top:0.9rem">
    <span style="color:var(--muted)">Katalog docelowy:</span>
    <span class="n"><code>{{ '/' + dir_path if dir_path else '/ (katalog główny)' }}</code></span>
   </div>
   <div class="up-list" id="up-list"></div>
   <div style="margin-top:0.9rem">
    <label style="font-size:0.75rem">Commit message (opcjonalnie)</label>
    <input name="message" id="up-msg" placeholder="np. Dodano logo i zrzuty ekranu" style="width:100%;padding:0.5rem;background:var(--bg);border:1px solid var(--border);color:var(--text-bright);border-radius:var(--radius-sm)">
   </div>
   <button class="btn btn-primary" style="margin-top:1rem" id="up-btn"><span id="up-btn-lbl">Wgraj pliki</span></button>
  </form>
 </div>
</div>
<script>
(function () {
 var drop = document.getElementById('up-drop');
 var input = document.getElementById('up-file');
 var list = document.getElementById('up-list');
 var msg = document.getElementById('up-msg');
 var files = [];
 function fmt(n) { return n >= 1048576 ? (n/1048576).toFixed(1)+' MB' : n >= 1024 ? Math.round(n/1024)+' KB' : n+' B'; }
 function render() {
  if (!files.length) { list.innerHTML = ''; return; }
  list.innerHTML = files.map(function (f, i) {
   return '<div class="up-item"><span class="n">' + f.name.replace(/[&<>"]/g, function(c){return {'&':'&amp;','<':'&lt;','>':'&gt;','"':'&quot;'}[c];}) + '</span>'
    + '<span class="s">' + fmt(f.size) + ' · <a href="javascript:void(0)" data-rm="' + i + '" style="color:var(--red)">usuń</a></span></div>';
  }).join('');
  list.querySelectorAll('[data-rm]').forEach(function (a) {
   a.addEventListener('click', function () { files.splice(+a.getAttribute('data-rm'), 1); render(); });
  });
  // sync do inputa (ukrytego) przez DataTransfer
  var dt = new DataTransfer();
  files.forEach(function (f) { dt.items.add(f); });
  input.files = dt.files;
 }
 function addFileList(fl) {
  for (var i = 0; i < fl.length && files.length < 25; i++) files.push(fl[i]);
  render();
 }
 drop.addEventListener('click', function () { input.click(); });
 drop.addEventListener('keydown', function (e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); input.click(); } });
 input.addEventListener('change', function () { addFileList(input.files); });
 ['dragover', 'dragenter'].forEach(function (ev) {
  drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.add('drag'); });
 });
 ['dragleave', 'drop'].forEach(function (ev) {
  drop.addEventListener(ev, function (e) { e.preventDefault(); drop.classList.remove('drag'); });
 });
 drop.addEventListener('drop', function (e) { addFileList(e.dataTransfer.files); });
 // automatyczna propozycja commita
 document.getElementById('up-form').addEventListener('submit', function () {
  if (!msg.value.trim()) {
   msg.value = 'Add ' + files.length + ' file(s) via web upload';
  }
 });
})();
</script>
{% endblock %}