{% extends 'layouts/base.njk' %}

{% set title = app.name + ' - Upload file' %}

{% block scripts %}
    <script src="/js/fm.js"></script>
{% endblock %}

{% block body %}
    <h1>Upload files</h1>
    <p>You are responsible for the files that you upload.</p>

    <div class="container">
        <section class="panel">
            <h2><i data-feather="upload"></i> Upload a file</h2>

            <form action="{{ route('post-file-frontend') }}" method="POST" enctype="multipart/form-data"
                  id="upload-form">
                {{ macros.field(_locals, 'file', 'upload', '', 'Choose wisely', 'The maximum upload size is ' + max_upload_size + 'MiB', validation_attributes='required') }}

                {{ macros.field(_locals, 'checkbox', 'never_expire', '', 'Never delete this file') }}
                {{ macros.field(_locals, 'number', 'expire_after_days', '30', 'How many days to delete this file after', null, validation_attributes='max="1825"') }}

                {{ macros.field(_locals, 'checkbox', 'autogen_url', '', 'Generate url automatically', null, validation_attributes='checked') }}
                {{ macros.field(_locals, 'text', 'slug', '', 'Custom url slug', 'Example: beautiful_image.jpg sets url to https://'+default_domain+'/beautiful_image.jpg', validation_attributes='disabled') }}

                {{ macros.csrf(getCsrfToken) }}

                <button type="submit"><i data-feather="upload"></i> Upload</button>
            </form>

            <div id="file-upload" class="hidden">
                <div class="name">photo.jpg</div>
                <div class="progress-bar" style="--progress: 50%;"><span class="content">50%</span></div>
                <div class="status hidden"></div>
            </div>

            <div id="file-upload-link" class="hidden copyable-text">
                <div class="title">URL</div>
                <div class="content"></div>
                <button class="copy-button"><i data-feather="copy"></i></button>
            </div>

            {% set url = flash('url') %}
            {% if url | length %}
                <div class="copyable-text">
                    <div class="title">URL</div>
                    <div class="content">{{ url }}</div>
                    <button class="copy-button"><i data-feather="copy"></i></button>
                </div>
            {% endif %}
        </section>


        <section class="panel">
            <h2><i data-feather="folder"></i> File list</h2>

            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}

            <table class="data-table">
                <thead>
                <tr>
                    <th>#</th>
                    <th class="table-col-grow">Name</th>
                    <th>Size</th>
                    <th>Expires at</th>
                    <th>Actions</th>
                </tr>
                </thead>

                <tbody>
                {% for file in files %}
                    <tr>
                        <td>{{ file.id }}</td>
                        <td class="table-col-grow-cell"><a href="{{ file.getURL() }}"><pre>{{ file.real_name }}</pre></a></td>
                        <td>{{ (file.size / (1024 * 1024)).toFixed(2) }}MB</td>
                        <td>{% if file.expires_at %}{{ file.expires_at.toISOString() }}{% else %}Never{% endif %}</td>
                        <td class="actions">
                            {% if file.shouldBeDeleted() %}
                                Pending deletion
                            {% else %}
                                <button class="copy-button" data-content="{{ file.getURL() }}"><i data-feather="copy"></i> <span class="tip">Copy URL</span></button>

                                <form action="{{ route('delete-file-frontend', file.slug) }}" method="post">
                                    {{ macros.csrf(getCsrfToken) }}
                                    <button class="button danger" onclick="return confirm('Are you sure you want to delete file {{ file.real_name }}?');"><i data-feather="trash"></i> <span class="tip">Delete</span></button>
                                </form>
                            {% endif %}
                        </td>
                    </tr>
                {% else %}
                    <tr>
                        <td colspan="5" class="center">You haven't uploaded any file yet.</td>
                    </tr>
                {% endfor %}
                </tbody>
            </table>

            {{ macros.paginate(files.pagination, 'file-uploader', 3) }}
        </section>
    </div>
{% endblock %}