{% extends "layouts/console_layout.html" %}

{% block container_class %}ms2-settings-container{% endblock %}

{% block content %}
<link href="/assets/css/mindsweep2.css" rel="stylesheet" type="text/css">

<div class="ms2-settings-app" id="ms2SettingsApp">
    <header class="ms2-settings-head">
        <h2>Mind Sweep 2 &middot; Settings</h2>
        <p>Manage reusable capture templates and the smart-suggestion rules that power &ldquo;Apply suggestions&rdquo;.</p>
    </header>

    <div class="ms2-settings-grid">
        <!-- Templates -->
        <section class="ms2-settings-panel">
            <div class="ms2-settings-panel-head">
                <h3>Templates</h3>
                <button type="button" class="ms2-btn ms2-btn-primary" id="ms2NewTemplate">New template</button>
            </div>
            <p class="ms2-settings-hint">Templates pre-fill default dimensions and labels when you capture a new sweep.</p>
            <div id="ms2TemplatesList" class="ms2-settings-list"></div>

            <form id="ms2TemplateForm" class="ms2-settings-form" style="display: none;" autocomplete="off">
                <input type="hidden" id="tplId">
                <div class="ms2-settings-row">
                    <label>Name
                        <input type="text" id="tplName" class="ms2-input" placeholder="e.g. Weekly review">
                    </label>
                    <label>Icon
                        <input type="text" id="tplIcon" class="ms2-input" placeholder="e.g. work (optional)">
                    </label>
                </div>
                <label>Description
                    <textarea id="tplDesc" class="ms2-input" rows="2" placeholder="Optional description"></textarea>
                </label>
                <div class="ms2-settings-section">
                    <span class="ms2-settings-label">Default dimensions</span>
                    <div id="tplDimensions" class="ms2-settings-dims"></div>
                </div>
                <div class="ms2-settings-section">
                    <span class="ms2-settings-label">Default labels</span>
                    <div id="tplLabels" class="ms2-settings-chips"></div>
                </div>
                <div class="ms2-settings-actions">
                    <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2TplCancel">Cancel</button>
                    <button type="submit" class="ms2-btn ms2-btn-primary" id="ms2TplSave">Save template</button>
                </div>
            </form>
        </section>

        <!-- Auto rules -->
        <section class="ms2-settings-panel">
            <div class="ms2-settings-panel-head">
                <h3>Smart suggestions (auto rules)</h3>
                <button type="button" class="ms2-btn ms2-btn-primary" id="ms2NewRule">New rule</button>
            </div>
            <p class="ms2-settings-hint">Rules scan item text and suggest a dimension value when you click &ldquo;Apply suggestions&rdquo;.</p>
            <div id="ms2RulesList" class="ms2-settings-list"></div>

            <form id="ms2RuleForm" class="ms2-settings-form" style="display: none;" autocomplete="off">
                <input type="hidden" id="ruleId">
                <div class="ms2-settings-row">
                    <label>Name
                        <input type="text" id="ruleName" class="ms2-input" placeholder="e.g. Urgent flag">
                    </label>
                    <label>Confidence (0&ndash;1)
                        <input type="number" id="ruleConfidence" class="ms2-input" step="0.05" min="0" max="1" value="0.85">
                    </label>
                </div>
                <div class="ms2-settings-row">
                    <label>Match field
                        <select id="ruleMatchField" class="ms2-input">
                            <option value="title">Title</option>
                            <option value="notes">Notes</option>
                        </select>
                    </label>
                    <label>Match type
                        <select id="ruleMatchType" class="ms2-input">
                            <option value="contains">Contains</option>
                            <option value="equals">Equals</option>
                            <option value="starts_with">Starts with</option>
                            <option value="regex">Regex</option>
                        </select>
                    </label>
                </div>
                <label>Match value
                    <input type="text" id="ruleMatchValue" class="ms2-input" placeholder="e.g. urgent, or (call|phone|ring)">
                </label>
                <div class="ms2-settings-row">
                    <label>Dimension
                        <select id="ruleDimension" class="ms2-input"></select>
                    </label>
                    <label>Option
                        <select id="ruleOption" class="ms2-input"></select>
                    </label>
                </div>
                <div class="ms2-settings-row">
                    <label>Sort order
                        <input type="number" id="ruleSort" class="ms2-input" step="1" value="0">
                    </label>
                    <label class="ms2-toggle">
                        <input type="checkbox" id="ruleEnabled" checked><span>Enabled</span>
                    </label>
                </div>
                <div class="ms2-settings-actions">
                    <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2RuleCancel">Cancel</button>
                    <button type="submit" class="ms2-btn ms2-btn-primary" id="ms2RuleSave">Save rule</button>
                </div>
            </form>
        </section>
    </div>

    <div id="ms2Toast" class="ms2-toast" style="display: none;">
        <span class="material-symbols-outlined ms2-toast-icon" id="ms2ToastIcon">check_circle</span>
        <span id="ms2ToastMsg">Saved</span>
    </div>
</div>
{% endblock %}