{% extends "base.html" %}
{% block title %}Module configuration · MISP Modules{% endblock %}
{% block content %}
    <div class="page-heading" id="top">
        <div>
            <p class="eyebrow">WORKSPACE SETTINGS</p>
            <h1>Module configuration</h1>
            <p class="page-description">Manage available modules and their default settings.</p>
        </div>
        <a href="/"
           class="btn btn-outline-secondary">New enrichment <i class="fa-solid fa-arrow-right ms-2"
    aria-hidden="true"></i></a>
    </div>
    <div v-cloak>
        <div v-if="error" class="alert alert-danger" role="alert">
            [[error]]
            <button class="btn btn-sm btn-outline-danger" @click="loadModules">Try again</button>
        </div>
        <div class="settings-toolbar">
            <div class="search-field">
                <i class="fa-solid fa-magnifying-glass" aria-hidden="true"></i>
                <input type="search"
                       v-model="search"
                       id="search_modules"
                       placeholder="Search by module name, description, or attribute"
                       aria-label="Search modules"
                       class="form-control">
            </div>
            <select class="form-select"
                    v-model="filter"
                    aria-label="Filter module status">
                <option value="all">All modules</option>
                <option value="enabled">Enabled modules</option>
                <option value="disabled">Disabled modules</option>
            </select>
            <span class="text-muted small" role="status">[[filteredModules.length]] of [[modules.length]] modules</span>
        </div>
        <div class="settings-layout">
            <div class="settings-list">
                <div v-if="loading" class="empty-state" role="status">Loading module configuration…</div>
                <div v-else-if="!filteredModules.length" class="empty-state">
                    <h2>No matching modules</h2>
                    <p>Try a different search or status filter.</p>
                </div>
                <div class="settings-row"
                     :class="{selected: current?.id === module.id}"
                     v-for="module in filteredModules"
                     :key="module.id">
                    <input type="checkbox"
                           class="form-check-input"
                           :checked="module.is_active !== false"
                           @change="toggleModule(module, $event)"
                           :aria-label="'Enable '+module.name"
                           :disabled="pending.includes(module.id)">
                    <button type="button"
                            class="settings-open"
                            @click="openModule(module)"
                            :aria-pressed="current?.id === module.id"
                            :id="'module-'+module.id"><strong>[[module.name]]</strong><small>[[module.description || (module.input_attr || []).join(', ') || 'No description available']]</small><small>[[module.config.length ? 'Configurable' : 'No configuration required']]</small></button>
                    <i class="fa-solid fa-chevron-right text-muted" aria-hidden="true"></i>
                </div>
            </div>
            <section v-if="current"
                     class="workspace-card settings-panel"
                     aria-labelledby="config-title">
                <div class="settings-panel-header">
                    <div>
                        <p class="eyebrow">MODULE SETTINGS</p>
                        <h2 id="config-title" tabindex="-1">[[current.name]]</h2>
                    </div>
                    <button type="button"
                            class="btn btn-sm btn-outline-secondary"
                            @click="closeModule"
                            aria-label="Close module configuration">
                        <i class="fa-solid fa-xmark" aria-hidden="true"></i>
                    </button>
                </div>
                <p class="small text-muted">[[current.description]]</p>
                <p class="small text-muted">Input attributes: <strong>[[ (current.input_attr || []).join(', ') || 'None' ]]</strong></p>
                <form v-if="Object.keys(values).length" @submit.prevent="saveConfig">
                    <div class="form-check mb-4">
                        <input type="checkbox"
                               id="request-config"
                               class="form-check-input"
                               v-model="requestConfig"
                               :disabled="saving"><label for="request-config" class="form-check-label">Ask for configuration on each query</label>
                    </div>
                    <template v-if="!requestConfig">
                        <div class="mb-3" v-for="(value, key) in values" :key="key">
                            <label :for="'setting-'+key" class="form-label">[[key]]</label><input :id="'setting-'+key"
       :type="isSecret(key) ? 'password' : 'text'"
       class="form-control"
       v-model="values[key]"
       :disabled="saving"
       autocomplete="off">
                        </div>
                    </template>
                    <p v-else class="small text-muted">Users will provide these settings when they run this module.</p>
                    <div v-if="saveError" class="alert alert-danger" role="alert">[[saveError]]</div>
                    <p v-if="saved" class="alert alert-success" role="status">Module settings saved.</p>
                    <button class="btn btn-primary"
                            type="submit"
                            :disabled="saving">[[saving ? 'Saving…' : 'Save settings']]</button>
                </form>
                <div v-else class="empty-state">
                    <h3>Ready to use</h3>
                    <p>This module has no settings to configure.</p>
                </div>
            </section>
            <div v-else class="workspace-card empty-state">
                <i class="fa-solid fa-sliders" aria-hidden="true"></i>
                <h2>Select a module</h2>
                <p>Choose a module to review its attributes and configure its defaults.</p>
            </div>
        </div>
    </div>
{% endblock %}
{% block script %}
    <script type="module"
            src="{{ url_for('static', filename='js/modules-config.js') }}"></script>
{% endblock %}