{% extends "base.html" %}
{% block title %}
    | Whitelist
{% endblock title %}
{% block content %}
    <div class="row g-3 filter-page">
        <div class="col-lg-5">
            <section class="card border border-dark shadow-sm text-light rounded-0 filter-page__sidebar">
                <div class="card-body p-3 p-md-4">
                    <div class="mb-4">
                        <h2 class="h4 mb-2">Whitelist Rules</h2>
                        <p class="text-muted mb-3">
                            Shape what is allowed through, and use the live pane to see which entries are the only ones that will still be sent.
                        </p>
                        <div class="p-3 border border-dark rounded-0 small text-muted">
                            <p class="mb-2">Whitelist rules are restrictive. If any whitelist rule exists, entries must match it to be sent.</p>
                            <p class="mb-2">
                                Plain text matching is case-insensitive and partial, so <code>orld</code> matches <code>World of Warcraft</code>.
                            </p>
                            <p class="mb-2">When an entry matches both lists, whitelist still wins and the preview shows it as sent.</p>
                            <p class="mb-0">Saved blacklist rules remain active while you preview whitelist edits.</p>
                        </div>
                    </div>
                    <form action="/whitelist"
                          method="post"
                          class="row g-3"
                          hx-get="/whitelist_preview"
                          hx-target="#filter-preview"
                          hx-swap="innerHTML"
                          hx-trigger="input delay:400ms, change delay:200ms">
                        <input type="hidden" name="feed_url" value="{{ feed.url }}" />
                        <div class="col-12">
                            <h3 class="h6 text-uppercase text-muted mb-3">Word Rules</h3>
                            <div class="p-3 border border-dark rounded-0 form-text mb-3">
                                <p class="mb-2">Comma separated terms or snippets. Spaces around commas are ignored.</p>
                                <p class="mb-0">
                                    Example:
                                    <code>primogem,events,orld,special program</code>
                                </p>
                            </div>
                            <label for="whitelist_title" class="form-label">Allow if title contains</label>
                            <input name="whitelist_title"
                                   type="text"
                                   class="form-control bg-dark border-dark text-muted"
                                   id="whitelist_title"
                                   value="{{ whitelist_title }}" />
                        </div>
                        <div class="col-12">
                            <label for="whitelist_summary" class="form-label">Allow if summary contains</label>
                            <input name="whitelist_summary"
                                   type="text"
                                   class="form-control bg-dark border-dark text-muted"
                                   id="whitelist_summary"
                                   value="{{ whitelist_summary }}" />
                        </div>
                        <div class="col-12">
                            <label for="whitelist_content" class="form-label">Allow if content contains</label>
                            <input name="whitelist_content"
                                   type="text"
                                   class="form-control bg-dark border-dark text-muted"
                                   id="whitelist_content"
                                   value="{{ whitelist_content }}" />
                        </div>
                        <div class="col-12">
                            <label for="whitelist_author" class="form-label">Allow if author contains</label>
                            <input name="whitelist_author"
                                   type="text"
                                   class="form-control bg-dark border-dark text-muted"
                                   id="whitelist_author"
                                   value="{{ whitelist_author }}" />
                        </div>
                        <div class="col-12 pt-2">
                            <h3 class="h6 text-uppercase text-muted mb-3">Regex Rules</h3>
                            <div class="p-3 border border-dark rounded-0 form-text mb-3">
                                <p class="mb-2">One pattern per line. Matching is case-insensitive.</p>
                                <pre class="mb-0 filter-page__example">^New Release:.*
\b(update|version|patch)\s+\d+\.\d+
.*\[(important|notice)\].*</pre>
                            </div>
                            <label for="regex_whitelist_title" class="form-label">Allow if title matches regex</label>
                            <textarea name="regex_whitelist_title"
                                      class="form-control bg-dark border-dark text-muted"
                                      id="regex_whitelist_title"
                                      rows="3">{{ regex_whitelist_title }}</textarea>
                        </div>
                        <div class="col-12">
                            <label for="regex_whitelist_summary" class="form-label">Allow if summary matches regex</label>
                            <textarea name="regex_whitelist_summary"
                                      class="form-control bg-dark border-dark text-muted"
                                      id="regex_whitelist_summary"
                                      rows="3">{{ regex_whitelist_summary }}</textarea>
                        </div>
                        <div class="col-12">
                            <label for="regex_whitelist_content" class="form-label">Allow if content matches regex</label>
                            <textarea name="regex_whitelist_content"
                                      class="form-control bg-dark border-dark text-muted"
                                      id="regex_whitelist_content"
                                      rows="3">{{ regex_whitelist_content }}</textarea>
                        </div>
                        <div class="col-12">
                            <label for="regex_whitelist_author" class="form-label">Allow if author matches regex</label>
                            <textarea name="regex_whitelist_author"
                                      class="form-control bg-dark border-dark text-muted"
                                      id="regex_whitelist_author"
                                      rows="3">{{ regex_whitelist_author }}</textarea>
                        </div>
                        <div class="col-12 d-flex flex-wrap gap-2 pt-2">
                            <button class="btn btn-dark btn-sm" type="submit">Update whitelist</button>
                            <a class="btn btn-outline-light btn-sm"
                               href="/feed?feed_url={{ feed.url|encode_url }}">Back to feed</a>
                        </div>
                    </form>
                </div>
            </section>
        </div>
        <div class="col-lg-7">
            <section class="card border border-dark shadow-sm text-light rounded-0 h-100">
                <div class="card-body p-3 p-md-4">
                    <div id="filter-preview">{% include "_filter_preview.html" %}</div>
                </div>
            </section>
        </div>
    </div>
{% endblock content %}