{% extends 'page.html.twig' %}

{% block content %}
            <div class="ui icon yellow icon message with-transition">
                <i class="exclamation triangle icon"></i>
                <div class="content">
                    {{ _T("Warning: Don't forget to backup your current database.") }}
                </div>
            </div>
            <div class="ui basic fitted segment">
                <div class="ui styled fluid accordion row">
                    <div class="active title">
                        <i class="jsonly displaynone icon dropdown"></i>
                        {{ _T('Existing files') }}
                    </div>
                    <div class="active content field">
                        <form class="ui form" action="{{ url_for('doImport') }}" method="post">
{% if existing|length > 0 %}
                            <p>{{ _T('The following files seems ready to import on the disk:') }}</p>
                            <table class="listing ui celled striped table">
                                <thead>
                                    <tr>
                                        <th>{{ _T('Name') }}</th>
                                        <th>{{ _T('Date') }}</th>
                                        <th>{{ _T('Size') }}</th>
                                        <th class="actions_row">{{ _T('Actions') }}</th>
                                    </tr>
                                </thead>
                                <tbody>
    {% for import in existing %}
                                    <tr>
                                        <td data-scope="row">
                                            <input type="radio" name="import_file" id="file{{ loop.index }}" value="{{ import.name }}"{% if import_file is defined and import_file == import.name %} checked="checked"{% endif %}/>
                                            <label for="file{{ loop.index }}">{{ import.name }}</label> (<a href="{{ url_for("getCsv", {"type": "import", "file": import.name}) }}">{{ _T('see') }}</a>)
                                        </td>
                                        <td data-title="{{ _T('Date') }}">
                                            {{ import.date }}
                                        </td>
                                        <td data-title="{{ _T('Size') }}">
                                            {{ import.size }}
                                        </td>
                                        <td class="actions_row">
                                            <a
                                                href="{{ url_for("removeCsv", {"type": "import", "file": import.name}) }}"
                                                class="delete"
                                            >
                                                <i class="ui trash red icon tooltip"></i>
                                                <span class="ui special popup">{{ _T('Remove \'%file\' from disk')|replace({'%file': import.name}) }}</span>
                                            </a>
                                        </td>
                                    </tr>
    {% endfor %}
                                </tbody>
                            </table>
                            <div class="ui basic center aligned segment">
                                <div class="ui tooltip toggle checkbox" title="{{ _T('Run the import process, but do *not* store anything in the database') }}">
                                    <label for="dryrun">{{ _T('Dry run') }}</label>
                                    <input type="checkbox" name="dryrun" id="dryrun" value="1"{% if dryrun is defined and dryrun == true %} checked="checked"{% endif %}/>
                                </div>
                                <button type="submit" name="import" id="import" class="ui labeled icon button">
                                    <i class="ui file import blue icon"></i>
                                    {{ _T('Import') }}
                                </button>
                                {% include "components/forms/csrf.html.twig" %}
                            </div>
{% else %}
                            <p>{{ _T('No import file actually exists.') }}<br/>{{ _T('Use upload form below to send a new file on server, or copy it directly in the imports directory.') }}</p>
{% endif %}
                        </form>
                    </div>
                </div>
            </div>
            <form class="ui form" action="{{ url_for('uploadImportFile') }}" method="post" enctype="multipart/form-data">
                <div class="ui basic fitted segment">
                    <div class="ui styled fluid accordion row">
                        <div class="active title">
                            <i class="jsonly displaynone icon dropdown"></i>
                            {{ _T('Upload new file') }}
                        </div>
                        <div class="active content field">
                            <div class="field wide">
                                <div class="ui file action input">
                                    <input type="file" name="new_file" accept="text/csv" id="new_file"/>
                                    <label for="new_file" class="ui button">
                                        <i class="blue file csv icon"></i>
                                        {{ _T('Choose a file') }}
                                    </label>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="ui basic center aligned segment">
                    <div class="ui wrapping spaced buttons">
                        <button type="submit" name="upload" id="upload" class="ui primary labeled icon button">
                            <i class="upload icon" aria-hidd="true"></i>
                            {{ _T('Upload file') }}
                        </button>
                        <a
                            href="{{ url_for('importModel') }}"
                            class="ui labeled icon button"
                        >
                            <i class="cogs icon" aria-hidden="true"></i>
                            {{ _T('Configure import model') }}
                        </a>
                        {% include "components/forms/csrf.html.twig" %}
                    </div>
                </div>
            </form>
{% endblock %}

{% block javascripts %}
        <script type="text/javascript">
            $(function() {
                //bind import click to check if one is selected
                $('#import').on('click', function(){
                    if ( $('input[name=import_file]:checked').length > 0 ) {
                        return true;
                    } else {
                        {% include "elements/js/modal.js.twig" with {
                            modal_title_twig: _T("No file selected")|e("js"),
                            modal_content_twig: _T("Please make sure to select one file to import.")|e("js"),
                            modal_class: "tiny",
                            modal_deny_only: true,
                            modal_cancel_text: _T("Close")|e("js"),
                            modal_classname: "redalert",
                        } %}
                        return false;
                    }
                });

                $('#upload').click(function(){
                    var _selected = $('#new_file')[0].files.length;
                    if ( _selected == 0 ) {
                        {% include "elements/js/modal.js.twig" with {
                            modal_title_twig: _T("No file selected")|e("js"),
                            modal_content_twig: _T("Please make sure to select one file to upload.")|e("js"),
                            modal_class: "tiny",
                            modal_deny_only: true,
                            modal_cancel_text: _T("Close")|e("js"),
                            modal_classname: "redalert",
                        } %}
                        return false;
                    } else {
                        return true;
                    }
                });
            });
            {% include "elements/js/removal.js.twig" with {
                single_action: "true"
            } %}
        </script>
{% endblock %}
