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

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

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

<div class="ms2-app" id="ms2App">
    <div class="ms2-stepper">
        <div class="ms2-step active"><span class="ms2-step-num">1</span><span class="ms2-step-label">Capture</span></div>
        <div class="ms2-step-line"></div>
        <div class="ms2-step"><span class="ms2-step-num">2</span><span class="ms2-step-label">Curate</span></div>
    </div>

    <section class="ms2-panel ms2-capture-panel">
        <header class="ms2-hero">
            <h2>Mind Sweep 2 &middot; Capture</h2>
            <p>Empty your mind. Type or paste everything &mdash; each line or comma becomes a candidate item you can refine next.</p>
        </header>

        <!-- Returning users: jump straight to the accumulated Curate inbox -->
        <div class="ms2-return-actions" id="ms2ReturnActions" style="display: none;">
            <a href="/mindsweep2/curate" class="ms2-btn ms2-btn-primary ms2-btn-large" id="ms2ContinueBtn">
                <span>Continue to Curate</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </a>
        </div>

        <!-- Session metadata -->
        <div class="ms2-meta-row">
            <label class="ms2-field">
                <span class="ms2-field-label">Session name <i>(optional)</i></span>
                <input type="text" id="ms2SessionName" class="ms2-input" placeholder="e.g. Weekly brain dump" autocomplete="off">
            </label>
            <label class="ms2-field">
                <span class="ms2-field-label">Source <i>(optional)</i></span>
                <input type="text" id="ms2SessionSource" class="ms2-input" placeholder="e.g. email, notes, meeting" autocomplete="off">
            </label>
        </div>

        <!-- Parse controls -->
        <div class="ms2-parse-controls">
            <span class="ms2-controls-label">Parse mode</span>
            <div class="ms2-segmented" id="ms2ParseMode">
                <button type="button" data-mode="enter" class="active">Enter only</button>
                <button type="button" data-mode="enter_comma">Enter + comma</button>
                <button type="button" data-mode="comma">Comma only</button>
                <button type="button" data-mode="smart">Smart</button>
            </div>
            <label class="ms2-toggle">
                <input type="checkbox" id="ms2TreatCommas">
                <span>Treat commas as separators</span>
            </label>
        </div>

        <!-- Templates & suggestions -->
        <div class="ms2-meta-row ms2-tools-row">
            <label class="ms2-field">
                <span class="ms2-field-label">Template <i>(applies default dimensions)</i></span>
                <select id="ms2Template" class="ms2-input">
                    <option value="">&#8212; None &#8212;</option>
                </select>
            </label>
            <div class="ms2-field">
                <span class="ms2-field-label">Smart suggestions <i>(from your rules)</i></span>
                <div class="ms2-suggest-actions">
                    <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2SuggestBtn">Apply suggestions</button>
                    <span class="ms2-pill" id="ms2SuggestionCount">0</span>
                </div>
            </div>
        </div>

        <!-- Two-column preview -->
        <div class="ms2-capture-grid">
            <div class="ms2-col ms2-col-raw">
                <div class="ms2-col-head">
                    <span class="material-symbols-outlined">edit_note</span>
                    <strong>Raw input</strong>
                </div>
                <textarea id="ms2RawInput" class="ms2-raw-textarea" placeholder="Type or paste items separated by comma or Enter&#8230;"></textarea>
                <div class="ms2-input-hint">
                    <span class="ms2-counter" id="ms2Counter">0 items detected</span>
                </div>
            </div>
            <div class="ms2-col ms2-col-parsed">
                <div class="ms2-col-head">
                    <span class="material-symbols-outlined">checklist</span>
                    <strong>Parsed items</strong>
                    <span class="ms2-pill" id="ms2ParsedCount">0</span>
                </div>
                <div class="ms2-parsed-toolbar">
                    <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2SelectAll">Select all</button>
                    <button type="button" class="ms2-btn ms2-btn-ghost ms2-btn-danger" id="ms2DeleteSelected">Delete</button>
                    <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2MergeSelected">Merge</button>
                </div>
                <div id="ms2ParsedList" class="ms2-parsed-list">
                    <div class="ms2-empty" id="ms2Empty">Start typing or paste above&#8230;</div>
                </div>
            </div>
        </div>

        <footer class="ms2-footer">
            <div class="ms2-footer-left">
                <button type="button" class="ms2-btn ms2-btn-ghost" id="ms2Reset">Clear all</button>
                <a href="/mindsweep2/settings" class="ms2-btn ms2-btn-ghost" title="Manage templates &amp; rules">
                    <span class="material-symbols-outlined">settings</span> Templates &amp; rules
                </a>
                <label class="ms2-toggle ms2-start-fresh" id="ms2StartFreshWrap" style="display: none;">
                    <input type="checkbox" id="ms2StartFresh">
                    <span>Start fresh &mdash; erase all previous mind-sweeps</span>
                </label>
            </div>
            <button type="button" class="ms2-btn ms2-btn-primary ms2-btn-large" id="ms2CurateBtn">
                <span>Curate these items</span>
                <span class="material-symbols-outlined">arrow_forward</span>
            </button>
        </footer>
    </section>

    <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 %}