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

{% macro show_token_placeholders(extra_notification_token_placeholder_info, suffix="") %}


    <div class="pure-controls">
            <span class="pure-form-message-inline">
        {{ _('Body for all notifications — You can use') }} <a target="newwindow" href="https://jinja.palletsprojects.com/en/3.0.x/templates/">Jinja2</a> {{ _('templating in the notification title, body and URL, and tokens from below.') }}
    </span><br>
        <div data-target="#notification-tokens-info{{ suffix }}" class="toggle-show pure-button button-tag button-xsmall">{{ _('Show token/placeholders') }}
        </div>
    </div>
    <div class="pure-controls" style="display: none;" id="notification-tokens-info{{ suffix }}">
        <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 page title of the watch, uses <title> if not set, falls back to URL') }}</td>
            </tr>
            <tr>
                <td><code>{{ '{{watch_tag}}' }}</code></td>
                <td>{{ _('The watch group / 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_clean}}' }}</code></td>
                <td>{{ _('The diff output - only changes, additions, and removals —') }} <i>{{ _('Without (added) prefix or colors') }}</i>
                </td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_added}}' }}</code></td>
                <td>{{ _('The diff output - only changes and additions') }}</td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_added_clean}}' }}</code></td>
                <td>{{ _('The diff output - only changes and additions —') }} <i>{{ _('Without (added) prefix or colors') }}</i></td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_removed}}' }}</code></td>
                <td>{{ _('The diff output - only changes and removals') }}</td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_removed_clean}}' }}</code></td>
                <td>{{ _('The diff output - only changes and removals —') }} <i>{{ _('Without (added) prefix or colors') }}</i></td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_full}}' }}</code></td>
                <td>{{ _('The diff output - full difference output') }}</td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_full_clean}}' }}</code></td>
                <td>{{ _('The diff output - full difference output —') }} <i>{{ _('Without (added) prefix or colors') }}</i></td>
            </tr>
            <tr>
                <td><code>{{ '{{diff_patch}}' }}</code></td>
                <td>{{ _('The diff output - patch in unified format') }}</td>
            </tr>
            <tr>
                <td><code>{{ '{{current_snapshot}}' }}</code></td>
                <td>{{ _('The current snapshot text contents value, useful when combined with JSON or CSS filters') }}
                </td>
            </tr>
            <tr>
                <td><code>{{ '{{triggered_text}}' }}</code></td>
                <td>{{ _('Text that tripped the trigger from filters') }}</td>

                {% if extra_notification_token_placeholder_info %}
                    {% for token in extra_notification_token_placeholder_info %}
                        <tr>
                            <td><code>{{ '{{' }}{{ token[0] }}{{ '}}' }}</code></td>
                            <td>{{ token[1] }}</td>
                        </tr>
                    {% endfor %}
                {% endif %}
            </tbody>
        </table>

        <span class="pure-form-message-inline">
        {{ _('Warning: Contents of') }} <code>{{ '{{diff}}' }}</code>, <code>{{ '{{diff_removed}}' }}</code>, {{ _('and') }} <code>{{ '{{diff_added}}' }}</code> {{ _('depend on how the difference algorithm perceives the change.') }} <br>
        {{ _('For example, an addition or removal could be perceived as a change in some cases.') }} <a target="newwindow" href="https://github.com/dgtlmoon/changedetection.io/wiki/Using-the-%7B%7Bdiff%7D%7D,-%7B%7Bdiff_added%7D%7D,-and-%7B%7Bdiff_removed%7D%7D-notification-tokens">{{ _('More Here') }}</a> <br>
        </span>
    </div>
{%  endmacro %}

{% macro render_common_settings_form(form, emailprefix, settings_application, extra_notification_token_placeholder_info) %}
                        <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">
                                <p>
                                <strong>{{ _('Tip:') }}</strong> {{ _('Use') }} <a target="newwindow" href="https://github.com/caronc/apprise">{{ _('AppRise Notification URLs') }}</a> {{ _('for notification to just about any service!') }} <i><a target="newwindow" href="https://github.com/dgtlmoon/changedetection.io/wiki/Notification-configuration-notes">{{ _('Please read the notification services wiki here for important configuration notes') }}</a></i>.<br>
