{% extends "base.html" %}
{% set active_page = 'docs' %}

{% block title %}Documentation - Ursa Customer Portal{% endblock %}

{% block content %}
<div class="container">
    <div class="page-header">
        <h1 class="page-title">Documentation</h1>
        <p class="page-subtitle">Learn how to use the Ursa genomics processing platform</p>
    </div>

    <div class="grid" style="grid-template-columns: 250px 1fr; gap: var(--spacing-xl);">
        <!-- Sidebar Navigation -->
        <div class="docs-sidebar">
            <nav class="docs-nav">
                <h4>Getting Started</h4>
                <ul>
                    <li><a href="#overview" class="active">Overview</a></li>
                    <li><a href="#quick-start">Quick Start Guide</a></li>
                    <li><a href="#concepts">Key Concepts</a></li>
                </ul>
                <h4>Worksets</h4>
                <ul>
                    <li><a href="#creating-worksets">Creating Worksets</a></li>
                    <li><a href="#monitoring">Monitoring Progress</a></li>
                    <li><a href="#results">Accessing Results</a></li>
                </ul>
                <h4>File Management</h4>
                <ul>
                    <li><a href="#file-registry">File Registry</a></li>
                    <li><a href="#filesets">File Sets</a></li>
                    <li><a href="#manifests">Manifests</a></li>
                </ul>
                <h4>UI Guide</h4>
                <ul>
                    <li><a href="#dashboard">Dashboard</a></li>
                    <li><a href="#file-registry-ui">File Registry UI</a></li>
                    <li><a href="#worksets-ui">Worksets UI</a></li>
                    <li><a href="#usage-tracking">Usage & Costs</a></li>
                </ul>
                <h4>API Reference</h4>
                <ul>
                    <li><a href="/docs" target="_blank">OpenAPI Docs</a></li>
                    <li><a href="#api-auth">Authentication</a></li>
                </ul>
            </nav>
        </div>

        <!-- Main Content -->
        <div class="docs-content">
            <section id="overview" class="docs-section">
                <h2>Overview</h2>
                <p>Ursa is a cloud-based genomics processing platform that enables you to run bioinformatics pipelines at scale. The platform handles:</p>
                <ul>
                    <li><strong>Workset Management</strong> - Submit, monitor, and manage analysis jobs</li>
                    <li><strong>File Registry</strong> - Track and organize your sequencing data files</li>
                    <li><strong>Pipeline Execution</strong> - Run germline, somatic, RNA-seq, and other analyses</li>
                    <li><strong>Cost Tracking</strong> - Monitor compute and storage costs in real-time</li>
                </ul>
            </section>

            <section id="quick-start" class="docs-section">
                <h2>Quick Start Guide</h2>
                <div class="card" style="background: linear-gradient(135deg, #1a3a4a, #0d2633);">
                    <h4 style="color: #fff; margin-top: 0;">1. Register Your Files</h4>
                    <p>Navigate to <a href="/portal/files" class="text-accent">Files</a> and link your S3 bucket or upload files directly.</p>
                    
                    <h4 style="color: #fff;">2. Create a File Set</h4>
                    <p>Group related files (e.g., paired-end reads for a sample) into a <a href="/portal/files/filesets" class="text-accent">File Set</a>.</p>
                    
                    <h4 style="color: #fff;">3. Submit a Workset</h4>
                    <p>Go to <a href="/portal/worksets/new" class="text-accent">Submit New Workset</a>, select your file set, choose a pipeline, and submit.</p>
                    
                    <h4 style="color: #fff;">4. Monitor Progress</h4>
                    <p>Track your workset status on the <a href="/portal" class="text-accent">Dashboard</a> or <a href="/portal/worksets" class="text-accent">Worksets</a> page.</p>
                </div>
            </section>

            <section id="concepts" class="docs-section">
                <h2>Key Concepts</h2>
                <div class="grid grid-2">
                    <div class="card">
                        <h4><i class="fas fa-folder-open text-accent"></i> Workset</h4>
                        <p>A batch of analysis inputs processed together through a pipeline. Contains one or more samples.</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-layer-group text-accent"></i> File Set</h4>
                        <p>A logical grouping of files with shared metadata (e.g., all files for a biosample).</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-file-alt text-accent"></i> Manifest</h4>
                        <p>A TSV file (stage_samples.tsv) that defines sample metadata and file mappings.</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-dna text-accent"></i> Pipeline</h4>
                        <p>A bioinformatics workflow (germline, somatic, RNA-seq, etc.) that processes your data.</p>
                    </div>
                </div>
            </section>

            <section id="creating-worksets" class="docs-section">
                <h2>Creating Worksets</h2>
                <p>There are several ways to create a workset:</p>
                <ol>
                    <li><strong>From File Set</strong> (Recommended) - Select a pre-configured file set</li>
                    <li><strong>Upload Files</strong> - Upload FASTQ files directly</li>
                    <li><strong>S3 Path</strong> - Point to existing data in S3</li>
                    <li><strong>Manifest Upload</strong> - Upload a stage_samples.tsv file</li>
                </ol>
            </section>

            <section id="dashboard" class="docs-section">
                <h2>Dashboard Guide</h2>
                <p>The Dashboard provides a quick overview of your account activity and status:</p>
                <div class="grid grid-2 gap-lg">
                    <div class="card">
                        <h4><i class="fas fa-spinner text-accent"></i> Workset Status Tiles</h4>
                        <p>View counts of worksets in different states: In Progress, Ready/Queued, Completed, and Errors. Click any tile to filter worksets by status.</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-file-alt text-accent"></i> File Statistics</h4>
                        <p>See your registered file count and total storage used. Click to navigate to the File Registry.</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-chart-line text-accent"></i> Cost Tracking</h4>
                        <p>Monitor your monthly costs and 30-day cost breakdown. Click to view detailed usage analytics.</p>
                    </div>
                    <div class="card">
                        <h4><i class="fas fa-history text-accent"></i> Activity Chart</h4>
                        <p>View processing activity over the last 30 days with metrics for submitted, completed, and failed worksets.</p>
                    </div>
                </div>
            </section>

            <section id="file-registry-ui" class="docs-section">
                <h2>File Registry UI</h2>
                <p>The File Registry helps you manage and organize your genomics data files.</p>
                <h4>Search & Filtering</h4>
                <p>Use the search bar to find files by filename, sample ID, or subject ID. Click the "Advanced" button to access additional filters:</p>
                <ul>
                    <li><strong>Format</strong> - Filter by file type (FASTQ, BAM, CRAM, VCF)</li>
                    <li><strong>Sample Type</strong> - Filter by sample type (Blood, Saliva, Tissue, etc.)</li>
                    <li><strong>Subject ID</strong> - Find all files for a specific subject</li>
                    <li><strong>Biosample ID</strong> - Find files for a specific biosample</li>
                    <li><strong>Tags</strong> - Filter by custom tags</li>
                    <li><strong>Sequencing Platform</strong> - Filter by sequencing platform</li>
                    <li><strong>Date Range</strong> - Filter by registration date</li>
                </ul>
                <h4>File Registration Methods</h4>
                <p>Register files using one of three methods:</p>
                <ol>
                    <li><strong>Single File</strong> - Register one file with full metadata</li>
                    <li><strong>Bulk Import</strong> - Upload a CSV/TSV file with multiple files and metadata</li>
                    <li><strong>Auto-Discover</strong> - Scan a linked S3 bucket to automatically discover and register files</li>
                </ol>
                <h4>File Detail Page</h4>
                <p>Click on any file to view detailed information including:</p>
                <ul>
                    <li>File metadata (size, format, checksum)</li>
                    <li>Subject and biosample information</li>
                    <li>Sequencing details (platform, instrument, run date)</li>
                    <li>Tags and file sets</li>
                    <li>Workset history</li>
                </ul>
                <p>From the detail page, you can:</p>
                <ul>
                    <li><strong>Add Tags</strong> - Click "Add Tag" to add custom tags for organization</li>
                    <li><strong>Find Similar Files</strong> - Discover other files from the same subject</li>
                    <li><strong>View Subject's Files</strong> - See all files registered for a subject</li>
                </ul>
            </section>

            <section id="worksets-ui" class="docs-section">
                <h2>Worksets UI</h2>
                <p>The Worksets page allows you to create, monitor, and manage analysis jobs.</p>
                <h4>Creating a Workset</h4>
                <p>Click "Submit New Workset" to create a new analysis job. You can:</p>
                <ul>
                    <li>Select files from your File Registry</li>
                    <li>Upload FASTQ files directly</li>
                    <li>Provide an S3 path to existing data</li>
                    <li>Upload a manifest file (stage_samples.tsv)</li>
                </ul>
                <h4>Monitoring Worksets</h4>
                <p>The Worksets list shows all your analysis jobs with their current status:</p>
                <ul>
                    <li><strong>READY</strong> - Queued and waiting to start</li>
                    <li><strong>IN_PROGRESS</strong> - Currently running</li>
                    <li><strong>COMPLETE</strong> - Successfully finished</li>
                    <li><strong>ERROR</strong> - Failed with an error</li>
                </ul>
                <p>Click on any workset to view detailed information, logs, and results.</p>
            </section>

            <section id="usage-tracking" class="docs-section">
                <h2>Usage & Cost Tracking</h2>
                <p>The Usage page provides detailed insights into your compute and storage costs.</p>
                <h4>Cost Breakdown</h4>
                <p>View your costs broken down by:</p>
                <ul>
                    <li><strong>Compute</strong> - EC2 instance costs for running worksets</li>
                    <li><strong>Storage</strong> - S3 storage costs for your data</li>
                    <li><strong>Data Transfer</strong> - Costs for data egress</li>
                    <li><strong>Other</strong> - Additional AWS service costs</li>
                </ul>
                <h4>Daily Cost Tracking</h4>
                <p>View your daily costs over the last 30 days to identify trends and optimize spending.</p>
            </section>

            <section id="api-auth" class="docs-section">
                <h2>API Authentication</h2>
                <p>The Ursa API supports two authentication methods:</p>
                <div class="card">
                    <h4>JWT Token (Recommended)</h4>
                    <p>Include your JWT token in the Authorization header:</p>
                    <pre style="background: #0d1a22; padding: var(--spacing-md); border-radius: var(--radius-md); overflow-x: auto;"><code>Authorization: Bearer &lt;your-jwt-token&gt;</code></pre>
                </div>
                <div class="card">
                    <h4>API Key</h4>
                    <p>Generate an API key from your <a href="/portal/account" class="text-accent">Account Settings</a> and include it in requests:</p>
                    <pre style="background: #0d1a22; padding: var(--spacing-md); border-radius: var(--radius-md); overflow-x: auto;"><code>X-API-Key: &lt;your-api-key&gt;</code></pre>
                </div>
            </section>

            <div class="card mt-xl" style="background: #1a2a33; text-align: center;">
                <h3 style="margin-top: 0;">Need Help?</h3>
                <p class="text-muted">Can't find what you're looking for? Contact our support team.</p>
                <div class="d-flex gap-md justify-center">
                    <a href="mailto:John@dyly.bio" class="btn btn-primary">
                        <i class="fas fa-envelope"></i> Email Support
                    </a>
                    <a href="/portal/support" class="btn btn-outline">
                        <i class="fas fa-question-circle"></i> Support Page
                    </a>
                </div>
                <p style="margin-top: var(--spacing-lg); font-size: 0.9rem;">
                    <strong>Email:</strong> <a href="mailto:John@dyly.bio" style="color: var(--color-accent);">John@dyly.bio</a>
                </p>
            </div>
        </div>
    </div>
</div>
{% endblock %}