{% extends 'base.html' %}

{% block content %}
{% from '_helpers.jinja' import render_field %}

<script type="text/javascript" src="{{url_for('static_content', group='js', filename='settings.js')}}" defer></script>
<script type="text/javascript" src="{{url_for('static_content', group='js', filename='tabs.js')}}" defer></script>

<div class="edit-form">
    <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="#fetching">Fetching</a></li>
        </ul>
    </div>
    <div class="box-wrap inner">
        <form class="pure-form pure-form-stacked settings" action="{{url_for('settings_page')}}" method="POST">
            <div class="tab-pane-inner" id="general">
                <fieldset>
                    <div class="pure-control-group">
                        {{ render_field(form.minutes_between_check) }}
                        <span class="pure-form-message-inline">Default time for all watches, when the watch does not have a specific time setting.</span>
                    </div>
                    <div class="pure-control-group">
                        {% if current_user.is_authenticated %}
                        <a href="{{url_for('settings_page', removepassword='yes')}}"
                           class="pure-button pure-button-primary">Remove password</a>
                        {% else %}
                        {{ render_field(form.password) }}
                        <span class="pure-form-message-inline">Password protection for your changedetection.io application.</span>
                        {% endif %}
                    </div>
                    <div class="pure-control-group">
                        {{ render_field(form.extract_title_as_title) }}
                        <span class="pure-form-message-inline">Note: This will automatically apply to all existing watches.</span>
                    </div>
                </fieldset>
            </div>
            <div class="tab-pane-inner" id="notifications">
                <fieldset>
                    <div class="field-group">
                        <div class="pure-control-group">
                            {{ render_field(form.notification_urls, rows=5, placeholder="Examples:
    Gitter - gitter://token/room
    Office365 - o365://TenantID:AccountEmail/ClientID/ClientSecret/TargetEmail
    AWS SNS - sns://AccessKeyID/AccessSecretKey/RegionName/+PhoneNo
    SMTPS - mailtos://user:pass@mail.domain.com?to=receivingAddress@example.com")
                            }}
                            <div class="pure-form-message-inline">Use <a target=_new
                                                                         href="https://github.com/caronc/apprise">AppRise
                                URLs</a> for notification to just about any service!
                            </div>
                        </div>
                        <div id="notification-customisation">
                            <div class="pure-control-group">
                                {{ render_field(form.notification_title, class="m-d") }}
                                <span class="pure-form-message-inline">Title for all notifications</span>
                            </div>
                            <div class="pure-control-group">
                                {{ render_field(form.notification_body , rows=5) }}
                                <span class="pure-form-message-inline">Body for all notifications</span>
                            </div>
                            <div class="pure-controls">
                            <span class="pure-form-message-inline">
                                These tokens can be used in the notification body and title to
                                customise the notification text.
                            </span>
                                <table class="pure-table" id="token-table">
                                    <thead>
                                    <tr>
                                        <th>Token</th>
                                        <th>Description</th>
                                    </tr>
                                    </thead>
                                    <tbody>
                                    <tr>
                                        <td><code>{base_url}</code></td>
                                        <td>The URL of the changedetection.io instance you are running.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{watch_url}</code></td>
                                        <td>The URL being watched.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{watch_uuid}</code></td>
                                        <td>The UUID of the watch.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{watch_title}</code></td>
                                        <td>The title of the watch.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{watch_tag}</code></td>
                                        <td>The tag of the watch.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{preview_url}</code></td>
                                        <td>The URL of the preview page generated by changedetection.io.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{diff_url}</code></td>
                                        <td>The URL of the diff page generated by changedetection.io.</td>
                                    </tr>
                                    <tr>
                                        <td><code>{current_snapshot}</code></td>
                                        <td>The current snapshot value, useful when combined with JSON or CSS filters
                                        </td>
                                    </tr>
                                    </tbody>
                                </table>
                                <span class="pure-form-message-inline">
                                URLs generated by changedetection.io (such as <code>{diff_url}</code>) require the <code>BASE_URL</code> environment variable set.<br/>
                                Your <code>BASE_URL</code> var is currently "{{base_url}}"
                            </span>
                            </div>
                        </div>
                        <div class="pure-control-group">
                            {{ render_field(form.trigger_check) }}
                        </div>
                    </div>

                </fieldset>
            </div>
            <div class="tab-pane-inner" id="fetching">
                <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>
            <div id="actions">
                <div class="pure-control-group">
                    <button type="submit" class="pure-button pure-button-primary">Save</button>
                                           <a href="{{url_for('index')}}" class="pure-button button-small button-cancel">Back</a>
                        <a href="{{url_for('scrub_page')}}" class="pure-button button-small button-cancel">Delete
                            History
                            Snapshot Data</a>
                </div>
            </div>
        </form>
    </div>
</div>

{% endblock %}