{% extends 'base.twig' %}

{% block layout %}
    <div class="supsystic-plugin">

        {% block header %}
            <nav id="supsystic-breadcrumbs" class="supsystic-breadcrumbs">
                <a href="{{ environment.generateUrl('tables') }}">{{ translate('Data Tables by Supsystic') }}</a>
            </nav>
        {% endblock %}

        <section class="supsystic-content">
            <nav class="supsystic-navigation supsystic-sticky supsystic-sticky-active">
                <ul>
                    {% block navigation %}
                        <li class="{% if request.query.module == 'overview' %}active{% endif %}">
                            <a href="{{ environment.generateUrl('overview') }}">
                                <i class="fa fa-info"></i>
                                <span>{{ environment.translate('Overview') }}</span>
                            </a>
                        </li>
                        <li>
                            <a id="menuItem_addTable" href="#add">
                                <i class="fa fa-plus-circle"></i>
                                <span>{{ environment.translate('Add new table') }}</span>
                            </a>
                        </li>
                        <li {% if environment.isModule('tables') %} class="active"{% endif %}>
                            <a id="menuItem_tables" href="{{ environment.generateUrl('tables') }}">
                                <i class="fa fa-fw fa-table"></i>
                                <span>{{ environment.translate('Tables') }}</span>
                            </a>
                        </li>
                        <li {% if environment.isModule('settings') %} class="active"{% endif %}>
                            <a id="menuItem_tables" href="{{ environment.generateUrl('settings') }}">
                                <i class="fa fa-fw fa-gear"></i>
                                <span>{{ environment.translate('Settings') }}</span>
                            </a>
                        </li>
                        {% if environment.getModule('license') != null %}
                            <li {% if environment.isModule('license') %} class="active"{% endif %}>
                                <a id="menuItem_tables" href="{{ environment.generateUrl('license') }}">
                                    <i class="fa fa-fw fa-hand-o-right "></i>
                                    <span>{{ environment.translate('License') }}</span>
                                </a>
                            </li>
                        {% endif %}
                        {% if environment.getModule('licenseai') != null %}
                            <li {% if environment.isModule('licenseai') %} class="active"{% endif %}>
                                <a id="menuItem_tables" href="{{ environment.generateUrl('licenseai') }}">
                                    <i class="fa fa-fw fa-laptop "></i>
                                    <span>{{ environment.translate('License AI') }}</span>
                                </a>
                            </li>
                        {% endif %}
                    {% endblock %}
                </ul>
                <div class="clear"></div>
                <!-- /.clear -->
            </nav>
            <!-- /.supsystic-navigation supsystic-sticky supsystic-sticky-active -->
            <div class="supsystic-container">
                {{ environment.getDispatcher().dispatch('notices') }}
                {{ environment.getDispatcher().dispatch('messages') }}
                <div class="clear"></div>
                {% block content %}{% endblock %}
                <div class="clear"></div>
                <div id="dtgAddDialog" style="display: none; min-height: 70px;" title="{{ environment.translate('Add new table') }}">
                    <form id="tableForm">
                        <div class="dtgs-create-wizard">
                            <div class="supXs12">
                                <label for="dtgAddDialog_title">
                                    {{ environment.translate('Table title') }}
                                </label>
                                <input id="dtgAddDialog_title" class="supsystic-text" type="text" style="width:100%;"/>
                            </div>
                            <div id="dtgsWizardProgress" class="dtgs-create-progress"></div>
                            <div class="dtgs-create-step dtgs-wizard-step" data-wizard-step="1">
                                <h4>{{ environment.translate('Step 1: Choose Table Type') }}</h4>
                                <div class="dtgs-create-options">
                                    <label class="dtgs-create-option">
                                        <input type="radio" name="dtgs_table_type" value="data" checked="checked">
                                        <strong>{{ environment.translate('Data Table') }}</strong>
                                        <span>{{ environment.translate('Classic editable rows and columns table.') }}</span>
                                    </label>

                                    <label class="dtgs-create-option{% if not environment.isWoo() %} is-disabled{% endif %}"{% if not environment.isWoo() %} data-disabled-reason="woocommerce"{% endif %}>
                                        <input type="radio" name="dtgs_table_type" value="woocommerce"{% if not environment.isWoo() %} disabled="disabled"{% endif %}>
                                        <strong>{{ environment.translate('WooCommerce Product Table') }}</strong>
                                        <span>
                                            {{ environment.translate('Create a product table powered by WooCommerce products.') }}
                                            {% if not environment.isWoo() %}
                                                {{ environment.translate('WooCommerce must be installed and activated first.') }}
                                            {% endif %}
                                        </span>
                                    </label>
                                </div>
                            </div>
                            <div class="dtgs-create-step dtgs-wizard-step" data-wizard-step="2">
                                <h4 id="dtgsWizardStepTwoTitle">{{ environment.translate('Step 2: Rows x Columns') }}</h4>
                                <div id="dtgsWizardDataSize" class="supRow">
                                    <div class="supXs6">
                                        <label for="dtgAddDialog_cols">
                                            {{ environment.translate('Columns') }}
                                        </label>
                                        <input id="dtgAddDialog_cols" class="supsystic-text" type="number" value="5" min="1" max="100" style="width: 100%"/>
                                    </div>
                                    <div class="supXs6">
                                        <label for="dtgAddDialog_rows">
                                            {{ environment.translate('Rows') }}
                                        </label>
                                        <input id="dtgAddDialog_rows" class="supsystic-text" type="number" value="5" min="1" max="100" style="width: 100%"/>
                                    </div>
                                    <div class="supXs12" style="padding-top: 5px;">{{ environment.translate('You can change number of Columns and Rows later') }}</div>
                                </div>
                                <div id="dtgsWizardWooReady" class="dtgs-create-note" style="display:none;">
                                    {{ environment.translate('WooCommerce Product Table will be created immediately after you click Create. You will configure columns, products, and catalog settings on the next screen.') }}
                                </div>
                            </div>
                        </div>
                    </form>
                    <div id="formError" style="color: red; display: none; float: left;">
                        <p></p>
                    </div>
                </div>
                <!-- /#dtgAddDialog -->

            </div>
            <!-- /.supsystic-container -->
            <div class="supsystic-footer-wrapper">
              <div class="supsystic-footer-add-review">Add your <a target="_blank" href="http://wordpress.org/support/view/plugin-reviews/data-tables-generator-by-supsystic?filter=5#postform">★★★★★</a> on wordpress.org</div>
              <a href="https://supsystic.com/" target="_blank"><img src="{{DTGS_PLUGIN_URL}}/src/SupsysticTables/Overview/assets/img/supsystic-logo-small.png"></a>
              <div class="supsystic-footer-plugin-version">Data Tables by Supsystic Version: {{' '}} {{DTGS_PLUGIN_VERSION}}</div>
            </div>
        </section>
        <!-- /.supsystic-content -->
    </div>
    <!-- /.supsystic-plugin -->
{% endblock layout %}