{% extends "base.html" %}

{% block body %}

<div style="max-width:95vw;width:fit-content;margin:0 auto">
    <h1 style="text-align:center">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">
            <h2 class="card-title" style="margin:0">
                Upload form
            </h2>
            <div class='card-text'>
                <form action="/upload" method="POST" enctype="multipart/form-data">
                    <p>
                        I want my file deleted:
                    </p>
                    <ul class="bfile-formupload-file-delete-pick">
                        <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>
                        <label>
                            <input type="checkbox" name="named">
                        </label>
                        <label for="bfile-formupload-file-name">
                            I also want my file named:
                        </label>
                        <span class="form-input-partial">
                            <span class="form-input-label">
                                {{ env.instanceurl }}/
                            </span>
                            <input style="max-width:100px" id='bfile-formupload-file-name' type="text" name="filename" placeholder="file.txt"></input>
                        </span>
                    </p>
                    <table>
                        <tbody>
                            <tr>
                                <td>
                                    <label>
                                        <input type="checkbox" name="passworded">
                                        I want to add a password to the file:
                                    
                                        <span style="font-size:80%;display:block">
                                            Warning: the file WILL NOT be encrypted,<br/>
                                            therefore this is not 100% secure.<br/>
                                            <a href="/passworded-files">
                                                Learn more
                                            </a>
                                        </span>
                                    </label>
                                </td>
                                <td style="padding-left:4px">
                                    <label>
                                        <input type="password" name="password" style="max-width:90px">
                                    </label>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                    <p>
                        <label>
                            <input type="checkbox" name="tos_consent">
                            I agree to the
                            <a href="/tos">
                                Terms and Conditions
                            </a>
                            <span style='font-size:70%;color:red;transform:translateY(-30%);display:inline-block'>
                                (required)
                            </span>
                        </label>
                    </p>
                    <p>
                        <input type="file" name="file" id="bfile-formupload-file" style="display: none" />
                        <label for="bfile-formupload-file">
                            <span class='btn btn-fill mobile-file-upload-btn'>
                                Select a file
                            </span>
                            <button type="button" 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" tabindex="-1"></object><br/>
                                        <span style="line-height:16pt">
                                            <span id='drag-n-drop-jsonly' style='display:none'>
                                                Drag & drop your files here!
                                            </span>
                                            <noscript>
                                                Click to upload your files!<br/>
                                                <span style="font-size: 70%">
                                                    You will be able to drag and drop if you enable JS
                                                </span>
                                            </noscript>
                                        </span>
                                    </span>
                                </span>
                            </button>
                            <script src="/dragndrop-form.js"></script>
                        </label>
                    </p>
                    <p>
                        <button class='btn btn-fill'>
                            Upload!
                        </button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}