{% extends "layouts/component_preview.twig" %}

{% block title %}Component Preview: {{ component.name }}{% endblock %}

{% block content %}
    {% if error_message %}
        <div class="error-panel">
            <h2>Rendering Error</h2>
            <p><strong>Component:</strong> {{ component.path }}</p>
            <p><strong>Error:</strong> {{ error_message }}</p>
            {% if error_details %}
                <pre>{{ error_details }}</pre>
            {% endif %}
        </div>
    {% else %}
        <div class="component-info-panel">
            <h1>{{ component.name }}</h1>
            <p class="component-description">{{ component.description }}</p>

            <h2>Usage</h2>
            <pre><code>{{ usage.include_example }}</code></pre>

            {% if usage.required_variables or usage.optional_variables %}
                <div class="component-variables">
                    {% if usage.required_variables %}
                        <div>
                            <h4>Required Variables:</h4>
                            <div class="variable-list">
                                {% for variable in usage.required_variables %}
                                    <code>{{ variable }}</code>{% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}

                    {% if usage.optional_variables %}
                        <div>
                            <h4>Optional Variables:</h4>
                            <div class="variable-list">
                                {% for variable in usage.optional_variables %}
                                    <code>{{ variable }}</code>{% if not loop.last %}, {% endif %}
                                {% endfor %}
                            </div>
                        </div>
                    {% endif %}
                </div>
            {% endif %}

            <h2>Component Details</h2>
            <div class="component-meta">
                <p><strong>File:</strong> {{ component.filename }} ({{ component.file_size }} bytes)</p>
                <p><strong>Path:</strong> <code>sites/default/templates/includes/{{ component.path }}</code></p>
                <p><strong>Category:</strong> {{ component.category }}</p>
                <p><strong>Modified:</strong> {{ component.modified_at|date('Y-m-d H:i:s') }}</p>
                <p><strong>Status:</strong>
                    {% if component.is_renderable %}
                        <span style="color: #28a745;">✓ Renderable</span>
                    {% else %}
                        <span style="color: #dc3545;">⚠ Has Issues</span>
                        {% if component.error_message %}
                            - {{ component.error_message }}
                        {% endif %}
                    {% endif %}
                </p>
            </div>
        </div>

        <div class="component-output-panel">
            <h3>Component Preview</h3>
            <div class="component-output">
                {{ component_output|raw }}
            </div>
        </div>
    {% endif %}
{% endblock %}

{% block scripts %}
    <script>
        // Component preview specific JavaScript
        console.log('Component preview loaded:', {
            name: '{{ component.name }}',
            path: '{{ component.path }}',
            renderable: {{ component.is_renderable ? 'true' : 'false' }}
        });

        // Initialize any component-specific functionality
        document.addEventListener('DOMContentLoaded', function() {
            // Check for any forms and add basic styling
            const forms = document.querySelectorAll('.component-output form');
            forms.forEach(function(form) {
                form.addEventListener('submit', function(e) {
                    e.preventDefault();
                    alert('This is a preview - form submission is disabled');
                });
            });

            // Check for any buttons and add preview behavior
            const buttons = document.querySelectorAll('.component-output button:not([type="submit"])');
            buttons.forEach(function(button) {
                button.addEventListener('click', function(e) {
                    e.preventDefault();
                    console.log('Button clicked in component preview:', button.textContent);
                });
            });
        });
    </script>
{% endblock %}