{% import '@ui/tooltip.twig' as tooltip %}
{% import _self as checkbox %}

{% macro checked(option) %}
    {{ option }}
    {% if option is defined and option == 'on' %}
        checked="checked"
    {% endif %}
{% endmacro %}
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="save-editable-fields">
            {{ environment.translate('Save Frontend Fields') }}
            {{ tooltip.icon(environment.translate('Save table data entered through frontend fields. Refer to the first two buttons on the second row of the editor toolbar:<br />Add editable field<br />Add dropdown list')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="saveEditableFields" id="save-editable-fields" {{ checkbox.checked(table.settings.saveEditableFields) }} />
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="mark-last-edited-cell">
            {{ environment.translate('Mark Last Edited Cell') }}
            {{ tooltip.icon(environment.translate('Adds a symbol ✓ to last edited cell.')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="markLastEditedCell" id="mark-last-edited-cell" {{ checkbox.checked(table.settings.markLastEditedCell) }} />
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="editable-fields-logged-in">
            {{ environment.translate('Use for Logged In Users Only') }}
            {{ tooltip.icon(environment.translate('Allows to <a href="%s" target="_blank">use frontend fields only for logged in users</a>. See the next buttons on the editor toolbar:<br />
                Add editable field<br />
                Add dropdown list') | format('//supsystic.com/documentation/editable-fields-logged-users/')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="useEditableFieldsForLoggedInOnly"
               id="editable-fields-logged-in"
                {{ checkbox.checked(table.settings.useEditableFieldsForLoggedInOnly) }}
               data-target-toggle=".editable-fields-logged-in-options"
                />
    </div>
</div>
<div class="setting-wrapper editable-fields-logged-in-options setting-suboption"
        {% if table.settings.useEditableFieldsForLoggedInOnly is not defined %}
            style="display:none"
        {% endif %}
        >
    <div class="setting-label">
        <label for="editable-fields-roles">
            {{ environment.translate('Use for Current Roles Only') }}
            {{ tooltip.icon(environment.translate('Allows to use frontend fields only for users with selected roles. If there are no chosen roles - all logged in users will have ability to use the frontend fields.')) }}
        </label>
    </div>
    <div class="setting-input">
        <select multiple="multiple" name="useEditableFieldsForCurRoles[]" id="editable-fields-roles" data-placeholder="{{ environment.translate('Select roles')}}">
            {% for role, title in wpRoles %}
                <option value="{{ role }}"{% if role in table.settings.useEditableFieldsForCurRoles %} selected="selected"{% endif %}>{{ title }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="editable-file-fields-extensions">
            {{ environment.translate('Allow these file extensions') }}
            {{ tooltip.icon(environment.translate('Select the file extension that will be available for upload.')) }}
        </label>
    </div>
    <div class="setting-input">
        <select multiple="multiple" name="allowedFileTypes[]" id="editable-file-fields-extensions" data-placeholder="{{ environment.translate('Select extensions')}}">
            {% for ext in fileTypes %}
                <option value="{{ ext }}"{% if ext in table.settings.allowedFileTypes %} selected="selected"{% endif %}>{{ ext }}</option>
            {% endfor %}
        </select>
    </div>
</div>
<div class="setting-wrapper">
    <div class="setting-label">
        <label for="remove-rows">
            {{ environment.translate('Remove/Add Row Frontend (beta)') }}
            {{ tooltip.icon(environment.translate('Remove/Add row on frontend by Right click on row')) }}
        </label>
    </div>
    <div class="setting-check">
        <input type="checkbox" name="removeRows" id="remove-rows" {{ checkbox.checked(table.settings.removeRows) }} />
    </div>
</div>
<input id="settingsColHeaders" type="hidden" name="colHeaders" value="{{ table.settings.colHeaders }}">
<div id="setSelectableFieldDataDialog" class="supsystic-plugin" style="display: none;" title="Selectable Field Data">
    <a href="#" class="button listOptAddBtn">
        <i class="fa fa-plus"></i>
        {{ environment.translate('Add Option') }}
    </a>
    <a href="#" class="button listOptClearBtn">
        <i class="fa fa-eraser"></i>
        {{ environment.translate('Clear') }}
    </a>
    <div id="listOptExample" class="listOpt" style="display: none;">
        <i class="fa fa-arrows-v lcsMoveHandle"></i>
        <input type="text" name="source[]" placeholder="{{ environment.translate('value') }}" disabled="disabled" />
        <a href="#" class="button listOptRemoveBtn" title="{{ environment.translate('Remove') }}">
            <i class="fa fa-trash-o"></i>
        </a>
    </div>
    <div id="listOptsOuterShell">
        <div id="listOptsShell"></div>
    </div>
    <div style="clear: both;"></div>
</div>
<div id="setEditColumnsHeaderDataDialog" class="supsystic-plugin" style="display: none;" title="Edit Columns Header">
    <div id="listHeadColsText">
        <div class="supsystic-text">{{ environment.translate('This option allows you to specify your own names for the columns of the table and display them on the frontend.') }}</div>
        <br>
    </div>
    <div id="listHeadColsExample" class="listOpt" style="display: none;">
        <input type="text" name="head_cols[]" placeholder="{{ environment.translate('value') }}" disabled="disabled" />
    </div>
    <div id="listHeadColsOuterShell">
        <div class="">{{ environment.translate('Current values') }}</div>
        <div id="listHeadColsShell"></div>
    </div>
    <div style="clear: both;"></div>
</div>
