{% 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 -->

                {% if DTGS_AC_SHOW == true %}
                <div class="supsysticOverviewACFormOverlay">
                    <form method="post" id="overview-ac-form" class="supsysticOverviewACForm">
                      <div class="supsysticOverviewACTitle">
                        <div class="supsysticOverviewACClose"><i class="fa fa-times" aria-hidden="true"></i></div>
                        <a href="https://supsystic.com/" target="_blank"><img src="{{ DTGS_PLUGIN_URL }}/src/SupsysticTables/Overview/assets/img/supsystic-logo-small.png"></a><br>
                        <b>PRO plugins</b> and <b>amazing gifts</b>!
                      </div>
                      <label>Name *</label>
                      <input type="text" name="username" value="{{ DTGS_USER_NAME }}">
                      <label>Email *</label>
                      <input type="text" name="email" value="{{ DTGS_USER_EMAIL }}">

                      <div class="supsysticOverviewACFormRadioWrapper">
                        <input type="radio" id="expertiseWebmaster" name="expertise" value="beginner">
                        <label for="expertiseWebmaster">Webmaster <span>(if you manage one or a few websites for yourself or your employer)</span></label>
                      </div>
                      <div class="supsysticOverviewACFormRadioWrapper">
                        <input type="radio" id="expertiseDeveloper" name="expertise" value="developer">
                        <label for="expertiseDeveloper">Developer <span>(if you a Professional Developer and build WP sites for multiple customers)</span></label>
                      </div>

                      <div class="supsysticOverviewACFormNotification"><input required style="width:10px; margin-top:2px;"type="checkbox" id="supsysticOverviewACTermsCheckbox" name="supsysticOverviewACTermsCheckbox" value=""><label for="supsysticOverviewACTermsCheckbox">I Accept the <a href="#terms" class="supsysticOverviewACTerms">Terms and Conditions</a> *</label></div>
                      <input type="hidden" name="_wpnonce" value="{{ _wpnonce }}">
                      <button id="subscribe-btn" type="submit" class="button button-primary button-hero">
                          <i class="fa fa-check-square" aria-hidden="true"></i>
                          Subscribe
                      </button>
                      <div class="button button-primary button-hero supsysticOverviewACBtn supsysticOverviewACBtnRemind"><i class="fa fa-hourglass-half" aria-hidden="true"></i> Remind me tomorrow</div>
                      <div class="button button-primary button-hero supsysticOverviewACBtn supsysticOverviewACBtnDisable"><i class="fa fa-times" aria-hidden="true"></i> Do not disturb me again</div>
                      <div class="supsysticOverviewACFormNotification" style="color: red; float: left;" hidden>Fields with * are required to fill</div>
                    </form>
                    <div class="clear"></div>
                    <div class="supsysticOverviewACFormOverlayTerms">
                        <div class="supsysticOverviewACFormOverlayTermsClose"><i class="fa fa-times" aria-hidden="true"></i> Close</div>
                        <p><span >This Contact Form License Agreement (&quot;Agreement&quot;) is entered into by and between Supsystic Pty LTD, a company registered under the laws of Australia, hereinafter referred to as &quot;Licensor,&quot; and the user of the contact form, hereinafter referred to as &quot;Licensee.&quot;</span></p>
                        <p><span ><strong >1. Grant of License</strong></span></p>
                        <p><span >Subject to the terms and conditions of this Agreement, Licensor hereby grants Licensee a non-exclusive, non-transferable, and revocable license to use the contact form provided by Licensor for collecting the following data: email, name, site domain and plugin name fields data (&quot;Data&quot;).</span></p>
                        <p><span ><strong >2. Restrictions</strong></span></p>
                        <p><span >Licensee agrees to use the contact form for lawful and legitimate purposes only and shall not:</span></p>
                        <p><span >a. Use the contact form for any illegal or unauthorized purpose. b. Distribute or share the collected data without the consent of the data subjects. c. Modify, adapt, or reverse engineer the contact form or any of its components. d. Sell, sublicense, or distribute the contact form to third parties.</span></p>
                        <p><span ><strong >3. Data Privacy</strong></span></p>
                        <p><span >Licensor shall take reasonable measures to protect the collected data and shall not share, sell, or disclose the data to third parties without the explicit consent of Licensee.</span></p>
                        <p><span ><strong >4. Support and Updates</strong></span></p>
                        <p><span >Licensor may, at its discretion, provide support and updates for the contact form. Licensee is not entitled to automatic updates or support unless specified otherwise.</span></p>
                        <p><span ><strong >5. Termination</strong></span></p>
                        <p><span >This Agreement may be terminated by either party for any reason with written notice to the other party. Upon termination, Licensee shall cease using the contact form and remove it from their website.</span></p>
                        <p><span ><strong >6. Intellectual Property</strong></span></p>
                        <p><span >Licensor retains all rights, title, and interest in and to the contact form, including all related intellectual property rights.</span></p>
                        <p><span ><strong >7. Disclaimer of Warranty</strong></span></p>
                        <p><span >The contact form is provided &quot;as is&quot; without any warranty of any kind. Licensor disclaims all warranties, either express or implied, including, but not limited to, the implied warranties of merchantability and fitness for a particular purpose.</span></p>
                        <p><span ><strong >8. Limitation of Liability</strong></span></p>
                        <p><span >Licensor shall not be liable for any indirect, incidental, special, or consequential damages arising out of the use or inability to use the contact form.</span></p>
                        <p><span ><strong >9. Entire Agreement</strong></span></p>
                        <p><span >This Agreement constitutes the entire agreement between the parties concerning the subject matter hereof and supersedes all prior or contemporaneous agreements, understandings, and discussions.</span></p>
                        <p><span ><strong >10. Contact Information</strong></span></p>
                        <p><span >If you have any questions or concerns about this Agreement, please contact Supsystic Pty LTD at support@supsystic.com.</span></p>
                        <p><span ><strong >11. Acceptance</strong></span></p>
                        <p><span >By using the contact form, Licensee agrees to be bound by the terms and conditions of this Agreement.</span></p>
                    </div>
                </div>
                <div id="supsysticOverviewACFormDialog" hidden>
                      <div class="on-error" style="display:none">
                          <p>{{ translate('Some errors occurred while sending mail please send your message trough this contact form:') }}</p>
                          <p><a href="https://supsystic.com/plugins/photo-gallery/#contact" target="_blank">https://supsystic.com/plugins/photo-gallery/#contact</a></p>
                      </div>
                      <div class="message"></div>
                </div>
                {% endif %}

            </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 %}