{% extends "base.html" %}

{% block body %}

<h1>File upload</h1>
<div style='margin:var(--margin)'>
    <p>
        You can upload a file here <b>for free</b> to share with others for 30 minutes.<br/>
        How cool is that, eh?
    </p>
    <div class="card">
        <div class="card-title">
            Upload form
        </div>
        <div class='card-text'>
            <form action="/upload" method="POST" enctype="multipart/form-data">
                <p>
                    I want my file deleted:
                </p>
                <ul>
                    <li>
                        <input type="radio" id="bfile-formupload-delete-30-min" name="delmode" value='30' checked />
                        <label for="bfile-formupload-delete-30-min">After 30 minutes</label>
                    </li>
                    <li>
                        <input type="radio" id="bfile-formupload-delete-dl" name="delmode" value='dl' />
                        <label for="bfile-formupload-delete-dl">After 30 minutes OR a download</label>
                    </li>
                </ul>
                <p>
                    <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
                    <label for="bfile-formupload-file">
                        <span class="file-drag-n-drop">
                            <span class="file-drag-n-drop-inside">
                                <span class="file-drag-n-drop-inside-text">
                                    <object data="/tab-new-symbolic.svg" width="32" height="32"></object><br/>
                                    Drag & drop your files here!
                                </span>
                            </span>
                        </span>
                    </label>
                </p>
            </form>
        </div>
    </div>
</div>

{% endblock %}