@include(snippets/header)
<div class="pagewrapper">
<div id="main">
    <link rel="stylesheet" href="/s/css/upload.css">
    <div class="upload-container" style="opacity: 0;" data-mimes='{!! mimes_json !!}'>
        <h2>{{ t('upload_page.title') }}</h2>

        <div class="upload-limit-info">
            @if(uploads_remaining === null)
            <span class="limit-unlimited"><i class="fa-solid fa-infinity"></i> {{ t('upload_page.limit_unlimited') }}</span>
            @elseif(uploads_remaining === 0)
            <span class="limit-exhausted"><i class="fa-solid fa-triangle-exclamation"></i> {{ t('upload_page.limit_reached').replace('{limit}', upload_limit) }}</span>
            @else
            <span class="limit-remaining"><i class="fa-solid fa-upload"></i> {{ t('upload_page.limit_remaining').replace('{remaining}', uploads_remaining).replace('{limit}', upload_limit) }}</span>
            @endif
        </div>

        @if(session)
        @include(snippets/upload-form)
        @else
        <div class="login-required">
            <h3>{{ t('upload_page.auth_required_title') }}</h3>
            <p>{{ t('upload_page.auth_required_text') }}</p>
            <a href="/login" class="btn-login login-trigger-btn">{{ t('upload_page.login_btn') }}</a>
        </div>
        @endif
    </div>

    <script>
        // Form is already initialized by global DOMContentLoaded listener in upload.js
    </script>
</div>
</div>
</div>
@include(snippets/footer)