{% extends 'main/base.html' %}

{% block content %}
<!-- Hero Section -->
<div class="container-fluid bg-danger text-white py-5">
    <div class="container">
        <h1 class="display-4">Join Our Team</h1>
        <p class="lead">Make a difference in your community</p>
    </div>
</div>

<!-- Volunteer Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Volunteer Opportunities</h2>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <p>Join our volunteer program and contribute to meaningful community development initiatives. We welcome individuals passionate about making a difference in areas such as education, environmental conservation, and community health.</p>
                <div class="card bg-light">
                    <div class="card-body">
                        <h5 class="card-title">Current Volunteer Needs</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-danger me-2"></i> Community Health Educators</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Environmental Conservation Assistants</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Youth Program Mentors</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Administrative Support</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Volunteer Application Form</h5>
                        <form action="/submit-volunteer" method="POST">
                            <div class="mb-3">
                                <label for="name" class="form-label">Full Name</label>
                                <input type="text" class="form-control" id="name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="email" name="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="phone" class="form-label">Phone Number</label>
                                <input type="tel" class="form-control" id="phone" name="phone" required>
                            </div>
                            <div class="mb-3">
                                <label for="area" class="form-label">Area of Interest</label>
                                <select class="form-select" id="area" name="area" required>
                                    <option value="">Select an area</option>
                                    <option value="health">Community Health</option>
                                    <option value="environment">Environmental Conservation</option>
                                    <option value="education">Education</option>
                                    <option value="admin">Administrative Support</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="availability" class="form-label">Availability</label>
                                <textarea class="form-control" id="availability" name="availability" rows="3" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-danger">Submit Application</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Internship Section -->
<section class="bg-light py-5">
    <div class="container">
        <h2 class="mb-4">Internship Programs</h2>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <p>Our internship program offers valuable experience in community development and non-profit management. Interns work directly with our team on impactful projects while developing professional skills.</p>
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Available Internships</h5>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-danger me-2"></i> Program Development</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Communications & Media</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Research & Documentation</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Project Management</li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="col-lg-6">
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">Internship Application Form</h5>
                        <form action="/submit-internship" method="POST">
                            <div class="mb-3">
                                <label for="intern-name" class="form-label">Full Name</label>
                                <input type="text" class="form-control" id="intern-name" name="name" required>
                            </div>
                            <div class="mb-3">
                                <label for="intern-email" class="form-label">Email Address</label>
                                <input type="email" class="form-control" id="intern-email" name="email" required>
                            </div>
                            <div class="mb-3">
                                <label for="education" class="form-label">Educational Background</label>
                                <input type="text" class="form-control" id="education" name="education" required>
                            </div>
                            <div class="mb-3">
                                <label for="position" class="form-label">Desired Position</label>
                                <select class="form-select" id="position" name="position" required>
                                    <option value="">Select a position</option>
                                    <option value="program">Program Development</option>
                                    <option value="communications">Communications & Media</option>
                                    <option value="research">Research & Documentation</option>
                                    <option value="project">Project Management</option>
                                </select>
                            </div>
                            <div class="mb-3">
                                <label for="cv" class="form-label">Upload CV</label>
                                <input type="file" class="form-control" id="cv" name="cv" required>
                            </div>
                            <div class="mb-3">
                                <label for="motivation" class="form-label">Motivation Letter</label>
                                <textarea class="form-control" id="motivation" name="motivation" rows="4" required></textarea>
                            </div>
                            <button type="submit" class="btn btn-danger">Submit Application</button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- Jobs Section -->
<section class="py-5">
    <div class="container">
        <h2 class="mb-4">Current Job Openings</h2>
        <div class="row">
            <div class="col-lg-6 mb-4">
                <div class="card h-100">
                    <div class="card-body">
                        <h5 class="card-title">Program Coordinator</h5>
                        <p class="card-text">We're seeking an experienced Program Coordinator to oversee our community development initiatives.</p>
                        <h6>Requirements:</h6>
                        <ul class="list-unstyled">
                            <li><i class="fas fa-check text-danger me-2"></i> Bachelor's degree in related field</li>
                            <li><i class="fas fa-check text-danger me-2"></i> 3+ years experience in program management</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Strong communication skills</li>
                            <li><i class="fas fa-check text-danger me-2"></i> Project management expertise</li>
                        </ul>
                        <button class="btn btn-danger mt-3" data-bs-toggle="modal" data-bs-target="#jobModal">Apply Now</button>
                    </div>
                </div>
            </div>
            <!-- Add more job listings as needed -->
        </div>
    </div>
</section>

<!-- Job Application Modal -->
<div class="modal fade" id="jobModal" tabindex="-1">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Job Application Form</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form action="/submit-job" method="POST">
                    <div class="mb-3">
                        <label for="job-name" class="form-label">Full Name</label>
                        <input type="text" class="form-control" id="job-name" name="name" required>
                    </div>
                    <div class="mb-3">
                        <label for="job-email" class="form-label">Email Address</label>
                        <input type="email" class="form-control" id="job-email" name="email" required>
                    </div>
                    <div class="mb-3">
                        <label for="job-phone" class="form-label">Phone Number</label>
                        <input type="tel" class="form-control" id="job-phone" name="phone" required>
                    </div>
                    <div class="mb-3">
                        <label for="experience" class="form-label">Years of Experience</label>
                        <input type="number" class="form-control" id="experience" name="experience" required>
                    </div>
                    <div class="mb-3">
                        <label for="resume" class="form-label">Upload Resume</label>
                        <input type="file" class="form-control" id="resume" name="resume" required>
                    </div>
                    <div class="mb-3">
                        <label for="cover-letter" class="form-label">Cover Letter</label>
                        <textarea class="form-control" id="cover-letter" name="coverLetter" rows="4" required></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit Application</button>
                </form>
            </div>
        </div>
    </div>
</div>
{% endblock %}