{{#> main currentPage="touchdesigner"}}

<article class="touchdesigner-overview">
    <!-- Page Header -->
    <header class="page-header">
        <h1 class="page-title">TouchDesigner Documentation</h1>
        <p class="page-subtitle">
            Complete operator reference and workflow documentation for TouchDesigner
        </p>
    </header>
    
    <!-- Overview Section -->
    <section class="overview-section">
        <div class="overview-content">
            <p>
                TouchDesigner is a visual development platform that equips you with the tools you need to create stunning real-time projects and rich user experiences. 
                Whether you're creating interactive media systems, architectural projections, live music visuals, or rapid prototypes for your latest creative impulse.
            </p>
            
            <div class="stats-grid">
                <div class="stat-card">
                    <div class="stat-value">{{stats.totalEntries}}</div>
                    <div class="stat-label">Total Operators</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{stats.totalParameters}}</div>
                    <div class="stat-label">Parameters Documented</div>
                </div>
                <div class="stat-card">
                    <div class="stat-value">{{categories.length}}</div>
                    <div class="stat-label">Operator Categories</div>
                </div>
            </div>
        </div>
    </section>
    
    <!-- Categories Grid -->
    <section class="categories-overview">
        <h2 class="section-title">Operator Categories</h2>
        <p class="section-subtitle">
            TouchDesigner operators are organized into functional categories
        </p>
        
        <div class="categories-grid">
            {{#each categories}}
            <a href="/{{key}}" class="category-overview-card">
                <div class="category-header">
                    <h3 class="category-title">{{name}}</h3>
                    <span class="category-badge">{{key}}</span>
                </div>
                <div class="category-body">
                    <div class="category-count">{{count}} operators</div>
                    <p class="category-desc">
                        {{#ifEquals key 'TOP'}}
                        Process and generate 2D images, textures, and visual effects
                        {{/ifEquals}}
                        {{#ifEquals key 'CHOP'}}
                        Handle time-based data including audio, animation, and control signals
                        {{/ifEquals}}
                        {{#ifEquals key 'SOP'}}
                        Create, modify, and manipulate 3D geometry
                        {{/ifEquals}}
                        {{#ifEquals key 'DAT'}}
                        Work with text, tables, scripts, and structured data
                        {{/ifEquals}}
                        {{#ifEquals key 'MAT'}}
                        Define how 3D surfaces appear when rendered
                        {{/ifEquals}}
                        {{#ifEquals key 'COMP'}}
                        Create user interfaces and manage complex systems
                        {{/ifEquals}}
                        {{#ifEquals key 'POP'}}
                        Simulate dynamic particle systems for effects
                        {{/ifEquals}}
                    </p>
                </div>
                <div class="category-footer">
                    <span class="browse-link">Browse {{key}} operators →</span>
                </div>
            </a>
            {{/each}}
        </div>
    </section>
    
    <!-- Quick Links -->
    <section class="quick-links-section">
        <h2 class="section-title">Quick Links</h2>
        
        <div class="links-grid">
            <a href="/Python" class="link-card">
                <div class="link-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z"/>
                    </svg>
                </div>
                <h3>Python Reference</h3>
                <p>Python scripting documentation and class references</p>
            </a>
            
            <a href="/Release_Notes" class="link-card">
                <div class="link-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M13 7h-2v4H7v2h4v4h2v-4h4v-2h-4V7zm-1-5C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/>
                    </svg>
                </div>
                <h3>Release Notes</h3>
                <p>Latest updates and version history</p>
            </a>
            
            <a href="/search" class="link-card">
                <div class="link-icon">
                    <svg 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>
                </div>
                <h3>Search Documentation</h3>
                <p>Find operators, parameters, and documentation</p>
            </a>
            
            <a href="https://docs.derivative.ca/" class="link-card" target="_blank">
                <div class="link-icon">
                    <svg viewBox="0 0 24 24">
                        <path d="M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z"/>
                    </svg>
                </div>
                <h3>Official Documentation</h3>
                <p>Visit the official TouchDesigner documentation website</p>
            </a>
        </div>
    </section>
</article>

{{/main}}