{% extends "base.html" %}
{% block title %}Media — BashyOverlay{% endblock %}
{% block content %}
<hgroup>
    <h1>Media</h1>
    <p>Upload sounds and videos for your actions.</p>
</hgroup>

<section>
    <h2>Upload</h2>
    <form hx-post="/media"
          hx-target="#media-list"
          hx-swap="beforeend"
          hx-encoding="multipart/form-data"
          hx-on::after-request="this.reset()">
        <label>
            File <small>(mp3, ogg, wav, m4a, mp4, webm)</small>
            <input type="file" name="file" accept="audio/*,video/*" required>
        </label>
        <button type="submit">Upload</button>
    </form>
</section>

<section>
    <h2>Library</h2>
    <div id="media-list" class="media-grid">
        {% for file in files %}
        {% include "partials/media_item.html" %}
        {% endfor %}
        {% if not files %}
        <p><em>No files uploaded yet.</em></p>
        {% endif %}
    </div>
</section>
{% endblock %}