{% extends "base.html" %}

{% block title %}Scripts - Codomyrmex{% endblock %}

{% block content %}
<h1>Script Orchestration</h1>

<div class="search-container">
    <label for="script-search" class="sr-only">Filter scripts</label>
    <input type="text" id="script-search" class="search-input" placeholder="🔍 Filter scripts by name...">
</div>

<div class="grid" id="scripts-grid">
    {% for script in scripts %}
    <div class="card script-card" data-script-name="{{ script.path|lower }}">
        <div class="card-title">
            <span class="script-name">{{ script.title }}</span>
        </div>
        <div class="script-meta">
            <code class="script-path" title="{{ script.path }}">{{ script.path }}</code>
        </div>
        <p class="script-description">
            {{ script.description }}
        </p>

        <form class="script-form" data-script-name="{{ script.path }}" data-script-id="{{ loop.index }}">
            <div style="margin-bottom: 1rem;">
                <label for="script-args-{{ loop.index }}" class="sr-only">Arguments for {{ script.title }}</label>
                <input type="text" id="script-args-{{ loop.index }}" name="args" placeholder="Arguments (optional)" style="width: 100%;">
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%;">Run Script</button>
        </form>

        <div id="output-{{ loop.index }}" class="console hidden"></div>
    </div>
    {% endfor %}

    {% if not scripts %}
    <div class="card empty-state" style="grid-column: 1 / -1;">
        <div class="empty-state-icon">📜</div>
        <p>No scripts found in <code>scripts/</code> directory.</p>
    </div>
    {% endif %}
</div>

<script>
    document.addEventListener('DOMContentLoaded', () => {
        const searchInput = document.getElementById('script-search');
        const cards = document.querySelectorAll('.script-card');

        if (searchInput) {
            searchInput.addEventListener('input', (e) => {
                const query = e.target.value.toLowerCase();
                cards.forEach(card => {
                    const name = card.dataset.scriptName;
                    if (name.includes(query)) {
                        card.style.display = '';
                    } else {
                        card.style.display = 'none';
                    }
                });
            });
        }
    });
</script>
{% endblock %}