{% extends 'base.html' %}

{% block title %}Confirm Export{% endblock %}

{% block content %}
<div class="container-xl">
    <!-- Header -->
    <div class="page-header d-print-none mb-4">
        <div class="row align-items-center">
            <div class="col">
                <div class="page-pretitle">
                    <a href="{% url 'core:bank_account_list' %}">Bank Accounts</a> / 
                    <a href="{% url 'core:statement_list' %}">Statements</a> / 
                    <a href="{% url 'core:statement_detail' statement.pk %}">{{ statement.bank_account.bank_name }}</a> / 
                    Export
                </div>
                <h2 class="page-title">
                    <i class="ti ti-file-export me-2"></i>
                    Confirm Auto Export
                </h2>
            </div>
        </div>
    </div>

    <!-- Confirmation Card -->
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card">
                <div class="card-header bg-primary text-white">
                    <h3 class="card-title mb-0">
                        <i class="ti ti-alert-triangle me-2"></i>
                        Confirm Transaction Export
                    </h3>
                </div>
                <div class="card-body">
                    <div class="alert alert-info mb-4">
                        <h4 class="alert-heading">
                            <i class="ti ti-info-circle me-2"></i>
                            What This Will Do
                        </h4>
                        <p class="mb-2">This will automatically convert <strong>{{ unreconciled_count }} unreconciled bank statement lines</strong> into system transactions:</p>
                        <ul class="mb-0">
                            <li><strong>Credit entries</strong> (money IN) → Income Transactions</li>
                            <li><strong>Debit entries</strong> (money OUT) → Expense Transactions</li>
                            <li>All transactions will be <strong>linked to {{ statement.bank_account.name }}</strong></li>
                            <li>Double-entry bookkeeping will be applied automatically</li>
                            <li>Each line will be marked as <strong>reconciled</strong> after export</li>
                        </ul>
                    </div>

                    <div class="card mb-3 border-warning">
                        <div class="card-body">
                            <h5 class="card-title text-warning">
                                <i class="ti ti-exclamation-circle me-2"></i>
                                Important Notes
                            </h5>
                            <ul class="mb-0">
                                <li>This action <strong>cannot be undone</strong> easily</li>
                                <li>Review your bank statement lines before proceeding</li>
                                <li>Transactions will use <strong>default Income/Expense accounts</strong></li>
                                <li>You can edit transaction details after export</li>
                            </ul>
                        </div>
                    </div>

                    <!-- Statement Details -->
                    <div class="mb-4">
                        <h5 class="mb-3">Statement Details:</h5>
                        <table class="table table-sm">
                            <tr>
                                <th style="width: 200px;">Bank Account:</th>
                                <td><strong>{{ statement.bank_account.name }}</strong></td>
                            </tr>
                            <tr>
                                <th>Statement Period:</th>
                                <td>{{ statement.statement_period_start|date:"d M Y" }} - {{ statement.statement_period_end|date:"d M Y" }}</td>
                            </tr>
                            <tr>
                                <th>Lines to Export:</th>
                                <td><span class="badge bg-warning">{{ unreconciled_count }}</span> unreconciled lines</td>
                            </tr>
                        </table>
                    </div>

                    <!-- Action Buttons -->
                    <div class="d-flex gap-2 justify-content-end">
                        <a href="{% url 'core:statement_detail' statement.pk %}" class="btn btn-secondary">
                            <i class="ti ti-arrow-left me-2"></i>
                            Cancel
                        </a>
                        <form method="post" style="display: inline;">
                            {% csrf_token %}
                            <button type="submit" class="btn btn-primary">
                                <i class="ti ti-file-export me-2"></i>
                                Confirm & Export {{ unreconciled_count }} Transaction(s)
                            </button>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}