{% extends "base.html" %}

{% block title %}Upload and Rank Resumes{% endblock %}

{% block content %}
<div class="container mt-5">
    <h2 class="mb-4">Test Resume Ranking API</h2>

    <form id="rankForm" action="{{ url_for('api.rank_resumes') }}" method="POST" enctype="multipart/form-data" onsubmit="submitWithAuth(event)">
        <div class="form-group mb-3">
            <label for="api_key">API Key</label>
            <input type="text" class="form-control" id="api_key" name="api_key" placeholder="Enter your API key" required>
        </div>

        <div class="form-group mb-3">
            <label for="job_description">Job Description</label>
            <textarea class="form-control" id="job_description" name="job_description" rows="5" required></textarea>
        </div>

        <div class="form-group mb-3">
            <label for="resumes">Upload Resumes</label>
            <input type="file" class="form-control" id="resumes" name="resumes" accept=".pdf,.doc,.docx" multiple required>
        </div>

        <button type="submit" class="btn btn-primary">Submit & Rank</button>
    </form>
</div>

<script>
    function submitWithAuth(event) {
        event.preventDefault();

        const form = document.getElementById('rankForm');
        const apiKey = document.getElementById('api_key').value;
        const formData = new FormData(form);

        fetch(form.action, {
            method: 'POST',
            headers: {
                'Authorization': 'Bearer ' + apiKey
            },
            body: formData
        })
        .then(response => response.text())
        .then(html => {
            document.open();
            document.write(html);
            document.close();
        })
        .catch(err => alert("An error occurred: " + err));
    }
</script>
{% endblock %}