{% extends 'base.html' %}
{% load static %}

{# 
AGENT TEMPLATE STARTER - Copy this file and customize for new agents

REPLACE THE FOLLOWING:
1. "Agent Template Starter" -> Your agent name
2. "YOUR_AGENT_SLUG" -> your-agent-slug  
3. Form fields in the widget-content section
4. How it works steps (optional)
5. Agent-specific JavaScript (optional)

KEEP THE FOLLOWING:
- All {% include %} statements for shared components
- Basic template structure and CSS links
- Processing and results components
#}

{% block title %}Agent Template Starter - Quantum Tasks AI{% endblock %}

{% block extra_css %}
<link rel="stylesheet" href="{% static 'css/agent-base.css' %}?v={{ timestamp }}">
{# Add agent-specific CSS here if needed #}
<style>
/* Agent-specific styles go here if needed */
</style>
{% endblock %}

{% block content %}
<!-- Agent Header Component - KEEP THIS -->
{% include "workflows/components/agent_header.html" with agent_title=agent_config.name agent_subtitle=agent_config.description %}

<!-- Quick Agent Access Panel Component - KEEP THIS -->
{% include "workflows/components/quick_agents_panel.html" %}

<!-- Main Agent Grid -->
<div class="agent-grid">
    <!-- CUSTOMIZE THIS SECTION: Agent-Specific Form Widget -->
    <div class="agent-widget widget-large" style="flex: 1; margin-right: clamp(0px, var(--spacing-lg), 2vw);">
        <div class="widget-header">
            <h3 class="widget-title">
                <span class="widget-icon">{{ agent_config.icon }}</span>
                {# CUSTOMIZE: Change "Details" to something specific like "Configuration", "Input", etc. #}
                {{ agent_config.name }} Details
            </h3>
        </div>
        <div class="widget-content">
            <form id="agentForm" method="POST">
                {% csrf_token %}
                
                {# CUSTOMIZE: Replace this section with your agent-specific form fields #}
                <!-- Example form section - REPLACE WITH YOUR FIELDS -->
                <div class="section-container">
                    <h4 class="section-subtitle">📝 Input Section</h4>
                    
                    <div class="form-group">
                        <label class="form-label" for="example_input">Example Input Field *</label>
                        <input type="text" 
                               id="example_input" 
                               name="example_input" 
                               class="form-input"
                               placeholder="Enter your input here..." 
                               required>
                        <div class="form-help">Provide a helpful description for this field</div>
                        <div id="example_input-error" class="form-error" style="display: none;"></div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="example_textarea">Example Textarea *</label>
                        <textarea id="example_textarea" 
                                  name="example_textarea" 
                                  class="form-textarea"
                                  placeholder="Enter detailed information..." 
                                  required 
                                  rows="4"></textarea>
                        <div class="form-help">Describe what kind of content goes here</div>
                        <div id="example_textarea-error" class="form-error" style="display: none;"></div>
                    </div>
                    
                    <div class="form-group">
                        <label class="form-label" for="example_select">Example Select *</label>
                        <select id="example_select" name="example_select" class="form-input" required>
                            <option value="">Select an option...</option>
                            <option value="option1">Option 1</option>
                            <option value="option2">Option 2</option>
                            <option value="option3">Option 3</option>
                        </select>
                        <div class="form-help">Choose the appropriate option</div>
                        <div id="example_select-error" class="form-error" style="display: none;"></div>
                    </div>
                </div>
                {# END CUSTOMIZE SECTION #}

                <!-- Submit Button with Balance Check - KEEP THIS STRUCTURE -->
                <div style="margin-top: var(--spacing-lg);">
                    {% if user.is_authenticated %}
                        {% if user.wallet_balance >= agent_config.price %}
                            <button type="submit" class="btn btn-primary btn-full" id="generateBtn">
                                {# CUSTOMIZE: Change action verb like "Generate", "Analyze", "Process" #}
                                {{ agent_config.icon }} Generate with {{ agent_config.name }} ({{ agent_config.price }} AED)
                            </button>
                        {% else %}
                            <div style="background: #fef2f2; color: #dc2626; padding: var(--spacing-md); border-radius: var(--radius-md); margin-bottom: var(--spacing-md); font-size: 14px; font-weight: 500; text-align: center;">
                                Insufficient balance! You need {{ agent_config.price }} AED.
                            </div>
                            <a href="{% url 'wallet:wallet' %}" class="btn btn-primary btn-full" style="text-decoration: none;">
                                💰 Top Up Wallet
                            </a>
                        {% endif %}
                    {% else %}
                        <a href="{% url 'authentication:login' %}" class="btn btn-primary btn-full">
                            🔐 Login to Continue
                        </a>
                    {% endif %}
                </div>
            </form>
        </div>
    </div>

    <!-- How It Works Widget - KEEP THIS, CUSTOMIZE steps parameter -->
    {# CUSTOMIZE: Change "generic" to your agent-specific steps or keep as is #}
    {% include "workflows/components/how_it_works_widget.html" with steps="generic" %}
</div>

<!-- Processing Status Component - KEEP THIS -->
{# CUSTOMIZE: Change status messages to match your agent's processing #}
{% include "workflows/components/processing_status.html" with status_title="Processing your request..." status_text="Please wait while we generate your content." %}

<!-- Results Component - KEEP THIS -->
{# CUSTOMIZE: Change results_title to match your agent's output #}
{% include "workflows/components/results_container.html" with results_title="Generated Results" %}
{% endblock %}

{% block extra_js %}
<script src="{% static 'js/workflows-core.js' %}?v={{ timestamp }}"></script>
{# CUSTOMIZE: Add agent-specific JavaScript file if needed #}
{# <script src="{% static 'js/your-agent.js' %}?v={{ timestamp }}"></script> #}

{# CUSTOMIZE: Add agent-specific JavaScript inline if needed #}
<script>
// Agent-specific JavaScript goes here if needed
// You have access to all WorkflowsCore functions:
// - WorkflowsCore.showToast(message, type)
// - WorkflowsCore.showProcessing(title)
// - WorkflowsCore.showResults(content, title)
// - WorkflowsCore.copyToClipboard(text, message)
// - WorkflowsCore.downloadAsFile(content, filename, message)
// - And many more...

document.addEventListener('DOMContentLoaded', function() {
    // Initialize your agent-specific functionality here
    console.log('YOUR_AGENT_SLUG template loaded');
    
    // Example: Handle form submission
    const form = document.getElementById('agentForm');
    if (form) {
        form.addEventListener('submit', function(e) {
            e.preventDefault();
            
            // Show processing
            WorkflowsCore.showProcessing('Processing your request...');
            
            // Add your form processing logic here
            // For example: validate fields, make API calls, etc.
            
            // Example: Show results after processing
            setTimeout(() => {
                WorkflowsCore.showResults(
                    '<h3>Sample Results</h3><p>Your processing results would appear here.</p>',
                    'Generated Results'
                );
            }, 3000);
        });
    }
});
</script>
{% endblock %}