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

{% block content %}
    {% import '@tables/view.twig' as checkbox %}

    {% set enableHistory = '' %}
    {% if table.historySettings.history.enable is not defined %}
        {% set enableHistory = 'display: none;' %}
    {% endif %}
    {% set periodOptions = {
        '': 'None',
        'day': 'Day',
        'week': 'Week',
        'month': 'Month',
        'year': 'Year',
    } %}

    <section class="history-settings tabs-content">
        <form id="history-settings" class="supRow">
            <div class="supLg6 supMd6 supSm12 supXs12" >
                <div class="setting-wrapper row">
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <input type="checkbox" name="history[enable]"
                                {{ checkbox.checked(table.historySettings.history.enable) }}
                               id="table-history-enable"
                               data-target-toggle=".table-history-enable-options"/>
                        <label for="table-history-enable">
                            <span>{{ environment.translate('Enable Table History') }}</span>
                            {{ tooltip.icon(environment.translate('When you use frontend fields, <a href="%s" target="_blank">Table History</a> allows you (using History Shortcode) to display on frontend the own table version for each logged in user. On this tab you can display any user\'s table - just choose the user name from dropdown list.') | format('//supsystic.com/documentation/data-tables-plugin-table-history/'), 'top') }}
                        </label>
                    </div>
                </div>
                <div class="setting-wrapper row table-history-enable-options" style="{{ enableHistory }}">
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <label for="table-history-period">
                            <span>{{ environment.translate('Table Copy Period') }}</span>
                            {{ tooltip.icon(environment.translate('Choose the period for creating of new copy of table in history for each user. If you have not chose the period - each user will have only one table copy in history. If period has been chosen - user can get any copy of his table just adding the period attribute to the History Shortcode.<br /> <b>%s</b> - for day and for week (you can set use any date of week)<br /> <b>%s</b> - for month<br /> <b>%s</b> - for year<br /><br /><b>Important!</b> You should to use PHP v.5.2.0 or greater to use the period feature for history table.') | format('period="2018-03-26"', 'period="2018-03"', 'period="2018"'), 'top') }}
                        </label>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <select name="history[period]" id="table-history-period">
                            {% for value, option in periodOptions %}
                                <option value="{{ value }}" {% if table.historySettings.history.period == value %} selected="selected"{% endif %}>{{ option }}</option>
                            {% endfor %}
                        </select>
                    </div>
                </div>
            </div>
        </form>
    </section>
    <section class="history-preview">
        <div class="supRow table-history-enable-options" style="{{ enableHistory }}">
            <div class="supLg6 supMd6 supSm12 supXs12" >
                <div class="setting-wrapper row">
                    <div class="setting-item supMd6 supSm6 supXs12">
                        <select name="history[user]" style="width: 100%;">
                            <option value="0">{{ environment.translate('Select User to display its table') }}</option>
                            {% for index, table in historyData %}
                                <option value="{{ table.user_id }}" data-index="{{ index }}" data-created="{{ table.created | date('Y-m-d H:i:s') }}">{{ table.user_name }} - {{ table.created | date('d.m.Y H:i:s') }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="setting-item supMd6 supSm6 supXs12">
                        {% for index, table in historyData %}
                            {% if table.updated is not empty %}
                                <div class="table-history-updated" data-index="{{ index }}" style="display: none; width: 100%; line-height: 33px; text-align: left;">{{ environment.translate('Last update') }}: {{ table.updated }}</div>
                            {% endif %}
                        {% endfor %}
                    </div>
                </div>
            </div>
        </div>
        <div class="supRow table-history-enable-options" style="{{ enableHistory }}">
            <div class="supXs12">
                <p class="description">
                    <i class="fa fa-fw fa-exclamation-circle"></i>
                    {{ environment.translate('Note that the table may look a little different depending on your theme style.') }}
                </p>
                <div id="table-history-preview"></div>
            </div>
        </div>
    </section>

{% endblock %}