</p>
                                <div data-target="#advanced-help-notifications" class="toggle-show pure-button button-tag button-xsmall">{{ _('Show advanced help and tips') }}</div>
                                <ul style="display: none" id="advanced-help-notifications">
                                <li><code><a target="newwindow" href="https://github.com/caronc/apprise/wiki/Notify_discord">discord://</a></code> {{ _('(or') }} <code>https://discord.com/api/webhooks...</code>)) {{ _('only supports a maximum') }} <strong>{{ _('2,000 characters') }}</strong> {{ _('of notification text, including the title.') }}</li>
                                <li><code><a target="newwindow" href="https://github.com/caronc/apprise/wiki/Notify_telegram">tgram://</a></code> {{ _('bots can\'t send messages to other bots, so you should specify chat ID of non-bot user.') }}</li>
                                <li><code><a target="newwindow" href="https://github.com/caronc/apprise/wiki/Notify_telegram">tgram://</a></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>) <a href="https://github.com/dgtlmoon/changedetection.io/wiki/Notification-configuration-notes#postposts">{{ _('more help here') }}</a></li>
                                  <li>{{ _('Accepts the') }} <code>{{ '{{token}}' }}</code> {{ _('placeholders listed below') }}</li>
                              </ul>
                            </div>
                            <div class="notifications-wrapper">
                              <a id="send-test-notification" class="pure-button button-secondary button-xsmall" >{{ _('Send test notification') }}</a> <div class="spinner"  style="display: none;"></div>
                            {% if emailprefix %}
                              <a id="add-email-helper" class="pure-button button-secondary button-xsmall" >{{ _('Add email') }} <img style="height: 1em; display: inline-block" src="{{url_for('static_content', group='images', filename='email.svg')}}" alt="{{ _('Add an email address') }}"> </a>
                            {% endif %}
                              <a href="{{url_for('settings.notification_logs')}}" class="pure-button button-secondary button-xsmall" >{{ _('Notification debug logs') }}</a>
                              <br>
                                <div id="notification-test-log" style="display: none;"><span class="pure-form-message-inline">{{ _('Processing..') }}</span></div>
                            </div>
                        </div>

                        <div class="pure-control-group grey-form-border">
                            <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']) }}
                                {{ show_token_placeholders(extra_notification_token_placeholder_info=extra_notification_token_placeholder_info) }}
                                <div class="pure-form-message-inline">
                                    <ul>
                                    <li><span class="pure-form-message-inline">
                                        {{ _('For JSON payloads, use') }} <strong>|tojson</strong> {{ _('without quotes for automatic escaping, for example -') }} <code>{ "name": {{ '{{ watch_title|tojson }}' }} }</code>
                                    </span></li>
                                    <li><span class="pure-form-message-inline">
                                        {{ _('URL encoding, use') }} <strong>|urlencode</strong>, {{ _('for example -') }} <code>gets://hook-website.com/test.php?title={{ '{{ watch_title|urlencode }}' }}</code>
                                    </span></li>
                                    <li><span class="pure-form-message-inline">
                                        {{ _('Regular-expression replace, use') }} <strong>|regex_replace</strong>, {{ _('for example -') }}   <code>{{ "{{ \"hello world 123\" | regex_replace('[0-9]+', 'no-more-numbers') }}" }}</code>
                                    </span></li>
                                    <li><span class="pure-form-message-inline">
                                        {{ _('For a complete reference of all Jinja2 built-in filters, users can refer to the') }} <a href="https://jinja.palletsprojects.com/en/3.1.x/templates/#builtin-filters">https://jinja.palletsprojects.com/en/3.1.x/templates/#builtin-filters</a>
                                    </span></li>
                                    </ul>
                                    <br>
                                </div>
                            </div>
                            <div class="">
                                {{ render_field(form.notification_format , class="notification-format") }}
                                <span class="pure-form-message-inline">{{ _('Format for all notifications') }}</span>
                            </div>
                        </div>
{% endmacro %}