{% import '@ui/tooltip.twig' as tooltip %}
<div class="setting-title">
    <h3>{{ environment.translate('Export / Import') }}</h3>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export">
            {{ environment.translate('Frontend Export') }}
            {{ tooltip.icon(environment.translate('Allows to export table in pdf, csv, xls formats from the front-end. Choose needed formats')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="features[export][]" id="features-export" multiple="multiple">
            {% for name, value in environment.getModule('exporter').getSupportedFormats() %}
                <option value="{{ value }}" {% if value in table.settings.features.export %}selected="selected"{% endif %}>{{ name }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export-links-position">
            {{ environment.translate('Export Links Position') }}
            {{ tooltip.icon(environment.translate('Select position of export links around of table')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="exportLinksPosition" id="features-export-links-position">
            {% for option in [
            { 'name': environment.translate('Before table'), 'value': 'before_table' },
            { 'name': environment.translate('After table'), 'value': 'after_table' }
            ]%}
                <option value="{{ option.value }}" {% if table.settings.exportLinksPosition == option.value %}selected="selected"{% endif %}>{{ option.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export-only-visible">
            {{ environment.translate('Export Only Visible') }}
            {{ tooltip.icon(environment.translate('Allows you to export only visible data: filtered rows with sorting.')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="exportOnlyVisible" {{ table.settings.exportOnlyVisible == 'on' ? 'checked' : '' }} id="features-export-only-visible" />
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export-pdf-paper-size">
            {{ environment.translate('PDF Paper Size') }}
            {{ tooltip.icon(environment.translate('Choose the paper size for PDF pages')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="pdfPaperSize" id="features-export-pdf-paper-size">
            {% for option in [
                { 'name': environment.translate('Automatic'), 'value': 'auto' },
                { 'name': environment.translate('4A0'), 'value': '4a0' },
                { 'name': environment.translate('2A0'), 'value': '2a0' },
                { 'name': environment.translate('A0'), 'value': 'a0' },
                { 'name': environment.translate('A1'), 'value': 'a1' },
                { 'name': environment.translate('A2'), 'value': 'a2' },
                { 'name': environment.translate('A3'), 'value': 'a3' },
                { 'name': environment.translate('A4'), 'value': 'a4' },
                { 'name': environment.translate('A5'), 'value': 'a5' },
                { 'name': environment.translate('A6'), 'value': 'a6' },
                { 'name': environment.translate('A7'), 'value': 'a7' },
                { 'name': environment.translate('A8'), 'value': 'a8' },
                { 'name': environment.translate('A9'), 'value': 'a9' },
                { 'name': environment.translate('A10'), 'value': 'a10' },
                { 'name': environment.translate('B0'), 'value': 'b0' },
                { 'name': environment.translate('B1'), 'value': 'b1' },
                { 'name': environment.translate('B2'), 'value': 'b2' },
                { 'name': environment.translate('B3'), 'value': 'b3' },
                { 'name': environment.translate('B4'), 'value': 'b4' },
                { 'name': environment.translate('B5'), 'value': 'b5' },
                { 'name': environment.translate('B6'), 'value': 'b6' },
                { 'name': environment.translate('B7'), 'value': 'b7' },
                { 'name': environment.translate('B8'), 'value': 'b8' },
                { 'name': environment.translate('B9'), 'value': 'b9' },
                { 'name': environment.translate('B10'), 'value': 'b10' },
                { 'name': environment.translate('C0'), 'value': 'c0' },
                { 'name': environment.translate('C1'), 'value': 'c1' },
                { 'name': environment.translate('C2'), 'value': 'c2' },
                { 'name': environment.translate('C3'), 'value': 'c3' },
                { 'name': environment.translate('C4'), 'value': 'c4' },
                { 'name': environment.translate('C5'), 'value': 'c5' },
                { 'name': environment.translate('C6'), 'value': 'c6' },
                { 'name': environment.translate('C7'), 'value': 'c7' },
                { 'name': environment.translate('C8'), 'value': 'c8' },
                { 'name': environment.translate('C9'), 'value': 'c9' },
                { 'name': environment.translate('C10'), 'value': 'c10' },
                { 'name': environment.translate('RA0'), 'value': 'ra0' },
                { 'name': environment.translate('RA1'), 'value': 'ra1' },
                { 'name': environment.translate('RA2'), 'value': 'ra2' },
                { 'name': environment.translate('RA3'), 'value': 'ra3' },
                { 'name': environment.translate('RA4'), 'value': 'ra4' },
                { 'name': environment.translate('SRA0'), 'value': 'sra0' },
                { 'name': environment.translate('SRA1'), 'value': 'sra1' },
                { 'name': environment.translate('SRA2'), 'value': 'sra2' },
                { 'name': environment.translate('SRA3'), 'value': 'sra3' },
                { 'name': environment.translate('SRA4'), 'value': 'sra4' },
                { 'name': environment.translate('Letter'), 'value': 'letter' },
                { 'name': environment.translate('Legal'), 'value': 'legal' },
                { 'name': environment.translate('Ledger'), 'value': 'ledger' },
                { 'name': environment.translate('Tabloid'), 'value': 'tabloid' },
                { 'name': environment.translate('Executive'), 'value': 'executive' },
                { 'name': environment.translate('Folio'), 'value': 'folio' },
                { 'name': environment.translate('Commerical #10 Envelope'), 'value': 'commerical #10 envelope' },
                { 'name': environment.translate('Catalog #10 1/2 Envelope'), 'value': 'catalog #10 1/2 envelope' },
                { 'name': environment.translate('8.5x11'), 'value': '8.5x11' },
                { 'name': environment.translate('8.5x14'), 'value': '8.5x14' },
                { 'name': environment.translate('11x17'), 'value': '11x17' },
            ]%}
                <option value="{{ option.value }}" {% if table.settings.pdfPaperSize == option.value %}selected="selected"{% endif %}>{{ option.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export-pdf-orientation">
            {{ environment.translate('PDF Page Orientation') }}
            {{ tooltip.icon(environment.translate('Choose the orientation for PDF pages')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="pdfOrientation" id="features-export-pdf-orientation">
            {% for option in [
                { 'name': environment.translate('Portrait'), 'value': 'portrait' },
                { 'name': environment.translate('Landscape'), 'value': 'landscape' }
            ]%}
                <option value="{{ option.value }}" {% if table.settings.pdfOrientation == option.value %}selected="selected"{% endif %}>{{ option.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="features-export-pdf-export-fonts">
            {{ environment.translate('Export Fonts to PDF') }}
            {{ tooltip.icon(environment.translate('Allows export to PDF file the fonts, which were set for table content via editor toolbar. Important! Custom fonts might not contain some specific characters (greek, cyrillic etc.), so after importing of fonts your PDF file might lost part of content.')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="pdfExportFonts" {{ table.settings.pdfExportFonts == 'on' ? 'checked' : '' }} id="features-export-pdf-export-fonts" />
    </div>
</div>
<div class="setting-wrapper setting-export-logo {% if table.settings.exportLogo.src is not empty %}selected{% endif %}">
    <div class="setting-label">
        {% set labelFor = 'features-export-select-logo' %}
        {% if table.settings.exportLogo.src is not empty %}
            {% set labelFor = 'features-export-remove-logo' %}
        {% endif %}
        <label for="{{ labelFor }}">
            {{ environment.translate('Export Logo') }}
            {{ tooltip.icon(environment.translate('Automticaly appends selected logo for output pdf or printing')) }}
        </label>
    </div>
    <div class="setting-input">
        <button class="button select-logo" id="features-export-select-logo" {% if table.settings.exportLogo.src is not empty %}style="display: none;"{% endif %}>{{ environment.translate('Select Logo') }}</button>
        <button class="button remove-logo" id="features-export-remove-logo" {% if table.settings.exportLogo.src is empty %}style="display: none;"{% endif %}>{{ environment.translate('Remove Logo') }}</button>
        <input type="hidden" name="exportLogo[src]" value="{{ table.settings.exportLogo.src }}">
        <div class="export-logo-img" data="{{ table|json_encode | e }}" {% if table.settings.exportLogo.src is empty %}
            style="display:none"
        {% endif %}>
            <img src="{{ table.settings.exportLogo.src }}" style="max-width: 200px; height: auto; padding: 10px 0;" />
        </div>
    </div>
</div>
<div class="setting-wrapper export-logo-options setting-suboption"
        {% if table.settings.exportLogo.src is empty %}
            style="display:none"
        {% endif %}
        >
    <div class="setting-label">
        <label for="export-logo-position">
            {{ environment.translate('Logo Position') }}
            {{ tooltip.icon(environment.translate('Select position of table logotype')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="exportLogo[position]" id="export-logo-position">
            {% for value, name in {
                'top': environment.translate('Above table'),
                'bottom': environment.translate('Below table')
            } %}
                <option value="{{ value }}" {% if value in table.settings.exportLogo.position %}selected="selected"{% endif %}>{{ name }}</option>
            {% endfor %}

        </select>
    </div>
</div>
<div class="setting-wrapper export-logo-options setting-suboption"
        {% if table.settings.exportLogo.src is empty %}
            style="display:none"
        {% endif %}
        >
    <div class="setting-label">
        <label for="export-logo-alignment">
            {{ environment.translate('Logo Alignment') }}
            {{ tooltip.icon(environment.translate('Select alignment of table logotype')) }}
        </label>
    </div>
    <div class="setting-input">
        <select name="exportLogo[alignment]" id="export-logo-alignment">
           {% for value, name in {
                'left': environment.translate('Left'),
                'center': environment.translate('Center'),
                'right': environment.translate('Right')
            } %}
                <option value="{{ value }}" {% if value in table.settings.exportLogo.alignment %}selected="selected"{% endif %}>{{ name }}</option>
            {% endfor %}
        </select>
    </div>
</div>