{% extends "base.html" %}
{% block title %}Website Audits - Hermetic Suite{% endblock %}
{% block content %}
<div class="page-header">
    <div class="page-title">
        <h1 class="icon" id="security">Website Audits</h1>
        <p>Run website audits against domains and URLs</p>
    </div>
</div>

<div class="card">
    <div class="card-header">
        <h3>New Website Audit</h3>
    </div>
    <div class="card-body">
        <form action="{{ url_for('website_audit.run_test') }}" method="POST" id="security-test-form">
            <div class="form-row">
                <div class="form-group" style="flex: 2;">
                    <label for="target_url">Target URL</label>
                    <input type="text" id="target_url" name="target_url" 
                        placeholder="https://example.com or https://example.com/v2/?param=value"
                        value="{{ request.args.get('url', '') }}" required>
                    <small class="text-muted">Enter a full URL or select a domain below</small>
                </div>
                <div class="form-group">
                    <label for="domain_select">Or Select Domain</label>
                    <select id="domain_select" name="domain_id" onchange="selectDomain(this)">
                        <option value="">-- Select Domain --</option>
                        {% for domain in domains %}
                        <option value="{{ domain.id }}" data-url="https://{{ domain.name }}">{{ domain.name }}</option>
                        {% endfor %}
                    </select>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label for="comparison_server">Filesystem Comparison Server (Optional)</label>
                    <select id="comparison_server" name="comparison_server_id">
                        <option value="">-- None --</option>
                        {% for server in servers %}
                        {% if server.ssh_enabled %}
                        <option value="{{ server.id }}">{{ server.ip_address }} - {{ server.hostname or 'unnamed' }}</option>
                        {% endif %}
                        {% endfor %}
                    </select>
                    <small class="text-muted">SSH into this server to compare what exists vs what's accessible</small>
                </div>
                <div class="form-group">
                    <label for="document_root">Document Root</label>
                    <input type="text" id="document_root" name="document_root" 
                        placeholder="/var/www/domains/example.com"
                        value="/var/www/domains/">
                    <small class="text-muted">Path on server where website files are located</small>
                </div>
            </div>
            
            <h4 style="margin-top: 1.5rem;">Test Options</h4>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_ssl" checked>
                        SSL/TLS Audit
                    </label>
                    <small class="text-muted">Check certificate, protocols, ciphers</small>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_headers" checked>
                        Security Headers
                    </label>
                    <small class="text-muted">Check for missing security headers</small>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_exposure" checked>
                        File Exposure
                    </label>
                    <small class="text-muted">Check for exposed sensitive files</small>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_traversal" checked>
                        Path Traversal
                    </label>
                    <small class="text-muted">Test for directory traversal vulnerabilities</small>
                </div>
            </div>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="crawl_enabled" checked>
                        Crawl Site
                    </label>
                    <small class="text-muted">Discover pages and forms automatically</small>
                </div>
                <div class="form-group">
                    <label for="max_pages">Max Pages to Crawl</label>
                    <input type="number" id="max_pages" name="max_pages" value="50" min="1" max="500">
                </div>
                <div class="form-group">
                    <label for="rate_limit">Rate Limit (seconds)</label>
                    <input type="number" id="rate_limit" name="rate_limit" value="0.5" min="0.1" max="5" step="0.1">
                </div>
            </div>
            
            <h4 style="margin-top: 1.5rem;">Form Testing</h4>
            <p class="text-muted">Test discovered forms with different types of data</p>
            
            <div class="form-row">
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_forms_valid">
                        Valid Data
                    </label>
                    <small class="text-muted">Submit forms with valid test data</small>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_forms_missing">
                        Missing Data
                    </label>
                    <small class="text-muted">Submit empty forms to test required field validation</small>
                </div>
                <div class="form-group">
                    <label class="checkbox-label">
                        <input type="checkbox" name="test_forms_invalid">
                        Invalid Data
                    </label>
                    <small class="text-muted">Submit forms with malformed/malicious data</small>
                </div>
            </div>
            
            <div style="margin-top: 1.5rem;">
                <button type="submit" class="btn btn-primary">🚀 Run Website Audit</button>
            </div>
        </form>
    </div>
</div>

