{% extends "base.html" %}
{% set active_page = "preprocess" %}

{% block content %}
<h2>{{ get_trans('menu_preprocess', session.get('ui_lang', 'en')) }}</h2>

{% if error %}
<div class="alert alert-warning">{{ error }}</div>
{% else %}
<div class="card p-4">
    <form id="processForm">
        <div class="mb-3">
            <label>{{ get_trans('text_col_label', session.get('ui_lang', 'en')) }}</label>
            <select name="text_col" class="form-select">
                {% for col in columns %}
                <option value="{{ col }}">{{ col }}</option>
                {% endfor %}
            </select>
        </div>
        <div class="mb-3">
            <label>{{ get_trans('target_lang_label', session.get('ui_lang', 'en')) }}</label>
            <select name="langs" class="form-select" multiple>
                <option value="en" selected>English</option>
                <option value="cn">Chinese (中文)</option>
                <option value="ja">Japanese (日本語)</option>
                <option value="ko">Korean (한국어)</option>
                <option value="de">German (Deutsch)</option>
                <option value="fr">French (Français)</option>
            </select>
        </div>
        
        <div class="mb-3">
            <label>{{ get_trans('pos_filter_label', session.get('ui_lang', 'en')) }}</label>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="pos_filter" value="noun" id="posNoun" checked>
                <label class="form-check-label" for="posNoun">{{ get_trans('keep_nouns', session.get('ui_lang', 'en')) }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="pos_filter" value="verb" id="posVerb" checked>
                <label class="form-check-label" for="posVerb">{{ get_trans('keep_verbs', session.get('ui_lang', 'en')) }}</label>
            </div>
            <div class="form-check">
                <input class="form-check-input" type="checkbox" name="pos_filter" value="adj" id="posAdj" checked>
                <label class="form-check-label" for="posAdj">{{ get_trans('keep_adj', session.get('ui_lang', 'en')) }}</label>
            </div>
        </div>

        <div class="form-check mb-3">
            <input class="form-check-input" type="checkbox" name="extract_dialogue" value="true" id="extractCheck">
            <label class="form-check-label" for="extractCheck">
                {{ get_trans('extract_dialogue', session.get('ui_lang', 'en')) }}
            </label>
        </div>
        <button type="submit" class="btn btn-success">{{ get_trans('run_token_btn', session.get('ui_lang', 'en')) }}</button>
    </form>
</div>

<div id="result" class="mt-3"></div>

<div id="exportArea" class="mt-4" style="display:none;">
    <h4>{{ get_trans('preprocess_export_title', session.get('ui_lang', 'en')) }}</h4>
    <div class="btn-group">
        <a href="/export/csv" class="btn btn-outline-primary">{{ get_trans('export_csv', session.get('ui_lang', 'en')) }}</a>
        <a href="/export/json" class="btn btn-outline-secondary">{{ get_trans('export_json', session.get('ui_lang', 'en')) }}</a>
    </div>
</div>

{% endif %}

{% endblock %}

{% block scripts %}
<script>
    var processingMsg = "{{ get_trans('processing_msg', session.get('ui_lang', 'en')) }}";
    var successMsg = "{{ get_trans('preprocess_success', session.get('ui_lang', 'en')) }}";

    $('#processForm').on('submit', function(e) {
        e.preventDefault();
        $('#result').html('<div class="spinner-border" role="status"></div> ' + processingMsg);
        $.post('/preprocess', $(this).serialize(), function(res) {
            var msg = successMsg.replace('{count}', res.count);
            $('#result').html('<div class="alert alert-success">' + msg + '</div>');
            $('#exportArea').show();
        });
    });
</script>
{% endblock %}