{% set formStyles = 'display: none;' %}
{% if is_frontend == true %}
    {% set formStyles = 'margin: 20px 0;' %}
{% endif %}
<div id="stbImportDialog" title="{{ environment.translate('Import Data to the Table') }}" style="{{ formStyles }}">
    <form{% if is_frontend == false %} {{' '}} action="{{ environment.generateUrl('importer', 'import') }}"{% endif %} accept-charset="UTF-8" enctype="multipart/form-data" method="post">
        {% set columnSize = 4 %}
        <h3 style="margin: 0.5em 0 1em 0;">{{ environment.translate('File Type') }}</h3>
        <div class="supRow">
            <div class="supXs{{ columnSize }}">
                <label for="it-csv">
                    <input type="radio" name="extension" id="it-csv" value="csv" checked="checked"/>
                    CSV
                </label>
            </div>
            <div class="supXs{{ columnSize }}">
                <label for="it-xls">
                    <input type="radio" name="extension" id="it-xls" value="xls"/>
                    MS Excel
                </label>
            </div>
            <div class="supXs{{ columnSize }}">
                <label for="it-spreadsheets">
                    <input type="radio" name="extension" id="it-spreadsheets" value="spreadsheets"/>
                    Google Spreadsheets
                </label>
            </div>
            <div class="supXs12">
                <div class="import-settings">
                    <h3>{{ environment.translate('Import Settings') }}</h3>
                    <div class="csv-import-settings xls-import-settings" style="margin:10px 0">
                        <input type="file" name="file" class="import-file"/>
                    </div>
                    <div class="csv-import-settings">
                        <label>
                            {{ environment.translate('Delimiter') }}
                        </label><br />
                        <select name="settings[delimeter]" style="width: 50%; font-size:16px; margin-bottom:10px;">
                            <option value=",">,</option>
                            <option value=";">;</option>
                        </select>
                    </div>
                    <div class="spreadsheets-import-settings">
                        <label>
                            {{ environment.translate('Google Spreadsheet Url') }}
                        </label>
                        <input type="text" name="settings[url]" class="import-file" style="font-size:16px;" value="" placeholder="https://docs.google.com/spreadsheets/d/xxxxxxxxxxxxxxxxxxxxxxxxxx/edit#gid=0">
                        <p style="margin:10px 0;">{{ environment.translate('Important! Please, check the sharing settings of your spreadsheet: it must be accessed to edit for everyone who has link. In other case the data will not import to table.') }}</p>
                    </div>
                    <div class="common-settings">
                        <label>
                            <input type="checkbox" name="settings[remove_data]" class="import-file">
                            {{ environment.translate('Clear table before import') }}
                        </label>
                    </div>
                    <div class="common-settings">
                        <label>
                            <input type="checkbox" name="settings[raw_data]" class="import-file">
                            {{ environment.translate('Import only raw data without formatting') }}
                        </label>
                    </div>
					<div class="xls-import-settings">
						<label>
							<input type="checkbox" name="settings[visible_data]" class="import-file">
							{{ environment.translate('Import string data as you can see it on excel') }}
						</label>
					</div>
                </div>
            </div>
            {% block submit %}{% endblock %}
            <input name="id" type="hidden" value="{{ table_id }}"/>
        </div>
        {% if is_frontend == false %}
            <div id="importErrorMsg" style="display: none; margin: 10px 0;"></div>
        {% endif %}
    </form>

    {% block script %}
        <script type="text/javascript"> //<![CDATA[
            var g_stbImportDialog = jQuery('#stbImportDialog');

            if(g_stbImportDialog.length) {
                g_stbImportDialog.find('input[name="extension"]').on('change ifChanged', function(e) {
                    var $this = jQuery(this);

                    if($this.is(':checked')) {
                        e.preventDefault();
                        var $settings = g_stbImportDialog.find('.' + $this.val() + '-import-settings');

                        g_stbImportDialog.find('[class*="-import-settings"]').hide();
                        if($settings.length) {
                            $settings.show();
                            g_stbImportDialog.find('.import-settings').show();
                        }
                    }
                }).trigger('change');
            }
            // ]]> </script>
    {% endblock %}
</div>
