{% extends "base.html" %}
{% block title %}Election Process — Step by Step Guide{% endblock %}

{% block content %}
<section class="page-header">
    <h1>Election Process Guide</h1>
    <p class="page-sub">Follow these 5 steps to participate in the India 2026 General Election.</p>
</section>

<div class="progress-bar-container" aria-label="Process steps progress">
    <div class="progress-track">
        <div class="progress-fill" id="progress-fill" style="width:0%"></div>
    </div>
    <span class="progress-label" id="progress-label">Loading…</span>
</div>

<div id="process-steps" class="process-steps">
    <p class="loading-text">Loading process steps…</p>
</div>
{% endblock %}

{% block scripts %}
<script>
document.addEventListener('DOMContentLoaded', function() {
    fetch('/api/steps')
        .then(r => r.json())
        .then(data => {
            const container = document.getElementById('process-steps');
            const total = data.length;
            document.getElementById('progress-label').textContent = total + ' steps';
            document.getElementById('progress-fill').style.width = '100%';

            container.innerHTML = data.map((step, idx) => `
                <div class="step-card glass" style="animation-delay:${idx * 0.1}s">
                    <div class="step-number">${step.step_number}</div>
                    <div class="step-body">
                        <h2>${step.title}</h2>
                        <p>${step.description}</p>
                        <div class="step-details">
                            <h3>Key Points</h3>
                            <ul class="kp-list">
                                ${step.key_points.map(p => '<li>' + p + '</li>').join('')}
                            </ul>
                            ${step.resources && step.resources.length ? `
                                <h3>Resources</h3>
                                <ul class="res-list">
                                    ${step.resources.map(r =>
                                        typeof r === 'object'
                                            ? '<li><a href="' + r.url + '" target="_blank" rel="noopener">' + r.name + '</a></li>'
                                            : '<li>' + r + '</li>'
                                    ).join('')}
                                </ul>
                            ` : ''}
                        </div>
                        <div class="step-meta">
                            <span class="badge badge-medium">⏱ ${step.estimated_time}</span>
                        </div>
                    </div>
                </div>
            `).join('');
        })
        .catch(err => {
            document.getElementById('process-steps').innerHTML =
                '<p class="error-text">Error loading steps: ' + err.message + '</p>';
        });
});
</script>
{% endblock %}