{% extends '@tables/partials/sourceTabContent.twig' %}
{% import '@ui/tooltip.twig' as tooltip %}

{% block content %}
    {% set specialDB = environment.translate('External DB') %}
    {% set specialDBValue = 'External DB' %}
    {% set specialTable = environment.translate('SQL Query') %}
    {% set specialTableValue = 'SQL Query' %}
    <section class="tabs-content row-settings-block">
        <form id="source-settings" class="supRow">
            <div class="supMd6 supSm6 supXs12">
                <div class="setting-wrapper row">
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <label for="table-source-database">
                            {{ environment.translate('Data from Database') }}
                            {{ tooltip.icon(environment.translate('Retrieve data for table from the database.<br/>For the source data will be applied only general rules from the "Settings" tab. Styles and formatting from the "Editor" tab will be omitted.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input type="checkbox" name="source[database]"
                            {{ table.settings.source.database == 'on' ? 'checked' : '' }}
                            id="table-source-database" {% if dbTables.names | length == 0 %}disabled{% endif %}
                        />
                        {% if dbTables.names | length == 0 %}{{ dbTables.error }}{% endif %}
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database"
                    {% if table.settings.source.database is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options supMd6 supSm6 supXs12">
                        <label for="source-database-name">
                            {{ environment.translate('Database') }}
                            {{ tooltip.icon(environment.translate('Select a database from the list of available.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <select name="source[dbName]" id="source-db-name" data-special-db-val="{{ specialDBValue }}" data-special-db="{{ specialDB }}">
                            {% for dbName in dbTables.names %}
                                <option value="{{ dbName }}"
                                    {% if table.settings.source.dbName == dbName %}selected="selected"{% endif %}
                                    {% if dbName == specialDBValue %}class="specialOption">{{ specialDB }}{% else %}>{{ dbName }}{% endif %}
                                </option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-external"
                        {% if table.settings.source.database is not defined or table.settings.source.dbName != specialDBValue %}
                            style="display:none"
                        {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-db-external-host">
                            {{ environment.translate('DB host') }}
                            {{ tooltip.icon(environment.translate('Enter the host of the external database.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input name="source[dbExternalHost]" id="source-db-external-host" type="text" value="{{ table.settings.source.dbExternalHost | default('') }}">
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-external"
                    {% if table.settings.source.database is not defined or table.settings.source.dbName != specialDBValue %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-external">
                            {{ environment.translate('DB name') }}
                            {{ tooltip.icon(environment.translate('Enter the name of the external database.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input name="source[dbExternal]" id="source-db-external" type="text" value="{{ table.settings.source.dbExternal | default('') }}">
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-external"
                    {% if table.settings.source.database is not defined or table.settings.source.dbName != specialDBValue %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-login">
                            {{ environment.translate('DB user') }}
                            {{ tooltip.icon(environment.translate('Enter the username for the external database.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input name="source[dbLogin]" id="source-db-login" type="text" value="{{ table.settings.source.dbLogin | default() }}">
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-external"
                    {% if table.settings.source.database is not defined or table.settings.source.dbName != specialDBValue %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-external">
                            {{ environment.translate('DB password') }}
                            {{ tooltip.icon(environment.translate('Enter the password of the external database.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input name="source[dbPassword]" id="source-db-password" type="text" value="{{ table.settings.source.dbPassword | default() }}">
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database"
                    {% if table.settings.source.database is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options supMd6 supSm6 supXs12">
                        <label for="source-database-table">
                            {{ environment.translate('Table') }}
                            {{ tooltip.icon(environment.translate('Select the table as a data source. Click the button next to refresh the list of tables.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <div style="width: 75% !important;float: left;">
                        <select name="source[dbTable]" id="source-db-table" data-special-table-val="SQL Query" data-special-table="{{ specialTable }}">
                            {% for dbTable in dbTables.tables %}
                                <option value="{{ dbTable }}"
                                    {% if table.settings.source.dbTable == dbTable %}selected="selected"{% endif %}
                                    {% if dbTable == 'SQL Query' %}class="specialOption">{{ specialTable }}{% else %}>{{ dbTable }}{% endif %}
                                </option>
                            {% endfor %}
                        </select></div><div slyle="overflow: hidden; width: auto;"><button class="button" id="source-database-connect"><i class="fa fa-link" aria-hidden="true"></i></button></div>
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-sql"
                    {% if table.settings.source.database is not defined or table.settings.source.dbTable != specialTableValue %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options supMd6 supSm6 supXs12">
                        <label for="source-database-sql">
                            {{ environment.translate('SQL Query') }}
                            {{ tooltip.icon(environment.translate('Enter the SQL Query. You can use variables whose values are specified in the shortcode. Variables must begin with \'sql\', be enclosed in {} and can contain only latin characters, digits and underscore character, for example, {sql1} or {sql_id}.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <textarea id="source-db-sql" placeholder="{{ environment.translate('Paste SQL query here')}}" style="margin-top: 10px;">{{ table.settings.source.dbSQL | default('') }}</textarea>
                        <input type="hidden" name="source[dbSQL]" value="{{ table.settings.source.dbSQL | default('') }}" />
                    </div>
                </div>
                <div class="setting-wrapper row setting-source-database-fields"
                    {% if table.settings.source.database is not defined or table.settings.source.dbTable == specialTableValue %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options supMd6 supSm6 supXs12">
                        <label for="source-database-fields">
                            {{ environment.translate('Fields') }}
                            {{ tooltip.icon(environment.translate('Only the selected fields will be used to build the table.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <select multiple="multiple" name="source[dbFields][]" id="source-db-fields" data-placeholder="{{ environment.translate('Select fields')}}">
                            {% for dbField in dbTables.fields %}
                                <option value="{{ dbField }}"{% if dbField in table.settings.source.dbFields %} selected="selected"{% endif %}>{{ dbField }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
                <div class="setting-wrapper row source-database-allow-edit"
                    {% if table.settings.source.database is not defined or table.settings.source.dbTable == 'SQL Query' %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options supMd6 supSm6 supXs12">
                        <label for="source-database-editable">
                            {{ environment.translate('Allow Edit Data') }}
                            {{ tooltip.icon(environment.translate('Allows to edit database table data through the frontend fields.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input type="checkbox" name="source[dbEditable]"
                            {{ table.settings.source.dbEditable == 'on' ? 'checked' : '' }}
                            id="source-db-editable"
                        />
                    </div>
                </div>
                <div class="setting-wrapper row source-database-editable"
                    {% if table.settings.source.database is not defined or table.settings.source.dbEditable is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-editfields">
                            {{ environment.translate('Editable Fields') }}
                            {{ tooltip.icon(environment.translate('Select the fields available for editing. If nothing is selected, the editable ones will be all fields.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <select multiple="multiple" name="source[dbEditFields][]" id="source-db-editfields" data-placeholder="{{ environment.translate('Select fields')}}">
                            {% for dbField in dbTables.fields %}
                                <option value="{{ dbField }}"{% if dbField in table.settings.source.dbEditFields %} selected="selected"{% endif %}>{{ dbField }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>

                <div class="setting-wrapper row source-database-editable"
                    {% if table.settings.source.database is not defined or table.settings.source.dbEditable is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-savefields">
                            {{ environment.translate('Save Frontend Fields') }}
                            {{ tooltip.icon(environment.translate('Allows to save data to the database table through the frontend fields. Not supported for views referencing.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input type="checkbox" name="source[dbSaveFields]"
                            {{ table.settings.source.dbSaveFields == 'on' ? 'checked' : '' }}
                            id="source-db-savefields"
                        />
                    </div>
                </div>
                <div class="setting-wrapper row source-database-editable"
                    {% if table.settings.source.database is not defined or table.settings.source.dbEditable is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-editloggedin">
                            {{ environment.translate('Use for Logged In Users Only') }}
                            {{ tooltip.icon(environment.translate('Allows to use frontend fields only for logged in users.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input type="checkbox" name="source[dbEditLoggedIn]"
                            {{ table.settings.source.dbEditLoggedIn == 'on' ? 'checked' : '' }}
                            id="source-db-editloggedin"
                            data-target-toggle=".source-database-editloggedin"
                        />
                    </div>
                </div>
                <div class="setting-wrapper row source-database-editloggedin"
                        {% if table.settings.source.database is not defined or table.settings.source.dbEditable is not defined or table.settings.source.dbEditLoggedIn is not defined %}
                        style="display:none"
                    {% endif %}
                >
                    <div class="setting-item setting-options-options supMd6 supSm6 supXs12">
                        <label for="source-database-editroles">
                            {{ 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-item supMd6 supSm6 supXs12">
                        <select multiple="multiple" name="source[dbEditRoles][]" id="source-db-editroles" data-placeholder="{{ environment.translate('Select roles')}}">
                            {% for role, title in wpRoles %}
                                <option value="{{ role }}"{% if role in table.settings.source.dbEditRoles %} selected="selected"{% endif %}>{{ title }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
            <div class="supMd6 supSm6 supXs12">
                <div class="title-place">
                    <h3></h3>
                </div>
                <div class="setting-wrapper row setting-source-database"
                {% if table.settings.source.database is not defined %}
                    style="display:none"
                {% endif %}
                >
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <label for="table-source-diagram">
                            {{ environment.translate('Range for Diagrams') }}
                            {{ tooltip.icon(environment.translate('Specify a range for diagram. Set the range in the format A1:C10 as in Excel, where the letter is the column number in alphabetical order, the digit is the row number.')) }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <div class="sourceDiagramRange">
                            <input name="source[dbDiagramRange]" id="source-diagram-range" type="text" value="{{ table.settings.source.dbDiagramRange | default('') }}">
                        </div>
                        <button class="button" id="source-diagram-create" style="float: left;"><i class="fa fa-fw fa-bar-chart" aria-hidden="true"></i></button>
                    </div>
                </div>
            </div>
        </form>
    </section>
{% endblock %}
