{{#> main currentPage="operator" breadcrumbs=breadcrumbs}}

<article class="operator-page">
    <!-- Operator Header -->
    <header class="operator-header">
        <div class="operator-title-section">
            <div class="operator-badges">
                <span class="category-badge category-{{operator.category}}">{{operator.category}}</span>
                {{#if operator.subcategory}}
                <span class="subcategory-badge">{{operator.subcategory}}</span>
                {{/if}}
            </div>
            
            <h1 class="operator-title">{{operator.name}}</h1>
            
            {{#if operator.displayName}}
            <h2 class="operator-display-name">{{operator.displayName}}</h2>
            {{/if}}
            
            {{#if operator.description}}
            <p class="operator-description">{{operator.description}}</p>
            {{/if}}
        </div>
        
        <div class="operator-meta">
            {{#if operator.parameterCount}}
            <div class="meta-item">
                <span class="meta-label">Parameters:</span>
                <span class="meta-value">{{operator.parameterCount}}</span>
            </div>
            {{/if}}
            
            {{#if operator.lastUpdated}}
            <div class="meta-item">
                <span class="meta-label">Last Updated:</span>
                <span class="meta-value">{{operator.lastUpdated}}</span>
            </div>
            {{/if}}
        </div>
    </header>
    
    <!-- Operator Content -->
    <div class="operator-content">
        <div class="content-main">
            <!-- Summary -->
            {{#if operator.summary}}
            <section class="content-section">
                <h3 class="section-title">Summary</h3>
                <div class="section-content">
                    <p>{{operator.summary}}</p>
                </div>
            </section>
            {{/if}}
            
            <!-- Parameters -->
            {{#if operator.parameters}}
            {{#if (notEmpty operator.parameters)}}
            <section class="content-section parameters-section">
                <h3 class="section-title">Parameters</h3>
                <div class="section-content">
                    <div class="parameters-list">
                        {{#each operator.parameters}}
                        <div class="parameter-item">
                            <div class="parameter-header">
                                <h4 class="parameter-name">{{name}}</h4>
                                <div class="parameter-badges">
                                    {{#if type}}
                                    <span class="type-badge type-{{type}}">{{formatParamType type}}</span>
                                    {{/if}}
                                    {{#if group}}
                                    <span class="group-badge">{{group}}</span>
                                    {{/if}}
                                </div>
                            </div>
                            
                            {{#if description}}
                            <p class="parameter-description">{{description}}</p>
                            {{/if}}
                            
                            <div class="parameter-details">
                                {{#if defaultValue}}
                                <div class="detail-item">
                                    <span class="detail-label">Default:</span>
                                    <code class="detail-value">{{defaultValue}}</code>
                                </div>
                                {{/if}}
                                
                                {{#if range}}
                                <div class="detail-item">
                                    <span class="detail-label">Range:</span>
                                    <span class="detail-value">
                                        {{#if range.min}}{{range.min}}{{else}}-∞{{/if}} to 
                                        {{#if range.max}}{{range.max}}{{else}}∞{{/if}}
                                    </span>
                                </div>
                                {{/if}}
                                
                                {{#if units}}
                                <div class="detail-item">
                                    <span class="detail-label">Units:</span>
                                    <span class="detail-value">{{units}}</span>
                                </div>
                                {{/if}}
                            </div>
                        </div>
                        {{/each}}
                    </div>
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Code Examples -->
            {{#if operator.codeExamples}}
            {{#if (notEmpty operator.codeExamples)}}
            <section class="content-section examples-section">
                <h3 class="section-title">Code Examples</h3>
                <div class="section-content">
                    {{#each operator.codeExamples}}
                    <div class="code-example">
                        {{#if title}}
                        <h4 class="example-title">{{title}}</h4>
                        {{/if}}
                        
                        {{#if description}}
                        <p class="example-description">{{description}}</p>
                        {{/if}}
                        
                        <pre class="code-block"><code>{{code}}</code></pre>
                    </div>
                    {{/each}}
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Python Examples -->
            {{#if operator.pythonExamples}}
            {{#if (notEmpty operator.pythonExamples)}}
            <section class="content-section python-section">
                <h3 class="section-title">Python Examples</h3>
                <div class="section-content">
                    {{#each operator.pythonExamples}}
                    <div class="python-example">
                        {{#if title}}
                        <h4 class="example-title">{{title}}</h4>
                        {{/if}}
                        
                        {{#if description}}
                        <p class="example-description">{{description}}</p>
                        {{/if}}
                        
                        <pre class="code-block python"><code>{{code}}</code></pre>
                    </div>
                    {{/each}}
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Expressions -->
            {{#if operator.expressions}}
            {{#if (notEmpty operator.expressions)}}
            <section class="content-section expressions-section">
                <h3 class="section-title">Expressions</h3>
                <div class="section-content">
                    <div class="expressions-list">
                        {{#each operator.expressions}}
                        <div class="expression-item">
                            <code class="expression-code">{{expression}}</code>
                            {{#if description}}
                            <p class="expression-description">{{description}}</p>
                            {{/if}}
                        </div>
                        {{/each}}
                    </div>
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Tips -->
            {{#if operator.tips}}
            {{#if (notEmpty operator.tips)}}
            <section class="content-section tips-section">
                <h3 class="section-title">Tips & Best Practices</h3>
                <div class="section-content">
                    <ul class="tips-list">
                        {{#each operator.tips}}
                        <li class="tip-item">{{this}}</li>
                        {{/each}}
                    </ul>
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Warnings -->
            {{#if operator.warnings}}
            {{#if (notEmpty operator.warnings)}}
            <section class="content-section warnings-section">
                <h3 class="section-title">Warnings & Considerations</h3>
                <div class="section-content">
                    <ul class="warnings-list">
                        {{#each operator.warnings}}
                        <li class="warning-item">{{this}}</li>
                        {{/each}}
                    </ul>
                </div>
            </section>
            {{/if}}
            {{/if}}
            
            <!-- Keywords/Tags -->
            {{#if operator.keywords}}
            {{#if (notEmpty operator.keywords)}}
            <section class="content-section keywords-section">
                <h3 class="section-title">Keywords</h3>
                <div class="section-content">
                    <div class="keywords-list">
                        {{#each operator.keywords}}
                        <a href="/search?q={{this}}" class="keyword-tag">{{this}}</a>
                        {{/each}}
                    </div>
                </div>
            </section>
            {{/if}}
            {{/if}}
        </div>
        
        <!-- Sidebar -->
        <aside class="content-sidebar">
            <!-- Quick Actions -->
            <div class="sidebar-section">
                <h3 class="sidebar-title">Quick Actions</h3>
                <div class="sidebar-content">
                    <a href="/search?q={{operator.name}}" class="sidebar-link">
                        <svg class="link-icon" viewBox="0 0 24 24">
                            <path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/>
                        </svg>
                        Search Similar
                    </a>
                    
                    <a href="/{{operator.category}}" class="sidebar-link">
                        <svg class="link-icon" viewBox="0 0 24 24">
                            <path d="M4 6H2v14c0 1.1.9 2 2 2h14v-2H4V6zm16-4H8c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2z"/>
                        </svg>
                        Browse {{operator.category}}
                    </a>
                    
                    <a href="/api/operator/{{operator.name}}" class="sidebar-link" target="_blank">
                        <svg class="link-icon" viewBox="0 0 24 24">
                            <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
                        </svg>
                        API Data
                    </a>
                </div>
            </div>
            
            <!-- Navigation -->
            <div class="sidebar-section">
                <h3 class="sidebar-title">Navigation</h3>
                <div class="sidebar-content">
                    <a href="#parameters" class="nav-link">Parameters</a>
                    {{#if operator.codeExamples}}
                    <a href="#examples" class="nav-link">Examples</a>
                    {{/if}}
                    {{#if operator.tips}}
                    <a href="#tips" class="nav-link">Tips</a>
                    {{/if}}
                </div>
            </div>
        </aside>
    </div>
    
    <!-- Related Operators -->
    {{#if related}}
    {{#if (notEmpty related)}}
    <section class="related-section">
        <div class="section-header">
            <h3 class="section-title">Related Operators</small>
            <p class="section-subtitle">Other operators you might find useful</p>
        </div>
        
        <div class="related-grid">
            {{#each related}}
            <a href="/{{name}}" class="related-card">
                <div class="card-header">
                    <span class="card-category">{{category}}</span>
                    <span class="card-name">{{name}}</span>
                </div>
                <p class="card-description">{{truncate description 80}}</p>
                {{#if relevanceScore}}
                <div class="card-footer">
                    <span class="relevance-score">Relevance: {{relevanceScore}}</span>
                </div>
                {{/if}}
            </a>
            {{/each}}
        </div>
    </section>
    {{/if}}
    {{/if}}
</article>

{{/main}}