{% extends "base.html" %}

{% block title %}Upload Campaign{% endblock %}

{% block content %}

<div class="page-header">
    <h1>📤 Upload Campaign</h1>
</div>

<div class="panel upload-panel">

    <form method="POST" enctype="multipart/form-data" class="upload-form">

        <!-- Hidden file input -->
        <input type="file" id="fileInput" name="file" hidden required>

        <!-- Styled choose file button -->
        <label for="fileInput" class="primary-btn choose-btn">
            Choose File
        </label>

        <!-- Selected file name -->
        <div id="fileName" class="file-name">
            No file selected
        </div>

        <!-- Upload button -->
        <button type="submit" class="primary-btn upload-btn">
            Upload & Send Emails
        </button>

    </form>

</div>

<script>
const fileInput = document.getElementById("fileInput");
const fileName = document.getElementById("fileName");

fileInput.addEventListener("change", () => {
    fileName.textContent = fileInput.files.length
        ? fileInput.files[0].name
        : "No file selected";
});
</script>

{% endblock %}