{% extends "base.html" %}
{% block title %}Sales Materials{% endblock %}
{% block content %}
<div class="page-head"><div><h1>Sales Materials</h1>
  <p class="muted">Upload brochures, one-pagers, price sheets and decks.
  {% if users %}New uploads are sent automatically by: <b>{{ users|map(attribute='name')|join(', ') }}</b>.{% endif %}</p></div></div>

<div class="card">
  <form method="post" enctype="multipart/form-data" id="upload">
    <label class="drop" id="drop">
      <span class="big">{{ icon("upload") }} Choose files, or drag them here</span>
      <span class="muted">PDF, Word, PowerPoint, images or text. Up to 50 MB each.</span>
      <input type="file" name="files" multiple>
    </label>
  </form>
</div>

<div class="card">
  <h2>Uploaded Files</h2>
  {% if files %}<ul class="list">{% for f in files %}
    <li><div class="body"><b>{{ f.name }}</b><span class="muted">{{ (f.stat().st_size / 1024)|round(1) }} KB · uploaded {{ fmt_time(f) }}</span></div>
      <div class="actions">
        <a class="btn small" href="{{ url_for('material_action', name=f.name, action='download') }}">Download</a>
        <form class="inline" method="post" action="{{ url_for('material_action', name=f.name, action='delete') }}" data-confirm="Delete {{ f.name }}?"><button class="btn small danger">Delete</button></form>
      </div></li>
  {% endfor %}</ul>{% else %}<div class="empty">No files yet.</div>{% endif %}
</div>
{% endblock %}
{% block scripts %}
<script>
const drop = document.getElementById('drop'), form = document.getElementById('upload'), input = drop.querySelector('input');
input.addEventListener('change', () => input.files.length && form.submit());
['dragenter','dragover'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.add('over'); }));
['dragleave','drop'].forEach(ev => drop.addEventListener(ev, e => { e.preventDefault(); drop.classList.remove('over'); }));
drop.addEventListener('drop', e => { input.files = e.dataTransfer.files; form.submit(); });
</script>
{% endblock %}