{% extends "base.html" %}

{% block head %}

    {%- if ! conf.files.allow_uploads -%}
        <link rel="stylesheet" href="/alert.css" />
    {%- endif -%}
    <link rel="stylesheet" href="/upload_form.css" />

{% endblock %}

{% 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>
                    {%- if conf.files.allow_custom_names -%}
                        <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>
                    {%- endif -%}

                    {%- if conf.files.allow_pass_protection -%}
                        <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>
                    {%- endif -%}
                    <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>
                    {%- if ! conf.files.allow_uploads -%}
                        <div class="alert danger" style="width:426px">
                            <h1 class="alert-title">
                                Error
                            </h1>
                            <p class="alert-text">
                                Uploads are temporarily disabled
                                {%- if let Some(disable_reason) = conf.files.upload_disable_reason -%}
                                    {{- " " -}} for the following reason:
                                    <span style="display:block;font-family:monospace;padding-top:12px">
                                        {{- disable_reason -}}
                                    </span>
                                {%- else -%}
                                    .
                                {%- endif -%}
                                <span style="display:block;padding-top:12px">
                                    Check again in a few minutes.
                                </span>
                            </p>
                        </div>
                    {%- else -%}
                        <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>
                    {%- endif -%}
                </form>
            </div>
        </div>
    </div>
</div>

{% endblock %}