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

{% macro render_common_settings_form(form, emailprefix, settings_application) %}
                        <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",
    class="notification-urls" )
                            }}
                            <div class="pure-form-message-inline">
                              <ul>
                                <li>Use <a target=_new href="https://github.com/caronc/apprise">AppRise URLs</a> for notification to just about any service! <i><a target=_new href="https://github.com/dgtlmoon/changedetection.io/wiki/Notification-configuration-notes">Please read the notification services wiki here for important configuration notes</a></i>.</li>
                                <li><code>discord://</code> only supports a maximum <strong>2,000 characters</strong> of notification text, including the title.</li>
                                <li><code>tgram://</code> bots cant send messages to other bots, so you should specify chat ID of non-bot user.</li>
                                <li><code>tgram://</code> only supports very limited HTML and can fail when extra tags are sent, <a href="https://core.telegram.org/bots/api#html-style">read more here</a> (or use plaintext/markdown format)</li>
                                <li><code>gets://</code>, <code>posts://</code>, <code>puts://</code>, <code>deletes://</code> for direct API calls (or omit the "<code>s</code>" for non-SSL ie <code>get://</code>)</li>
                              </ul>
                            </div>
                            <div class="notifications-wrapper">
                              <a id="send-test-notification" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Send test notification</a>
                            {% if emailprefix %}
                              <a id="add-email-helper" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Add email</a>
                            {% endif %}
                              <a href="{{url_for('notification_logs')}}" class="pure-button button-secondary button-xsmall" style="font-size: 70%">Notification debug logs</a>
                            </div>
                        </div>
                        <div id="notification-customisation" class="pure-control-group">
                            <div class="pure-control-group">
                                {{ render_field(form.notification_title, class="m-d notification-title", placeholder=settings_application['notification_title']) }}
                                <span class="pure-form-message-inline">Title for all notifications</span>
                            </div>
                            <div class="pure-control-group">
                                {{ render_field(form.notification_body , rows=5, class="notification-body", placeholder=settings_application['notification_body']) }}
                                <span class="pure-form-message-inline">Body for all notifications</span>
                            </div>
                            <div class="pure-control-group">
                            <!-- unsure -->
                                {{ render_field(form.notification_format , class="notification-format") }}
                                <span class="pure-form-message-inline">Format for all notifications</span>
                            </div>
                            <div class="pure-controls">
                            <p class="pure-form-message-inline">
                                You can use <a target="_new" href="https://jinja.palletsprojects.com/en/3.0.x/templates/">Jinja2</a> templating in the notification title, body and URL.
                            </p>

                                <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 watch label / tag</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 output for the watch.</td>
                                    </tr>
									<tr>
                                        <td><code>{{ '{{diff}}' }}</code></td>
                                        <td>The diff output - only changes, additions, and removals</td>
                                    </tr>
									<tr>
                                        <td><code>{{ '{{diff_added}}' }}</code></td>
                                        <td>The diff output - only changes and additions</td>
                                    </tr>
									<tr>
                                        <td><code>{{ '{{diff_removed}}' }}</code></td>
                                        <td>The diff output - only changes and removals</td>
                                    </tr>
                                    <tr>
                                        <td><code>{{ '{{diff_full}}' }}</code></td>
                                        <td>The diff output - full difference output</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>
                                <div class="pure-form-message-inline">
                                    <br>
                                    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 "{{settings_application['current_base_url']}}"
									<br>
									Warning: Contents of <code>{{ '{{diff}}' }}</code>, <code>{{ '{{diff_removed}}' }}</code>, and <code>{{ '{{diff_added}}' }}</code> depend on how the difference algorithm perceives the change. For example, an addition or removal could be perceived as a change in some cases. <a target="_new" href="https://github.com/dgtlmoon/changedetection.io/wiki/Using-the-%7B%7Bdiff%7D%7D,-%7B%7Bdiff_added%7D%7D,-and-%7B%7Bdiff_removal%7D%7D-notification-tokens">More Here</a> </br>
                                </div>
                            </div>
                        </div>
{% endmacro %}