{% extends "admin/base_site.html" %}
{% load i18n admin_urls static %}

{% block breadcrumbs %}
<div class="breadcrumbs">
<a href="{% url 'admin:index' %}">{% translate 'Home' %}</a>
&rsaquo; <a href="{% url 'admin:app_list' app_label=opts.app_label %}">{{ opts.app_config.verbose_name }}</a>
&rsaquo; <a href="{% url opts|admin_urlname:'changelist' %}">{{ opts.verbose_name_plural|capfirst }}</a>
&rsaquo; {% translate 'Import Preview' %}
</div>
{% endblock %}

{% block content %}
<div id="content-main">
    <div class="module">
        <h2>{% translate "Import Preview" %}</h2>
        <p>
            {% blocktranslate with total=total_count created=create_count updated=update_count %}
            Found <strong>{{ total }}</strong> records in the CSV file.
            <br>
            - <strong>{{ created }}</strong> will be created.
            <br>
            - <strong>{{ updated }}</strong> will be updated.
            {% endblocktranslate %}
        </p>

        {% if preview_data %}
        <div class="results">
            <h3>{% translate "Sample Records" %}</h3>
            <table style="width: 100%; border-collapse: collapse;">
                <thead>
                    <tr style="background: #f8f8f8; border-bottom: 1px solid #ccc;">
                        <th style="padding: 8px; text-align: left;">{% translate "Action" %}</th>
                        <th style="padding: 8px; text-align: left;">{% translate "CSV Name / Matched Voter" %}</th>
                        <th style="padding: 8px; text-align: left;">{% translate "Details" %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for row in preview_data %}
                    <tr style="border-bottom: 1px solid #eee;">
                        <td style="padding: 8px;">
                            {% if row.action == 'create' %}
                                <span style="color: green; font-weight: bold;">{% translate "CREATE" %}</span>
                            {% else %}
                                <span style="color: blue; font-weight: bold;">{% translate "UPDATE" %}</span>
                            {% endif %}
                        </td>
                        <td style="padding: 8px;">
                            {% if row.csv_full_name %}
                                <strong>CSV:</strong> {{ row.csv_full_name }}
                                {% if "Voter: N/A" not in row.identifier %}<br>{% endif %}
                            {% endif %}
                            {% if "Voter: N/A" not in row.identifier %}
                                <strong>Matched:</strong> {{ row.identifier|cut:"Voter: " }}
                            {% else %}
                                {% if not row.csv_full_name %}N/A{% endif %}
                            {% endif %}
                        </td>
                        <td style="padding: 8px; font-size: 0.9em; color: #666;">{{ row.details }}</td>
                    </tr>
                    {% endfor %}
                </tbody>
            </table>
            {% if total_count > preview_data|length %}
                <p><em>... and {{ total_count|add:"-10" }} more records.</em></p>
            {% endif %}
        </div>
        {% endif %}
    </div>

    <form method="post" action="{{ action_url }}">
        {% csrf_token %}
        <input type="hidden" name="file_path" value="{{ file_path }}">
        <input type="hidden" name="tenant" value="{{ tenant_id }}">
        
        {# Pass mapping as hidden fields #}
        {% for field_name, csv_col in mapping.items %}
            <input type="hidden" name="map_{{ field_name }}" value="{{ csv_col }}">
        {% endfor %}

        <div class="submit-row">
            <input type="submit" value="{% translate 'Confirm Import' %}" class="default" name="_import">
            <a href="#" onclick="window.history.back(); return false;" class="closelink">{% translate "Cancel and go back" %}</a>
        </div>
    </form>
</div>
{% endblock %}