<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>What's the Damage</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous" defer></script>
    <script>
        function clearForm() {
            fetch('/clear', { method: 'POST' })
                .then(response => {
                    if (response.ok) {
                        window.location.reload();
                    }
                });
        }
    </script>
</head>
<body>
    <header>
        {% include 'header.html' %}
    </header>
    <main class="container">
        <!-- Flash messages -->
        {% with messages = get_flashed_messages(with_categories=true) %}
            {% if messages %}
                <div class="alert-container text-bg-danger">
                    {% for category, message in messages %}
                        <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                            {{ message }}
                            <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                        </div>
                    {% endfor %}
                </div>
            {% endif %}
        {% endwith %}
        <form action="/process" method="post" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            <div class="row">
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            {{ _('File Uploads') }}
                        </div>
                        <div class="card-body bg-light">
                            <div class="mb-3">
                                <label for="filename" class="form-label">{{ _('CSV file:') }}</label>
                                {{ form.filename(class="form-control", id="filename") }}
                                <div id="fileHelp" class="form-text">{{ _('Upload your CSV file containing the exported bank account history here.') }}</div>
                            </div>
                            <div class="mb-3">
                                <label for="config" class="form-label">{{ _('Configuration file:') }}</label>
                                {{ form.config(class="form-control", id="config") }}
                                <div id="configHelp" class="form-text">{{ _('Upload your configuration file here, or the default configuration will be used.') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-md-6 mb-3">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            {{ _('Filters') }}
                        </div>
                        <div class="card-body bg-light">
                            <div class="mb-3">
                                <label for="start_date" class="form-label">{{ _('Start date:') }}</label>
                                {{ form.start_date(class="form-control", id="start_date") }}
                                <div id="dateStartHelp" class="form-text">{{ _('Filter results starting from this date.') }}</div>
                            </div>
                            <div class="mb-3">
                                <label for="end_date" class="form-label">{{ _('End date:') }}</label>
                                {{ form.end_date(class="form-control", id="end_date") }}
                                <div id="dateEndHelp" class="form-text">{{ _('Filter results up until this date.') }}</div>
                            </div>
                            <div class="mb-3">
                                <label for="filter" class="form-label">{{ _('Category filter:') }}</label>
                                {{ form.filter(class="form-control", id="filter") }}
                                <div id="filterHelp" class="form-text">{{ _("Filter by category. (default = 'category')") }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-12 mb-3">
                    <div class="card">
                        <div class="card-header bg-success text-white">
                            {{ _('Advanced settings') }}
                        </div>
                        <div class="card-body bg-light">
                            <div class="mb-3 form-check">
                                {{ form.verbose(class="form-check-input", id="verbose") }}
                                <label for="verbose" class="form-check-label">{{ _('Enable verbose logging') }}</label>
                                <div id="verboseHelp" class="form-text">{{ _("Enable detailed logging in the backend service's console.") }}</div>
                            </div>
                            <div class="mb-3 form-check">
                                {{ form.no_currency_format(class="form-check-input", id="no_currency_format") }}
                                <label for="no_currency_format" class="form-check-label">{{ _('No currency formatting') }}</label>
                                <div id="currencyHelp" class="form-text">{{ _('Select this option to exclude currency symbols in the exported CSV. You can format the cells in your spreadsheet application instead.') }}</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="row">
                <div class="col-md-6">
                    <button type="submit" class="btn btn-primary mt-3">{{ _('Submit') }}</button>
                </div>
                <div class="col-md-6 text-end">
                    <button type="button" class="btn btn-secondary mt-3" onclick="clearForm()">{{ _('Clear Form') }}</button>
                </div>
            </div>
        </form>
    </main>
    <footer class="bg-success text-white text-center py-3 mt-3">
        {% include 'footer.html' %}
    </footer>
</body>
</html>