{% 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, email (will be sent to admin email) 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 setting-wrapper-inline">
    <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 setting-wrapper-inline">
    <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('B'), 'value': 'b' },
                { 'name': environment.translate('A'), 'value': 'a' },
                { 'name': environment.translate('Demy'), 'value': 'demy' },
                { 'name': environment.translate('Royal'), 'value': 'royal' },
            ]%}
                <option value="{{ option.value }}" {% if table.settings.pdfPaperSize == option.value %}selected="selected"{% endif %}>{{ option.name }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper setting-wrapper-inline">
    <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-full-width">
            {{ environment.translate('PDF Table Full Width') }}
            {{ tooltip.icon(environment.translate('Stretch the table to the entire PDF page, while maintaining the proportion of the height and width of the columns.')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="pdfFullWidth" {{ table.settings.pdfFullWidth == 'on' ? 'checked' : '' }} id="features-export-pdf-full-width" />
    </div>
</div>
<div class="setting-wrapper setting-wrapper-inline 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" style="text-align: right">
        <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 setting-wrapper-inline"
        {% if table.settings.exportLogo.src is empty %}
            style="display:none"
        {% endif %}
        >
    <div class="setting-label">
        <label for="export-logo-position">
            {{ environment.translate('Logo Position') }}<br>
            {{ 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 setting-wrapper-inline"
        {% 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>
