{% extends 'base.html' %}
{% block content %}
{% from '_helpers.jinja' import render_field %}
{% from '_common_fields.jinja' import render_notifications_field %}
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>

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

    <div class="tabs">
        <ul>
            <li class="tab" id="default-tab"><a href="#general">General</a></li>
            <li class="tab"><a href="#notifications">Notifications</a></li>
            <li class="tab"><a href="#filters">Filters</a></li>
            <li class="tab"><a href="#triggers">Triggers</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">

            <div class="tab-pane-inner" id="general">
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.url, placeholder="https://...", required=true, class="m-d") }}
                    </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.minutes_between_check) }}
                        {% if using_default_minutes %}
                        <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>
                    <fieldset class="pure-group">
                        {{ render_field(form.headers, rows=5, placeholder="Example
Cookie: foobar
User-Agent: wonderbra 1.0") }}
                        <span class="pure-form-message-inline">
                            Note: ONLY used by Basic fast Plaintext/HTTP Client
                          </span>
                    </fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.fetch_backend) }}
                        <span class="pure-form-message-inline">
                            <p>Use the <strong>Basic</strong> method (default) where your watched sites don't need Javascript to render.</p>
                            <p>The <strong>Chrome/Javascript</strong> method requires a network connection to a running WebDriver+Chrome server. </p>
                        </span>
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.extract_title_as_title) }}
                    </div>
                </fieldset>
            </div>

            <div class="tab-pane-inner" id="notifications">
                <strong>Note: <i>These settings override the global settings.</i></strong>
                {{ render_notifications_field(form) }}
            </div>

            <div class="tab-pane-inner" id="filters">
                <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 <b>"json:"</b>, <a
                                href="https://jsonpath.com/" target="new">test your JSONPath here</a></li>
                    </ul>
                    Please be sure that you thoroughly understand how to write CSS or JSONPath 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>

                </fieldset>
                <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">
                    Each line processed separately, any line matching will be ignored.<br/>
                    Regular Expression support, wrap the line in forward slash <b>/regex/</b>.
                </span>

            </fieldset>
            </div>

            <div class="tab-pane-inner" id="triggers">
                <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
                    ") }}</br>
                        <span class="pure-form-message-inline">Text to wait for before triggering a change/notification, all text and regex are tested <i>case-insensitive</i>.</span><br/>
                        <span class="pure-form-message-inline">Trigger text is processed from the result-text that comes out of any <a href="#filters">CSS/JSON Filters</a> for this watch</span>.<br/>
                        <span class="pure-form-message-inline">Each line is process separately (think of each line as "OR")</span><br/>
                        <span class="pure-form-message-inline">Note: Wrap in forward slash / to use regex  example: <span style="font-family: monospace; background: #eee">/foo\d/</span> </span>
                    </div>
                </fieldset>
            </div>
            <div id="actions">
                <div class="pure-control-group">

                    <button type="submit" class="pure-button pure-button-primary">Save</button>
                    <a href="{{url_for('api_delete', uuid=uuid)}}"
                       class="pure-button button-small button-error ">Delete</a>
                    <a href="{{url_for('api_clone', uuid=uuid)}}"
                       class="pure-button button-small ">Create Copy</a>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}