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

{% set title = 'ily.li - File manager' %}

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

{% block body %}
    <h1>File manager</h1>
    <p>You're their manager, please be nice with them.</p>

    <div class="container">
        <section class="panel">
            <h2>Upload a file</h2>

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

                {{ 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', 'never_expire', '', 'Never delete this file') }}

                {{ macros.csrf(getCSRFToken) }}

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

    <section class="panel">
        <h2>File list</h2>
        <table class="data-table">
            <thead>
            <tr>
                <th>#</th>
                <th>url</th>
                <th>name</th>
                <th>Expires at</th>
            </tr>
            </thead>

            <tbody>
            {% for file in files %}
                <tr>
                    <td>{{ file.id }}</td>
                    <td>
                        <div class="copyable-text">
                            <a class="content" href="{{ file.getURL() }}" target="_blank">{{ file.getURL() }}</a>
                            <button class="copy-button"><i data-feather="copy"></i></button>
                        </div>
                    </td>
                    <td>{{ file.real_name }}</td>
                    {% set expires_at = file.getExpirationDate() %}
                    <td>{% if expires_at %}{{ expires_at.toISOString() }}{% else %}Never{% endif %}</td>
                </tr>
            {% endfor %}
            </tbody>
        </table>
    </section>
{% endblock %}