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

{% block main_content %}
<div class="max-w-4xl mx-auto px-4 py-8">
    <!-- Breadcrumbs -->
    <div class="text-sm breadcrumbs mb-4">
        <ul>
            <li><a href="/">Home</a></li>
            <li>Jobs & Careers</li>
        </ul>
    </div>

    <!-- Main Content -->
    <div class="bg-base-100 shadow-xl rounded-lg p-8">
        <h1 class="text-4xl font-bold mb-6">Jobs & Careers</h1>

        <div class="prose max-w-none">
            <p class="text-lg mb-6">
                Join our team of passionate scientists and developers working at the intersection of environmental
                chemistry, computational science, and machine learning. Help us build the future of biodegradation prediction.
            </p>

            <!-- Hero Card -->
            <div class="card bg-gradient-to-br from-primary to-secondary text-primary-content mb-8">
                <div class="card-body">
                    <h2 class="card-title text-2xl">Why Work With Us?</h2>
                    <p>
                        At enviPath, we're committed to advancing environmental science through innovative technology.
                        We offer a collaborative, research-focused environment where your work directly impacts
                        environmental protection and sustainability.
                    </p>
                </div>
            </div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">What We Value</h2>
            <div class="grid md:grid-cols-2 gap-4 mb-6 not-prose">
                <div class="flex items-start gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <h3 class="font-semibold">Scientific Excellence</h3>
                        <p class="text-sm">Rigorous research and peer-reviewed contributions</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4.354a4 4 0 110 5.292M15 21H3v-1a6 6 0 0112 0v1zm0 0h6v-1a6 6 0 00-9-5.197M13 7a4 4 0 11-8 0 4 4 0 018 0z" />
                    </svg>
                    <div>
                        <h3 class="font-semibold">Collaboration</h3>
                        <p class="text-sm">Work with leading institutions worldwide</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z" />
                    </svg>
                    <div>
                        <h3 class="font-semibold">Innovation</h3>
                        <p class="text-sm">Push the boundaries of computational chemistry</p>
                    </div>
                </div>
                <div class="flex items-start gap-3">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6 text-primary flex-shrink-0 mt-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3.055 11H5a2 2 0 012 2v1a2 2 0 002 2 2 2 0 012 2v2.945M8 3.935V5.5A2.5 2.5 0 0010.5 8h.5a2 2 0 012 2 2 2 0 104 0 2 2 0 012-2h1.064M15 20.488V18a2 2 0 012-2h3.064M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                    </svg>
                    <div>
                        <h3 class="font-semibold">Impact</h3>
                        <p class="text-sm">Contribute to environmental protection</p>
                    </div>
                </div>
            </div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">Current Opportunities</h2>

            <div class="alert alert-info mb-6">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"></path>
                </svg>
                <div>
                    <h3 class="font-bold">No Current Openings</h3>
                    <div class="text-sm">We don't have any open positions at the moment, but we're always interested in hearing from talented individuals. Please check back later or reach out with your CV.</div>
                </div>
            </div>

            <!-- Example Job Posting Structure (for when there are openings) -->
            <!--
            <div class="card bg-base-200 shadow-md mb-4">
                <div class="card-body">
                    <div class="flex justify-between items-start">
                        <div>
                            <h3 class="card-title text-xl">Position Title</h3>
                            <div class="flex gap-2 mt-2">
                                <div class="badge badge-primary">Full-time</div>
                                <div class="badge badge-outline">Remote</div>
                            </div>
                        </div>
                        <div class="text-sm text-base-content/70">Posted: Date</div>
                    </div>
                    <p class="mt-4">Brief description of the role...</p>
                    <div class="card-actions justify-end mt-4">
                        <button class="btn btn-primary">Apply Now</button>
                    </div>
                </div>
            </div>
            -->

            <h2 class="text-2xl font-semibold mt-8 mb-4">Types of Roles</h2>
            <p class="mb-4">We typically hire for the following types of positions:</p>

            <div class="space-y-4 mb-6">
                <div class="card bg-base-200">
                    <div class="card-body">
                        <h3 class="card-title text-lg">Computational Chemists</h3>
                        <p>Develop and improve prediction models, curate chemical databases, and validate predictions against experimental data.</p>
                    </div>
                </div>

                <div class="card bg-base-200">
                    <div class="card-body">
                        <h3 class="card-title text-lg">Machine Learning Engineers</h3>
                        <p>Build and optimize ML models for biotransformation prediction, feature engineering, and model deployment.</p>
                    </div>
                </div>

                <div class="card bg-base-200">
                    <div class="card-body">
                        <h3 class="card-title text-lg">Software Developers</h3>
                        <p>Develop and maintain the enviPath platform, API, and user interfaces using Python, Django, and modern web technologies.</p>
                    </div>
                </div>

                <div class="card bg-base-200">
                    <div class="card-body">
                        <h3 class="card-title text-lg">Postdoctoral Researchers</h3>
                        <p>Conduct independent research, publish findings, and contribute to grant proposals in computational environmental chemistry.</p>
                    </div>
                </div>
            </div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">Student Opportunities</h2>
            <p class="mb-4">
                We regularly host students for internships, Master's theses, and PhD projects. If you're interested
                in computational chemistry, machine learning, or environmental science, we'd love to hear from you.
            </p>

            <div class="card bg-secondary text-secondary-content mb-6">
                <div class="card-body">
                    <h3 class="card-title">Academic Collaborations</h3>
                    <p>
                        We partner with universities including the University of Auckland, Eawag, and University of Zurich.
                        Check with your academic advisor about potential collaboration opportunities.
                    </p>
                </div>
            </div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">How to Apply</h2>
            <p class="mb-4">
                Interested in joining our team? Here's how to get in touch:
            </p>
            <ol class="list-decimal list-inside mb-6 space-y-2">
                <li>Review our <a href="/about" class="link link-primary">about page</a> to understand our mission and work</li>
                <li>Prepare your CV/resume and a brief cover letter explaining your interest</li>
                <li>Visit our <a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a> or reach out via <a href="https://www.linkedin.com/company/envipath/" target="_blank" class="link link-primary">LinkedIn</a></li>
                <li>Include links to your publications, GitHub profile, or portfolio if relevant</li>
            </ol>

            <div class="alert alert-success">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="stroke-current shrink-0 w-6 h-6">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
                </svg>
                <div>
                    <h3 class="font-bold">We Value Diversity</h3>
                    <div class="text-sm">enviPath is an equal opportunity employer. We celebrate diversity and are committed to creating an inclusive environment for all team members.</div>
                </div>
            </div>

            <div class="divider my-8"></div>

            <h2 class="text-2xl font-semibold mt-8 mb-4">Contact</h2>
            <p class="mb-4">
                Have questions about careers at enviPath? Visit our <a href="/contact" class="link link-primary">contact page</a>
                or join our <a href="https://community.envipath.org/" target="_blank" class="link link-primary">community forums</a>.
            </p>
        </div>
    </div>
</div>
{% endblock main_content %}