{% if tests %}
<div class="card" style="margin-top: 2rem;">
    <div class="card-header">
        <h3>Recent Website Audits</h3>
    </div>
    <div class="card-body">
        <table class="table">
            <thead>
                <tr>
                    <th>Target</th>
                    <th>Status</th>
                    <th>Results</th>
                    <th>Duration</th>
                    <th>Run By</th>
                    <th>Date</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for test in tests %}
                <tr>
                    <td>
                        <a href="{{ test.target_url }}" target="_blank">{{ test.target_domain }}</a>
                    </td>
                    <td>
                        {% if test.status == 'completed' %}
                        <span class="badge badge-success">Completed</span>
                        {% elif test.status == 'running' %}
                        <span class="badge badge-warning">Running</span>
                        {% elif test.status == 'failed' %}
                        <span class="badge badge-danger">Failed</span>
                        {% else %}
                        <span class="badge badge-secondary">{{ test.status }}</span>
                        {% endif %}
                    </td>
                    <td>
                        {% if test.status == 'completed' %}
                        <span class="badge badge-success">{{ test.results_passed }} passed</span>
                        {% if test.results_failed > 0 %}
                        <span class="badge badge-danger">{{ test.results_failed }} failed</span>
                        {% endif %}
                        {% if test.results_warnings > 0 %}
                        <span class="badge badge-warning">{{ test.results_warnings }} warnings</span>
                        {% endif %}
                        {% else %}
                        -
                        {% endif %}
                    </td>
                    <td>{{ test.duration_seconds or '-' }}s</td>
                    <td>{{ test.created_by or '-' }}</td>
                    <td>{{ test.created_at.strftime('%Y-%m-%d %H:%M') }}</td>
                    <td>
                        <a href="{{ url_for('website_audit.test_detail', test_id=test.id) }}" class="btn btn-sm">View</a>
                        {% if test.report_file %}
                        <a href="{{ url_for('website_audit.download_report', test_id=test.id) }}" class="btn btn-sm btn-secondary">Download</a>
                        {% endif %}
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
</div>
{% endif %}

<!-- Form Field Values Section -->
<div class="card" style="margin-top: 2rem;">
    <div class="card-header" style="cursor: pointer;" onclick="toggleSection('field-values-section')">
        <h3>
            <span id="field-values-toggle">▶</span> Form Field Values
            <span class="badge badge-secondary" style="margin-left: 0.5rem;">{{ field_values|length }} configured</span>
        </h3>
    </div>
    <div id="field-values-section" class="card-body" style="display: none;">
        <p class="text-muted">
            Configure values for form fields. When testing forms, these values will be used for matching field names.
            Use wildcards like <code>{5}</code> for 5 random characters, <code>{num:4}</code> for 4 digits, or <code>{alpha:3}</code> for 3 letters.
        </p>
        
        <!-- Add new field value -->
        <form action="{{ url_for('website_audit.add_field_value') }}" method="POST" style="margin-bottom: 1.5rem; padding-top: 1rem;">
            <h4 style="margin-top: 0;">Add Field Value</h4>
            <div class="form-row">
                <div class="form-group">
                    <label for="field_name">Field Name</label>
                    <input type="text" id="field_name" name="field_name" placeholder="e.g., zip, email, phone" required>
                    <small class="text-muted">The name attribute of the form field</small>
                </div>
                <div class="form-group" style="flex: 2;">
                    <label for="field_values_input">Values (comma-separated)</label>
                    <input type="text" id="field_values_input" name="field_values" placeholder="e.g., 90210, 10001, 33101" required>
                    <small class="text-muted">Multiple values = random selection. Use {5} for random chars.</small>
                </div>
            </div>
            <div class="form-group" style="flex: 0; align-self: flex-end;">
                <button type="submit" class="btn btn-primary">Add</button>
            </div>
        </form>
        
        <!-- Existing field values -->
        {% if field_values %}
        <table class="table" style="border: 1px solid var(--border); border-radius: 8px; border-collapse: initial;">
            <thead>
                <tr>
                    <th>Field Name</th>
                    <th>Values</th>
                    <th>Actions</th>
                </tr>
            </thead>
            <tbody>
                {% for fv in field_values %}
                <tr>
                    <td><code>{{ fv.field_name }}</code></td>
                    <td>
                        {% for val in fv.values_list %}
                        <span class="badge badge-secondary" style="margin-right: 0.25rem;">{{ val }}</span>
                        {% endfor %}
                    </td>
                    <td>
                        <button type="button" class="btn btn-sm btn-secondary" 
                            onclick="showEditFieldModal({{ fv.id }}, '{{ fv.field_name }}', '{{ fv.field_values | e }}')">Edit</button>
                        <form action="{{ url_for('website_audit.delete_field_value', field_id=fv.id) }}" method="POST" style="display: inline;">
                            <button type="submit" class="btn btn-sm btn-danger" onclick="return confirm('Delete this field value?')">Delete</button>
                        </form>
                    </td>
                </tr>
                {% endfor %}
            </tbody>
        </table>
        {% else %}
        <p class="empty-state">No field values configured yet. Add form fields above to enable form testing.</p>
        {% endif %}
        
        <!-- Unconfigured fields from recent tests -->
        {% if unconfigured_fields %}
        <div style="margin-top: 1.5rem; padding: 1rem; background: var(--bg-tertiary); border-radius: 8px;">
            <h4 style="margin-top: 0; color: var(--warning);">⚠️ Unconfigured Fields Found</h4>
            <p class="text-muted">These fields were discovered in recent tests but have no configured values. Click to add:</p>
            <div style="display: flex; flex-wrap: wrap; gap: 0.5rem;">
                {% for field in unconfigured_fields %}
                <span class="badge badge-warning" style="font-size: 0.9em; cursor: pointer;" 
                    onclick="selectUnconfiguredField('{{ field }}')" 
                    title="Click to add values for this field">{{ field }}</span>
                {% endfor %}
            </div>
        </div>
        {% endif %}
    </div>
