{% extends "base.html" %}
{% block title %}New enrichment · MISP Modules{% endblock %}
{% block content %}
    <div class="page-heading">
        <div>
            <p class="eyebrow">INVESTIGATE & ENRICH</p>
            <h1>Turn indicators into intelligence.</h1>
            <p class="page-description">Explore your observables with MISP’s enrichment modules.</p>
        </div>
        <a href="/history_session"
           class="btn btn-outline-secondary"><i class="fa-solid fa-clock-rotate-left me-2"
   aria-hidden="true"></i>Session history</a>
    </div>
    <div v-cloak>
        <div v-if="load_error" class="alert alert-danger" role="alert">
            <strong>Unable to load modules.</strong> [[load_error]]
            <button class="btn btn-sm btn-outline-danger ms-2"
                    @click="loadModules"
                    :disabled="loading">Try again</button>
        </div>
        <form class="enrichment-layout"
              @submit.prevent="runQuery"
              :aria-busy="submitting">
            <div class="query-builder">
                <section class="workspace-card" aria-labelledby="indicators-heading">
                    <div class="section-heading">
                        <span class="step-number">1</span>
                        <div>
                            <h2 id="indicators-heading">Add your indicators</h2>
                            <p>Enter a domain, IP address, hash, URL, or another observable.</p>
                        </div>
                    </div>
                    <div class="indicator-entry"
                         v-for="(entry, index) in entries"
                         :key="entry.id">
                        <label :for="'indicator-'+entry.id" class="form-label">Indicator [[index + 1]]</label>
                        <div class="d-flex gap-2">
                            <input :id="'indicator-'+entry.id"
                                   v-model="entry.value"
                                   type="text"
                                   class="form-control indicator-input"
                                   placeholder="e.g. example.org"
                                   autocomplete="off"
                                   spellcheck="false"
                                   :aria-invalid="attempted && !hasIndicators"
                                   aria-describedby="indicator-help"
                                   :disabled="submitting">
                            <button v-if="entries.length > 1"
                                    type="button"
                                    class="btn btn-outline-secondary"
                                    @click="removeEntry(index)"
                                    :aria-label="'Remove indicator '+(index+1)"
                                    :disabled="submitting">
                                <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                            </button>
                        </div>
                    </div>
                    <div class="entry-toolbar">
                        <button type="button"
                                class="btn btn-sm btn-outline-secondary"
                                @click="addEntry"
                                :disabled="submitting"><i class="fa-solid fa-plus me-2" aria-hidden="true"></i>Add indicator</button><span id="indicator-help" class="text-muted small">Use one attribute type for all indicators in a query.</span>
                    </div>
                </section>
                <section class="workspace-card" aria-labelledby="attribute-heading">
                    <div class="section-heading">
                        <span class="step-number">2</span>
                        <div>
                            <h2 id="attribute-heading">Choose an attribute type</h2>
                            <p>This determines which modules can process your indicators.</p>
                        </div>
                    </div>
                    <label for="attribute-type" class="form-label">MISP attribute</label>
                    <select id="attribute-type"
                            v-model="attribute"
                            class="form-select"
                            :disabled="loading || submitting || !!load_error"
                            :aria-invalid="attempted && !attribute">
                        <option value="">[[loading ? 'Loading attribute types…' : 'Select an attribute type…']]</option>
                        <option v-for="type in attributes" :key="type" :value="type">[[type]]</option>
                    </select>
                    <div class="attribute-shortcuts" v-if="commonAttributes.length">
                        <span class="text-muted small">Quick select</span><button v-for="type in commonAttributes"
        :key="type"
        type="button"
        class="attribute-chip"
        :class="{selected: attribute === type}"
        :aria-pressed="attribute === type"
        @click="attribute = type"
        :disabled="submitting">[[type]]</button>
                    </div>
                </section>
                <section class="workspace-card" aria-labelledby="modules-heading">
                    <div class="section-heading">
                        <span class="step-number">3</span>
                        <div>
                            <h2 id="modules-heading">Select enrichment modules <span class="count-badge" v-if="attribute">[[compatibleModules.length]]</span></h2>
                            <p>Choose the sources you want to query. Select a card to add it.</p>
                        </div>
                    </div>
                    <div v-if="loading" class="empty-state" role="status">
                        <i class="fa-solid fa-circle-notch fa-spin" aria-hidden="true"></i>
                        <p>Loading available modules…</p>
                    </div>
                    <div v-else-if="!attribute" class="empty-state">
                        <i class="fa-solid fa-cubes" aria-hidden="true"></i>
                        <h3>Your modules will appear here</h3>
                        <p>Select an attribute type to see compatible enrichment sources.</p>
                    </div>
                    <template v-else>
                        <div class="module-toolbar">
                            <div class="search-field">
                                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                                <input type="search"
                                       v-model="search"
                                       class="form-control"
                                       aria-label="Search compatible modules"
                                       placeholder="Search by name or description">
                            </div>
                            <button type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    @click="selectVisible"
                                    :disabled="!filteredModules.length || submitting">Select visible</button>
                        </div>
                        <div class="module-grid" v-if="filteredModules.length">
                            <label class="module-card"
                                   :class="{selected: selected.includes(module.name)}"
                                   v-for="module in filteredModules"
                                   :key="module.name">
                                <input type="checkbox"
                                       class="form-check-input"
                                       :value="module.name"
                                       v-model="selected"
                                       :disabled="submitting">
                                <span><span class="module-name">[[module.name]]</span><span class="module-description">[[module.meta.description || 'Enrich this attribute with '+module.name+'.']]</span><span class="module-note" v-if="module.request_on_query"><i class="fa-solid fa-key me-1" aria-hidden="true"></i>Configuration required</span></span>
                            </label>
                        </div>
                        <div v-else class="empty-state">
                            <h3>[[compatibleModules.length ? 'No matching modules' : 'No compatible modules']]</h3>
                            <p>[[compatibleModules.length ? 'Try another name or clear your search.' : 'Choose another attribute type or check the module configuration.']]</p>
                            <button v-if="search"
                                    type="button"
                                    class="btn btn-sm btn-outline-secondary"
                                    @click="search = ''">Clear search</button>
                        </div>
                    </template>
                </section>
                <section class="workspace-card"
                         v-if="configModules.length"
                         aria-labelledby="config-heading">
                    <div class="section-heading">
                        <span class="step-number"><i class="fa-solid fa-sliders" aria-hidden="true"></i></span>
                        <div>
                            <h2 id="config-heading">Query configuration</h2>
                            <p>These settings apply to this query only.</p>
                        </div>
                    </div>
                    <fieldset v-for="module in configModules"
                              :key="module.name"
                              class="query-config">
                        <legend>[[module.name]]</legend>
                        <div v-for="key in module.meta.config" :key="key" class="mb-3">
                            <label :for="'config-'+module.name+'-'+key" class="form-label">[[key]]</label>
                            <input :id="'config-'+module.name+'-'+key"
                                   v-model="config[module.name][key]"
                                   :type="isSecret(key) ? 'password' : 'text'"
                                   class="form-control"
                                   autocomplete="off"
                                   :disabled="submitting"
                                   :aria-invalid="!!configErrors[module.name+' / '+key]"
                                   :aria-describedby="configErrors[module.name+' / '+key] ? 'error-'+module.name+'-'+key : undefined">
                            <span v-if="configErrors[module.name+' / '+key]"
                                  :id="'error-'+module.name+'-'+key"
                                  class="field-error">Enter a value for [[key]].</span>
                        </div>
                    </fieldset>
                </section>
            </div>
            <aside class="query-summary">
                <section class="workspace-card summary-card" aria-labelledby="summary-heading">
                    <p class="eyebrow">READY WHEN YOU ARE</p>
                    <h2 id="summary-heading">Your enrichment</h2>
                    <dl class="summary-facts">
                        <div>
                            <dt>Indicators</dt>
                            <dd>
                                [[indicatorCount]]
                            </dd>
                        </div>
                        <div>
                            <dt>Attribute</dt>
                            <dd>
                                [[attribute || 'Not selected']]
                            </dd>
                        </div>
                        <div>
                            <dt>Modules</dt>
                            <dd>
                                [[selected.length]] selected
                            </dd>
                        </div>
                    </dl>
                    <div class="selected-modules" v-if="selected.length">
                        <button v-for="name in selected"
                                :key="name"
                                type="button"
                                class="selected-module"
                                @click="selected = selected.filter(item => item !== name)"
                                :disabled="submitting"
                                :aria-label="'Remove module '+name">[[name]] <i class="fa-solid fa-xmark" aria-hidden="true"></i></button><button type="button"
        class="text-button"
        @click="selected = []"
        :disabled="submitting">Clear selection</button>
                    </div>
                    <label class="config-toggle">
                        <input type="checkbox"
                               v-model="customConfig"
                               class="form-check-input"
                               :disabled="submitting"><span>Override module settings<span class="d-block small text-muted">Provide configuration for this query.</span></span>
                    </label>
                    <div v-if="status"
                         class="alert alert-danger query-error"
                         role="alert"
                         tabindex="-1"
                         ref="errorBox">[[status]]</div>
                    <button type="submit"
                            class="btn btn-primary run-query"
                            :disabled="loading || submitting || !!load_error || !modules.length"><i :class="submitting ? 'fa-solid fa-circle-notch fa-spin' : 'fa-solid fa-play'"
   class="me-2"
   aria-hidden="true"></i>[[submitting ? 'Starting enrichment…' : 'Run enrichment']]</button>
                    <p class="summary-hint">Results open in a dedicated view where you can explore, download, and pivot to another query.</p>
                </section>
                <div class="workflow-note">
                    <i class="fa-solid fa-lightbulb" aria-hidden="true"></i>
                    <div>
                        <h3>Follow the connections</h3>
                        <p>Use an attribute in your results to start a related query. Your session history keeps the investigation connected.</p>
                    </div>
                </div>
            </aside>
        </form>
    </div>
    <noscript>
        <div class="alert alert-warning">Enable JavaScript to select modules and run an enrichment.</div>
    </noscript>
    <input type="hidden" id="parent_id" value="{{ sid | default('', true) }}">
{% endblock %}
{% block script %}<script type="module" src="{{ url_for('static', filename='js/home.js') }}"></script>{% endblock %}