{% extends "base.html" %}
{% load static %}

{% block title %}{{ project_name }}{% endblock %}

{% block content %}
<div class="container-fluid vh-100 d-flex flex-column justify-content-center align-items-center main-container">

    <div class="text-center hero-section p-5 rounded-3">
        <h1 class="display-4 fw-bold">Skip Trace with Ease</h1>
        <p class="lead col-lg-8 mx-auto">Upload your CSV file, and we'll find the information you need. Fast, reliable, and easy to use.</p>
        <hr class="my-4">

        <div class="card p-4 shadow-sm" style="max-width: 500px; margin: auto;">
            <div class="card-body">
                <h5 class="card-title">Start a New Job</h5>
                <form method="post" enctype="multipart/form-data" action="{% url 'index' %}">
                    {% csrf_token %}
                    <div class="mb-3">
                        {{ form.csv_file }}
                    </div>
                    <button type="submit" class="btn btn-primary btn-lg">Upload and Process</button>
                </form>
            </div>
        </div>
    </div>

    {% if jobs %}
    <div class="mt-5 p-5 rounded-3 job-list-section w-75">
        <h2 class="text-center mb-4">Recent Jobs</h2>
        <ul class="list-group">
            {% for job in jobs %}
            <li class="list-group-item d-flex justify-content-between align-items-center">
                <span>{{ job.original_file_name }}</span>
                <span class="badge bg-secondary rounded-pill">{{ job.get_status_display }}</span>
            </li>
            {% endfor %}
        </ul>
    </div>
    {% endif %}

</div>
{% endblock %}
