{% extends "base.html" %}

{% block title %}upload - irc.pics{% endblock %}

{% block nav_auth %}
<a href="/auth/logout" class="nav-cta">log out</a>
{% endblock %}

{% block content %}
<div class="content">
  <h1>upload image</h1>
  <form method="post" action="/upload" enctype="multipart/form-data" class="upload-form">
    <label class="drop-zone" id="drop-zone">
      <input type="file" name="file" accept="image/jpeg,image/png,image/gif,image/webp" required class="file-input">
      <span class="drop-text">click or drop an image here</span>
      <span class="drop-hint">jpeg, png, gif, webp -- 10MB max</span>
    </label>
    <button type="submit" class="btn-fill">upload</button>
  </form>
</div>
<script>
const zone = document.getElementById('drop-zone');
const input = zone.querySelector('.file-input');
const text = zone.querySelector('.drop-text');
['dragenter','dragover'].forEach(e => zone.addEventListener(e, ev => { ev.preventDefault(); zone.classList.add('drag-over'); }));
['dragleave','drop'].forEach(e => zone.addEventListener(e, ev => { ev.preventDefault(); zone.classList.remove('drag-over'); }));
zone.addEventListener('drop', ev => { input.files = ev.dataTransfer.files; text.textContent = input.files[0].name; });
input.addEventListener('change', () => { if (input.files.length) text.textContent = input.files[0].name; });
</script>
{% endblock %}