{% extends "base.html" %}

{% block content %}
<div class="container container-sm">
    <div class="page-header">
        <div>
            <a href="/worksets" class="text-muted mb-md d-block">
                <i class="fas fa-arrow-left"></i> Back to Worksets
            </a>
            <h1 class="page-title">Create Workset</h1>
            <p class="page-subtitle">Bind a Daylily-EC command profile to a stable batch of analysis inputs.</p>
        </div>
    </div>

    <form id="workset-form" class="card">
        <h3 class="card-title">Workset</h3>
        <div class="form-group">
            <label for="workset_name" class="form-label">Name</label>
            <input id="workset_name" name="workset_name" class="form-control" required>
        </div>

        <div class="grid grid-2">
            <div class="form-group">
                <label for="analysis_command_id" class="form-label">Command Profile</label>
                <select id="analysis_command_id" name="analysis_command_id" class="form-control form-select" required>
                    <option value="">Choose profile...</option>
                    {% for command in analysis_command_catalog.commands %}
                    <option value="{{ command.command_id }}">{{ command.display_name }} ({{ command.command_id }})</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-group">
                <label class="form-label">Features</label>
                <label class="checkbox-label" style="min-height: 42px;">
                    <input type="checkbox" id="feature_tiddit" value="tiddit">
                    <span>Tiddit SV calling</span>
                </label>
            </div>
        </div>

        <div class="form-group">
            <label for="artifact_set_euids" class="form-label">Dewey Artifact Sets</label>
            <input id="artifact_set_euids" name="artifact_set_euids" class="form-control" placeholder="AS-123, AS-456">
        </div>

        <div class="form-actions">
            <a href="/worksets" class="btn btn-outline">Cancel</a>
            <button type="submit" class="btn btn-primary">
                <i class="fas fa-save"></i> Create
            </button>
        </div>
    </form>
</div>
{% endblock %}

{% block extra_js %}
<script>
(() => {
    const form = document.getElementById('workset-form');
    const catalog = UrsaPortal.parsePageData().analysis_command_catalog || {};
    const commands = Array.isArray(catalog.commands) ? catalog.commands : [];

    function selectedFeatures() {
        return document.getElementById('feature_tiddit')?.checked ? ['tiddit'] : [];
    }

    form?.addEventListener('submit', async (event) => {
        event.preventDefault();
        const commandId = document.getElementById('analysis_command_id')?.value || '';
        const command = commands.find((item) => item.command_id === commandId);
        const artifactSets = String(document.getElementById('artifact_set_euids')?.value || '')
            .split(',')
            .map((item) => item.trim())
            .filter(Boolean);
        const created = await UrsaPortal.apiRequest('/api/v1/worksets', {
            method: 'POST',
            body: {
                name: document.getElementById('workset_name')?.value || '',
                artifact_set_euids: artifactSets,
                metadata: {
                    analysis_command_id: commandId,
                    optional_features: selectedFeatures(),
                    pipeline_type: command?.display_name || commandId,
                    reference_genome: command?.genome || '',
                },
            },
        });
        window.location.assign(`/worksets/${encodeURIComponent(created.workset_euid)}`);
    });
})();
</script>
{% endblock %}