{% extends 'base.html' %}
{% block content %}
{% from '_helpers.jinja' import render_field, render_checkbox_field, render_button %}
{% from '_common_fields.jinja' import render_common_settings_form %}
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>
<script>
    const notification_base_url="{{url_for('ajax_callback_send_notification_test')}}";
    const watch_visual_selector_data_url="{{url_for('static_content', group='visual_selector_data', filename=uuid)}}";
    const screenshot_url="{{url_for('static_content', group='screenshot', filename=uuid)}}";
    const playwright_enabled={% if playwright_enabled %} true {% else %} false {% endif %};

{% if emailprefix %}
    const email_notification_prefix=JSON.parse('{{ emailprefix|tojson }}');
{% endif %}

</script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='watch-settings.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='notifications.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='visual-selector.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='limit.js')}}" defer></script>

<div class="edit-form monospaced-textarea">

    <div class="tabs collapsable">
        <ul>
            <li class="tab" id="default-tab"><a href="#general">General</a></li>
            <li class="tab"><a href="#request">Request</a></li>
            <li class="tab"><a id="visualselector-tab" href="#visualselector">Visual Filter Selector</a></li>
            <li class="tab"><a href="#filters-and-triggers">Filters &amp; Triggers</a></li>
            <li class="tab"><a href="#notifications">Notifications</a></li>
        </ul>
    </div>

    <div class="box-wrap inner">
        <form class="pure-form pure-form-stacked"
              action="{{ url_for('edit_page', uuid=uuid, next = request.args.get('next') ) }}" method="POST">
             <input type="hidden" name="csrf_token" value="{{ csrf_token() }}"/>

            <div class="tab-pane-inner" id="general">
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.url, placeholder="https://...", required=true, class="m-d") }}
                        <span class="pure-form-message-inline">Some sites use JavaScript to create the content, for this you should <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Fetching-pages-with-WebDriver">use the Chrome/WebDriver Fetcher</a></span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.title, class="m-d") }}
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.tag) }}
                        <span class="pure-form-message-inline">Organisational tag/group name used in the main listing page</span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.time_between_check, class="time-check-widget") }}
                        {% if has_empty_checktime %}
                        <span class="pure-form-message-inline">Currently using the <a
                                href="{{ url_for('settings_page', uuid=uuid) }}">default global settings</a>, change to another value if you want to be specific.</span>
                        {% else %}
                        <span class="pure-form-message-inline">Set to blank to use the <a
                                href="{{ url_for('settings_page', uuid=uuid) }}">default global settings</a>.</span>
                        {% endif %}
                    </div>
                    <div class="pure-control-group">
                        {{ render_checkbox_field(form.extract_title_as_title) }}
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner" id="request">
                    <div class="pure-control-group inline-radio">
                        {{ render_field(form.fetch_backend, class="fetch-backend") }}
                        <span class="pure-form-message-inline">
                            <p>Use the <strong>Basic</strong> method (default) where your watched site doesn't need Javascript to render.</p>
                            <p>The <strong>Chrome/Javascript</strong> method requires a network connection to a running WebDriver+Chrome server, set by the ENV var 'WEBDRIVER_URL'. </p>
                        </span>
                    </div>
                {% if form.proxy %}
                    <div class="pure-control-group inline-radio">
                        {{ render_field(form.proxy, class="fetch-backend-proxy") }}
                        <span class="pure-form-message-inline">
                        Choose a proxy for this watch
                        </span>
                    </div>
                {% endif %}
                <fieldset id="webdriver-override-options">
                    <div class="pure-control-group">
                        {{ render_field(form.webdriver_delay) }}
                        <div class="pure-form-message-inline">
                            <strong>If you're having trouble waiting for the page to be fully rendered (text missing etc), try increasing the 'wait' time here.</strong>
                            <br/>
                            This will wait <i>n</i> seconds before extracting the text.
                            {% if using_global_webdriver_wait %}
                            <br/><strong>Using the current global default settings</strong>
                            {% endif %}
                        </div>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.webdriver_js_execute_code) }}
                        <div class="pure-form-message-inline">
                            Run this code before performing change detection, handy for filling in fields and other actions <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Run-JavaScript-before-change-detection">More help and examples here</a>
                        </div>
                    </div>
                </fieldset>
                <fieldset class="pure-group" id="requests-override-options">
                    {% if not playwright_enabled %}
                        <div class="pure-form-message-inline">
                            <strong>Request override is currently only used by the <i>Basic fast Plaintext/HTTP Client</i> method.</strong>
                        </div>
                    {% endif %}
                    <div class="pure-control-group" id="request-method">
                        {{ render_field(form.method) }}
                    </div>
                    <div class="pure-control-group" id="request-headers">
{{ render_field(form.headers, rows=5, placeholder="Example
Cookie: foobar
User-Agent: wonderbra 1.0") }}
                    </div>
                    <div class="pure-control-group" id="request-body">
                                        {{ render_field(form.body, rows=5, placeholder="Example
{
   \"name\":\"John\",
   \"age\":30,
   \"car\":null
}") }}
                    </div>
                    <div id="ignore-status-codes-option">
                        {{ render_checkbox_field(form.ignore_status_codes) }}
                    </div>
                </fieldset>
                <br/>
            </div>

            <div class="tab-pane-inner" id="notifications">
                <strong>Note: <i>These settings override the global settings for this watch.</i></strong>
                <fieldset>
                    <div class="field-group">
                        {{ render_common_settings_form(form, current_base_url, emailprefix) }}
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner" id="filters-and-triggers">
                    <div class="pure-control-group">
                            <strong>Pro-tips:</strong><br/>
                            <ul>
                                <li>
                                    Use the preview page to see your filters and triggers highlighted.
                                </li>
                                <li>
                                    Some sites use JavaScript to create the content, for this you should <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Fetching-pages-with-WebDriver">use the Chrome/WebDriver Fetcher</a>
                                </li>
                            </ul>
                    </div>
                    <fieldset>
                        <div class="pure-control-group">
                            {{ render_checkbox_field(form.check_unique_lines) }}
                            <span class="pure-form-message-inline">Good for websites that just move the content around, and you want to know when NEW content is added, compares new lines against all history for this watch.</span>
                        </div>
                    </fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.css_filter, placeholder=".class-name or #some-id, or other CSS selector rule.",
                        class="m-d") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>CSS - Limit text to this CSS rule, only text matching this CSS rule is included.</li>
                        <li>JSON - Limit text to this JSON rule, using <a href="https://pypi.org/project/jsonpath-ng/">JSONPath</a>, prefix with <code>"json:"</code>, use <code>json:$</code> to force re-formatting if required,  <a
                                href="https://jsonpath.com/" target="new">test your JSONPath here</a></li>
                        <li>XPath - Limit text to this XPath rule, simply start with a forward-slash, example  <code>//*[contains(@class, 'sametext')]</code> or <code>xpath://*[contains(@class, 'sametext')]</code>, <a
                                href="http://xpather.com/" target="new">test your XPath here</a></li>
                    </ul>
                    Please be sure that you thoroughly understand how to write CSS or JSONPath, XPath selector rules before filing an issue on GitHub! <a
                                href="https://github.com/dgtlmoon/changedetection.io/wiki/CSS-Selector-help">here for more CSS selector help</a>.<br/>
                </span>
                    </div>
                    <div class="pure-control-group">
                      {{ render_field(form.subtractive_selectors, rows=5, placeholder="header
footer
nav
.stockticker") }}
                      <span class="pure-form-message-inline">
                        <ul>
                          <li> Remove HTML element(s) by CSS selector before text conversion. </li>
                          <li> Add multiple elements or CSS selectors per line to ignore multiple parts of the HTML. </li>
                        </ul>
                      </span>
                    </div>
                <fieldset class="pure-group">
                    {{ render_field(form.ignore_text, rows=5, placeholder="Some text to ignore in a line
/some.regex\d{2}/ for case-INsensitive regex
                    ") }}
                    <span class="pure-form-message-inline">
                        <ul>
                            <li>Each line processed separately, any line matching will be ignored (removed before creating the checksum)</li>
                            <li>Regular Expression support, wrap the line in forward slash <code>/regex/</code></li>
                            <li>Changing this will affect the comparison checksum which may trigger an alert</li>
                            <li>Use the preview/show current tab to see ignores</li>
                        </ul>
                </span>

            </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.trigger_text, rows=5, placeholder="Some text to wait for in a line
/some.regex\d{2}/ for case-INsensitive regex
                    ") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>Text to wait for before triggering a change/notification, all text and regex are tested <i>case-insensitive</i>.</li>
                        <li>Trigger text is processed from the result-text that comes out of any CSS/JSON Filters for this watch</li>
                        <li>Each line is processed separately (think of each line as "OR")</li>
                        <li>Note: Wrap in forward slash / to use regex  example: <code>/foo\d/</code></li>
                    </ul>
                        </span>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.text_should_not_be_present, rows=5, placeholder="For example: Out of stock
Sold out
Not in stock
Unavailable") }}
                        <span class="pure-form-message-inline">
                            <ul>
                                <li>Block change-detection while this text is on the page, all text and regex are tested <i>case-insensitive</i>, good for waiting for when a product is available again</li>
                                <li>Block text is processed from the result-text that comes out of any CSS/JSON Filters for this watch</li>
                                <li>All lines here must not exist (think of each line as "OR")</li>
                                <li>Note: Wrap in forward slash / to use regex  example: <code>/foo\d/</code></li>
                            </ul>
                        </span>
                    </div>
                </fieldset>
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.extract_text, rows=5, placeholder="\d+ online") }}
                        <span class="pure-form-message-inline">
                    <ul>
                        <li>Extracts text in the final output after other filters using regular expressions, for example <code>\d+ online</code></li>
                        <li>One line per regular-expression.</li>
                    </ul>
                        </span>
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner visual-selector-ui" id="visualselector">
                <img id="beta-logo" src="{{url_for('static_content', group='images', filename='beta-logo.png')}}">
                <strong>Pro-tip:</strong> This tool is only for limiting which elements will be included on a change-detection, not for interacting with browser directly.
                <fieldset>
                    <div class="pure-control-group">
                        {% if visualselector_enabled %}
                            {% if visualselector_data_is_ready %}
                                <div id="selector-header">
                                    <a id="clear-selector" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Clear selection</a>
                                    <i class="fetching-update-notice" style="font-size: 80%;">One moment, fetching screenshot and element information..</i>
                                </div>
                                <div id="selector-wrapper">
                                    <!-- request the screenshot and get the element offset info ready -->
                                    <!-- use img src ready load to know everything is ready to map out -->
                                    <!-- @todo: maybe something interesting like a field to select 'elements that contain text... and their parents n' -->
                                    <img id="selector-background" />
                                    <canvas id="selector-canvas"></canvas>

                                </div>
                                <div id="selector-current-xpath" style="overflow-x: hidden"><strong>Currently:</strong>&nbsp;<span class="text">Loading...</span></div>

                            <span class="pure-form-message-inline">
                                <p><span style="font-weight: bold">Beta!</span> The Visual Selector is new and there may be minor bugs, please report pages that dont work, help us to improve this software!</p>
                            </span>

                            {% else %}
                                <span class="pure-form-message-inline">Screenshot and element data is not available or not yet ready.</span>
                            {% endif %}
                        {% else %}
                            <span class="pure-form-message-inline">
                                <p>Sorry, this functionality only works with Playwright/Chrome enabled watches.</p>
                                <p>Enable the Playwright Chrome fetcher, or alternatively try our <a href="https://lemonade.changedetection.io/start">very affordable subscription based service</a>.</p>
                                <p>This is because Selenium/WebDriver can not extract full page screenshots reliably.</p>

                            </span>
                        {% endif %}
                    </div>
                </fieldset>
            </div>

            <div id="actions">
                <div class="pure-control-group">

                      {{ render_button(form.save_button) }} {{ render_button(form.save_and_preview_button) }}

                    <a href="{{url_for('form_delete', uuid=uuid)}}"
                       class="pure-button button-small button-error ">Delete</a>
                    <a href="{{url_for('clear_watch_history', uuid=uuid)}}"
                       class="pure-button button-small button-error ">Clear History</a>
                    <a href="{{url_for('form_clone', uuid=uuid)}}"
                       class="pure-button button-small ">Create Copy</a>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}