<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Browse Positions - MerchantsOfHope.org</title>
    <meta name="description" content="Browse job positions on MerchantsOfHope.org">
    
    <link rel="stylesheet" href="/static/css/accessibility.css">
</head>
<body>
    <a href="#main" class="skip-link">Skip to main content</a>
    
    <header>
        <div class="container">
            <h1>MerchantsOfHope.org</h1>
            <p>Browse Job Positions</p>
            
            <nav aria-label="Main navigation">
                <ul>
                    <li><a href="/">Home</a></li>
                    <li><a href="/positions">Browse Positions</a></li>
                    <li><a href="/apply">Apply</a></li>
                    <li><a href="/login">Login</a></li>
                    <li><a href="/register">Register</a></li>
                </ul>
            </nav>
        </div>
    </header>

    <main id="main">
        <div class="container">
            <h1>Available Positions</h1>
            
            <div class="filter-section">
                <h2>Filter Positions</h2>
                <form id="filter-form">
                    <div class="form-group">
                        <label for="location">Location</label>
                        <input type="text" id="location" name="location" placeholder="e.g., Remote, New York, Atlanta">
                    </div>
                    
                    <div class="form-group">
                        <label for="employment-type">Employment Type</label>
                        <select id="employment-type" name="employment_type">
                            <option value="">All Types</option>
                            <option value="full_time">Full-time</option>
                            <option value="part_time">Part-time</option>
                            <option value="contract">Contract</option>
                            <option value="internship">Internship</option>
                        </select>
                    </div>
                    
                    <div class="form-group">
                        <label for="experience-level">Experience Level</label>
                        <select id="experience-level" name="experience_level">
                            <option value="">All Levels</option>
                            <option value="entry_level">Entry Level</option>
                            <option value="mid_level">Mid Level</option>
                            <option value="senior_level">Senior Level</option>
                            <option value="executive">Executive</option>
                        </select>
                    </div>
                    
                    <button type="submit" class="btn btn-primary">Apply Filters</button>
                    <button type="reset" class="btn">Clear Filters</button>
                </form>
            </div>
            
            <div id="positions-container">
                <!-- Positions will be loaded here dynamically -->
                <div class="position-card">
                    <div class="position-title">Senior Software Engineer</div>
                    <div class="position-meta">
                        <div>💰 $100,000 - $140,000</div>
                        <div>📍 Remote</div>
                        <div>🕒 Full-time</div>
                        <div>📊 Mid Level</div>
                    </div>
                    <p>Join our dynamic team building cutting-edge financial solutions. We're looking for an experienced software engineer with strong Go skills to help develop our next-generation platform.</p>
                    <div class="actions">
                        <button class="btn btn-primary" onclick="applyForPosition('Senior Software Engineer')">Apply Now</button>
                        <button class="btn" onclick="viewPositionDetails('Senior Software Engineer')">View Details</button>
                    </div>
                </div>
                
                <div class="position-card">
                    <div class="position-title">DevOps Specialist</div>
                    <div class="position-meta">
                        <div>💰 $90,000 - $120,000</div>
                        <div>📍 Atlanta, GA</div>
                        <div>🕒 Contract</div>
                        <div>📊 Mid Level</div>
                    </div>
                    <p>Help us improve our deployment pipelines and infrastructure. We need a DevOps specialist to implement CI/CD solutions and ensure our systems are scalable and reliable.</p>
                    <div class="actions">
                        <button class="btn btn-primary" onclick="applyForPosition('DevOps Specialist')">Apply Now</button>
                        <button class="btn" onclick="viewPositionDetails('DevOps Specialist')">View Details</button>
                    </div>
                </div>
                
                <div class="position-card">
                    <div class="position-title">Product Manager</div>
                    <div class="position-meta">
                        <div>💰 $95,000 - $130,000</div>
                        <div>📍 Remote</div>
                        <div>🕒 Full-time</div>
                        <div>📊 Senior Level</div>
                    </div>
                    <p>Lead product strategy and development for our merchant services platform. This role requires excellent communication skills and a deep understanding of the fintech industry.</p>
                    <div class="actions">
                        <button class="btn btn-primary" onclick="applyForPosition('Product Manager')">Apply Now</button>
                        <button class="btn" onclick="viewPositionDetails('Product Manager')">View Details</button>
                    </div>
                </div>
            </div>
            
            <div id="pagination" class="card">
                <nav aria-label="Pagination">
                    <ul style="display: flex; list-style: none; gap: var(--spacing-small);">
                        <li><button class="btn" onclick="changePage(1)">First</button></li>
                        <li><button class="btn" onclick="changePage(currentPage - 1)" id="prev-btn">Previous</button></li>
                        <li><button class="btn" onclick="changePage(1)" aria-current="page" id="page-1">1</button></li>
                        <li><button class="btn" onclick="changePage(2)" id="page-2">2</button></li>
                        <li><button class="btn" onclick="changePage(3)" id="page-3">3</button></li>
                        <li><button class="btn" onclick="changePage(currentPage + 1)" id="next-btn">Next</button></li>
                        <li><button class="btn" onclick="changePage(10)">Last</button></li>
                    </ul>
                </nav>
            </div>
        </div>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2025 MerchantsOfHope.org - A TSYS Group Initiative</p>
            <p>Committed to accessibility, security, and excellence</p>
        </div>
    </footer>

    <script>
        document.addEventListener('DOMContentLoaded', function() {
            // Set proper focus management
            const mainContent = document.getElementById('main');
            mainContent.setAttribute('tabindex', '-1');
            mainContent.focus();
            
            // Filter form submission
            const filterForm = document.getElementById('filter-form');
            filterForm.addEventListener('submit', function(e) {
                e.preventDefault();
                applyFilters();
            });
            
            // Ensure all interactive elements have proper focus management
            const interactiveElements = document.querySelectorAll('a, button, input, select, textarea');
            interactiveElements.forEach(el => {
                el.addEventListener('focus', function() {
                    this.style.outline = '2px solid var(--secondary-color)';
                    this.style.outlineOffset = '2px';
                });
                
                el.addEventListener('blur', function() {
                    this.style.outline = '';
                });
            });
        });
        
        let currentPage = 1;
        
        function applyFilters() {
            // In a real app, this would update the position list based on filters
            alert('Filters applied! In a real application, this would update the position listings.');
        }
        
        function applyForPosition(title) {
            // Check if user is logged in
            const isLoggedIn = localStorage.getItem('isLoggedIn') === 'true';
            
            if (!isLoggedIn) {
                alert('Please log in to apply for positions.');
                window.location.href = '/login';
                return;
            }
            
            alert(`Applying for position: ${title}\n\nIn a real application, this would take you to the application form.`);
        }
        
        function viewPositionDetails(title) {
            alert(`Viewing details for position: ${title}\n\nIn a real application, this would show comprehensive details about the position.`);
        }
        
        function changePage(page) {
            if (page < 1) page = 1;
            if (page > 10) page = 10;
            
            currentPage = page;
            updatePagination();
            
            // In a real app, this would load the new page of positions
            alert(`Loading page ${page} of positions`);
        }
        
        function updatePagination() {
            document.getElementById('prev-btn').disabled = (currentPage === 1);
            document.getElementById('next-btn').disabled = (currentPage === 10);
            
            // Update page number buttons to show current page
            for (let i = 1; i <= 3; i++) {
                const pageBtn = document.getElementById(`page-${i}`);
                if (i === currentPage) {
                    pageBtn.setAttribute('aria-current', 'page');
                    pageBtn.style.backgroundColor = 'var(--primary-color)';
                } else {
                    pageBtn.removeAttribute('aria-current');
                    pageBtn.style.backgroundColor = 'var(--secondary-color)';
                }
            }
        }
    </script>
</body>
</html>