</div>

<!-- Edit Field Modal -->
<div id="edit-field-modal" class="modal" style="display: none;">
    <div class="modal-content">
        <div class="modal-header">
            <h3>Edit Field Value</h3>
            <button type="button" class="modal-close" onclick="closeModal('edit-field-modal')">&times;</button>
        </div>
        <form id="edit-field-form" method="POST">
            <div class="modal-body">
                <div class="form-group">
                    <label for="edit_field_name">Field Name</label>
                    <input type="text" id="edit_field_name" name="field_name" required>
                </div>
                <div class="form-group">
                    <label for="edit_field_values">Values (comma-separated)</label>
                    <textarea id="edit_field_values" name="field_values" rows="3" required></textarea>
                    <small class="text-muted">Use {5} for 5 random chars, {num:4} for 4 digits, {alpha:3} for 3 letters</small>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" onclick="closeModal('edit-field-modal')">Cancel</button>
                <button type="submit" class="btn btn-primary">Save Changes</button>
            </div>
        </form>
    </div>
</div>

<script>
function selectDomain(select) {
    var option = select.options[select.selectedIndex];
    var url = option.getAttribute('data-url');
    if (url) {
        document.getElementById('target_url').value = url;
        // Auto-fill document root
        var domainName = option.text;
        document.getElementById('document_root').value = '/var/www/domains/' + domainName + '/';
    }
}

function toggleSection(sectionId) {
    var section = document.getElementById(sectionId);
    var toggle = document.getElementById(sectionId.replace('-section', '-toggle'));
    if (section.style.display === 'none') {
        section.style.display = 'block';
        toggle.textContent = '▼';
    } else {
        section.style.display = 'none';
        toggle.textContent = '▶';
    }
}

function selectUnconfiguredField(fieldName) {
    // Expand the section if collapsed
    var section = document.getElementById('field-values-section');
    var toggle = document.getElementById('field-values-toggle');
    if (section.style.display === 'none') {
        section.style.display = 'block';
        toggle.textContent = '▼';
    }
    
    // Fill in the field name
    document.getElementById('field_name').value = fieldName;
    
    // Focus the values input
    document.getElementById('field_values_input').focus();
    
    // Scroll to the add form
    document.getElementById('field_name').scrollIntoView({ behavior: 'smooth', block: 'center' });
}

function showEditFieldModal(fieldId, fieldName, fieldValues) {
    document.getElementById('edit-field-form').action = '/website-audit/field-values/' + fieldId + '/edit';
    document.getElementById('edit_field_name').value = fieldName;
    document.getElementById('edit_field_values').value = fieldValues;
    document.getElementById('edit-field-modal').style.display = 'flex';
}

function closeModal(modalId) {
    document.getElementById(modalId).style.display = 'none';
}

// Close modal when clicking outside
window.onclick = function(event) {
    if (event.target.classList.contains('modal')) {
        event.target.style.display = 'none';
    }
}
</script>
{% endblock %}