{% extends 'silk/base/base.html' %}
{% load silk_assets %}
{% load silk_filters %}

{% block pagetitle %}Silky - Settings{% endblock %}

{% block js %}
    <script src="{% silk_asset 'silk/js/pages/settings.js' %}" defer></script>
{% endblock %}

{% block data %}
<div class="settings">
    <nav class="settings__nav" aria-label="Settings sections">
        <a href="#sec-editor">Editor</a>
        <a href="#sec-thresholds">Thresholds</a>
        <a href="#sec-appearance">Appearance</a>
        <a href="#sec-recording">Recording</a>
        <a href="#sec-data">Data</a>
        <button class="linkbtn" type="button" data-action="shortcuts">Keyboard shortcuts</button>
    </nav>
    <div class="settings__main">
        <div class="req-head">
            <div>
                <h1>Settings</h1>
                <p class="sub">Preferences are saved in this browser. Recording options come from your project's <code>settings.py</code>.</p>
            </div>
        </div>

        {% if msg %}<div class="alert alert--ok"><span>{{ msg }}</span></div>{% endif %}
        {% if risks %}
        <div class="alert alert--bad"><span><b>{{ risks|length }} setting{{ risks|length|pluralize:" needs,s need" }} attention:</b> {% for r in risks %}<code>{{ r.key }}</code>{% if not forloop.last %}, {% endif %}{% endfor %}. <a href="#sec-recording">Review</a></span></div>
        {% endif %}

        <section class="card sec" id="sec-editor">
            <h2>Editor</h2>
            <p class="note">Where “Open in editor” and traceback links go.</p>
            <div class="editors" role="radiogroup" aria-label="Editor">
                <button type="button" class="editor" data-editor="vscode">VS Code</button>
                <button type="button" class="editor" data-editor="cursor">Cursor</button>
                <button type="button" class="editor" data-editor="pycharm">PyCharm</button>
                <button type="button" class="editor" data-editor="sublime">Sublime Text</button>
                <button type="button" class="editor" data-editor="none">No links</button>
            </div>
            <h3 class="h3">Path mapping</h3>
            <p class="note">Running Django in Docker or a VM? Map the path in recorded tracebacks to your local checkout.</p>
            <div class="pathmap">
                <label>Path in tracebacks<input id="path-from" class="input mono" placeholder="/app/" spellcheck="false" autocomplete="off"></label>
                <span class="pathmap__arrow" aria-hidden="true">→</span>
                <label>Local path<input id="path-to" class="input mono" placeholder="/Users/you/code/project/" spellcheck="false" autocomplete="off"></label>
            </div>
            {% if sample_frame %}
            <p class="preview"><span class="muted">Example:</span> <code>{{ sample_frame.file }}:{{ sample_frame.line }}</code> opens
                <a id="editor-preview" class="mono" data-editor-file="{{ sample_frame.file }}" data-editor-line="{{ sample_frame.line }}"></a></p>
            {% endif %}
        </section>

        <section class="card sec" id="sec-thresholds">
            <h2>Thresholds</h2>
            <p class="note">What Silky colours amber and red, what the Slow filter on Requests means, and how often a query must repeat to count as N+1. Saved as cookies so the server can use them.</p>
            <div class="thr">
                <label>Slow request<span class="thr__in"><input type="number" class="input mono" id="slow-ms" min="50" step="50" value="{{ thresholds.slow_ms }}" data-default="{{ defaults.slow_ms }}"><em>ms</em></span><small>red, and the Slow filter{% if nav.requests %}: {{ nav.slow|num }} of {{ nav.requests|num }} requests{% endif %}</small></label>
                <label>Getting slow<span class="thr__in"><input type="number" class="input mono" id="ok-ms" min="10" step="10" value="{{ thresholds.ok_ms }}" data-default="{{ defaults.ok_ms }}"><em>ms</em></span><small>amber from here, green below</small></label>
                <label>N+1 after<span class="thr__in"><input type="number" class="input mono" id="n1-min" min="2" max="50" step="1" value="{{ thresholds.n1_min }}" data-default="{{ defaults.n1_min }}"><em>repeats</em></span><small>same query in one request{% if nav.requests %}: {{ nav.n1|num }} requests flagged{% endif %}</small></label>
            </div>
            <div class="sec__actions">
                <button class="btn btn--primary" type="button" data-apply-thresholds>Apply thresholds</button>
                <button class="btn" type="button" data-reset-thresholds>Reset to defaults</button>
            </div>
        </section>

        <section class="card sec" id="sec-appearance">
            <h2>Appearance</h2>
            <div class="silky-rows">
                <div class="silky-row">
                    <div><b>Theme</b><small>System follows your operating system.</small></div>
                    <div class="seg" role="radiogroup" aria-label="Theme">
                        <button type="button" data-set-theme="system">System</button>
                        <button type="button" data-set-theme="light">Light</button>
                        <button type="button" data-set-theme="dark">Dark</button>
                    </div>
                </div>
                <div class="silky-row">
                    <div><b>Accent colour</b><small>Status colours (2xx green, 5xx red) stay the same in every accent.</small></div>
                    <div class="accents" role="radiogroup" aria-label="Accent colour">
                        <button type="button" class="accent" data-set-accent="green" style="--sw:#0c4b33"><i></i>Green</button>
                        <button type="button" class="accent" data-set-accent="blue" style="--sw:#1d5fbf"><i></i>Blue</button>
                        <button type="button" class="accent" data-set-accent="violet" style="--sw:#6a3dd1"><i></i>Violet</button>
                        <button type="button" class="accent" data-set-accent="graphite" style="--sw:#2d333b"><i></i>Graphite</button>
                    </div>
                </div>
                <div class="silky-row">
                    <div><b>Navigation</b><small>Sidebar, or tabs along the top.</small></div>
                    <div class="seg" role="radiogroup" aria-label="Navigation">
                        <button type="button" data-set-layout="sidebar">Sidebar</button>
                        <button type="button" data-set-layout="top">Top tabs</button>
                    </div>
                </div>
                <div class="silky-row">
                    <div><b>Charts</b><small>Hidden collapses every chart to its title. Each chart also has its own Hide and Show.</small></div>
                    <div class="seg" role="radiogroup" aria-label="Charts">
                        <button type="button" data-charts="shown">Shown</button>
                        <button type="button" data-charts="hidden">Hidden</button>
                    </div>
                </div>
                <div class="silky-row">
                    <div><b>Collapsed sidebar</b><small>Icons only, more room for tables.</small></div>
                    <label class="switch"><input type="checkbox" id="rail-toggle"><span></span></label>
                </div>
            </div>
        </section>

        <section class="card sec" id="sec-recording">
            <h2>Recording</h2>
            <p class="note">Read from <code>settings.py</code>. Change them there and restart the server.</p>
            <div class="cfg">
                {% for c in recording %}
                <div class="cfg__row{% if c.risk %} is-risk{% endif %}">
                    <code class="cfg__key">{{ c.key }}</code><code class="cfg__val">{{ c.value }}</code>
                    <span class="cfg__def">{% if c.changed %}default {{ c.default }}{% else %}default{% endif %}</span>
                    {% if c.risk %}<div class="cfg__risk">{{ c.risk }}</div>{% endif %}
                </div>
                {% endfor %}
            </div>
            <p class="note cfg__retention">
                {% if retention.mode == 'count' %}Keeps the newest {{ retention.max_requests }} requests.
                {% elif retention.mode == 'time' %}Keeps {% if retention.max_time_label %}the last {{ retention.max_time_label }}{% else %}everything: no time window is set{% endif %}.
                {% else %}Keeps at most {{ retention.max_requests }} requests{% if retention.max_time_label %}, none older than {{ retention.max_time_label }}{% endif %}.{% endif %}
            </p>
            {% if recommended %}
            <textarea id="recommended-settings" hidden>{{ recommended }}</textarea>
            <div class="sec__actions"><button class="btn" type="button" data-copy-from="#recommended-settings" data-copy-label="Recommended settings copied"><svg class="silk-icon silk-icon--sm" aria-hidden="true"><use href="#i-copy"></use></svg>Copy recommended settings</button></div>
            {% endif %}
        </section>

        <section class="card sec" id="sec-data">
            <h2>Data</h2>
            <div class="datastats">
                <div><b>{{ data.requests|num }}</b><span>requests</span></div>
                <div><b>{{ data.queries|num }}</b><span>queries</span></div>
                <div><b>{{ data.profiles }}</b><span>profiles</span></div>
                <div><b>{% if data.oldest %}{{ data.oldest|timesince }}{% else %}·{% endif %}</b><span>oldest record</span></div>
            </div>
            <form method="post" action="{% url 'silk:cleardb' %}" class="silky-rows">
                {% csrf_token %}
                <div class="silky-row">
                    <div><b>Run garbage collection</b><small>Apply the retention policy now, as <code>manage.py silk_request_garbage_collect</code> does.</small></div>
                    <button class="btn" type="submit" name="run_gc" value="1">Run now</button>
                </div>
                <div class="silky-row">
                    <div><b>Clear profiling data</b><small>Deletes every profile, and profiler files when <code>SILKY_DELETE_PROFILES</code> is on.</small></div>
                    <button class="btn btn--danger" type="submit" name="clear_profiling" value="1" data-confirm="Delete all {{ data.profiles }} profiles?">Clear profiles</button>
                </div>
                <div class="silky-row">
                    <div><b>Clear all recorded data</b><small>Deletes every request, query and profile. This can't be undone.</small></div>
                    <button class="btn btn--danger" type="button" data-clear-all>Clear data…</button>
                </div>
            </form>
        </section>
    </div>
</div>

<dialog class="dialog" id="clear-dialog" aria-labelledby="clear-title">
    <form method="post" action="{% url 'silk:cleardb' %}">
        {% csrf_token %}
        <h2 id="clear-title">Clear all recorded data?</h2>
        <p class="note">This deletes {{ data.requests|num }} requests and everything recorded with them. Type <code>clear</code> to confirm.</p>
        <input class="input mono" id="clear-confirm" autocomplete="off" spellcheck="false" aria-label="Type clear to confirm">
        <div class="sec__actions">
            <button class="btn" type="button" data-dialog-close>Cancel</button>
            <button class="btn btn--danger" type="submit" name="clear_all" value="1" disabled>Delete everything</button>
        </div>
    </form>
</dialog>
{% endblock %}