{% extends "header.html" %}
{% block content %}
<h1>Share your Clip</h1>
<p>Creating clip: <span class="clip-name">{{subpath}}</span></p>
<form method="post" enctype="multipart/form-data" action="{% url 'create_clip' %}" onsubmit="return validateFileSize()" style="display: flex; justify-content: center; flex-direction:column;max-width:480px;margin:0 auto;">
    {% csrf_token %}
    <select class="expiry_selector" name="expiry" id="expiry">
        <option value="2min">2 minutes</option>
        <option value="5min">5 minutes</option>
        <option value="10min">10 minutes</option>
        <option value="30min">30 minutes</option>
        <option value="1hour">1 hour</option>
        <option value="6hour">6 hours</option>
        <option value="24hour">24 hours</option>
    </select><br>
    <label for="content">Content:</label>
    <textarea class="create_textarea" id="content" name="content" maxlength="255" rows="4" cols="50"></textarea><br>

    <label for="file_path">Upload file: (max 2.5mb)</label>
    <input class="create_upload" type="file" id="file_path" name="file_path" onchange="validateFileSize()"><br>
    <span id="file_size_error" style="color: red;"></span>
    <input type="hidden" name="subpath" value="{{ subpath }}">

    <input class="button" type="submit" value="Create Clip">
</form>

<script>
function validateFileSize() {
    var fileInput = document.getElementById('file_path');
    var file = fileInput.files[0];
    var maxSize = 2.5 * 1024 * 1024; // 2.5MB in bytes
    var errorSpan = document.getElementById('file_size_error');

    if (file && file.size > maxSize) {
        console.log("Look at me");
        errorSpan.textContent = 'The file size exceeds the 2.5MB limit.';
        return false;
    }
    errorSpan.textContent = '';
    return true;
}

document.getElementById('file_path').addEventListener('change', validateFileSize);
</script>

{% endblock %}