{% extends "base.html" %}

{% block title %}Features - MyWebdav Cloud Storage{% endblock %}

{% block description %}Discover MyWebdav's powerful features: secure storage, WebDAV support, file sharing, and more.{% endblock %}

{% block extra_css %}
<style>
.content-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 4rem 2rem;
}

.page-title {
    font-size: 3rem;
    font-weight: 700;
    color: #1565c0;
    text-align: center;
    margin-bottom: 1rem;
}

.page-subtitle {
    font-size: 1.25rem;
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 2rem;
    margin-top: 2rem;
}

.feature-card {
    background: white;
    border-radius: 8px;
    padding: 2rem;
    border: 2px solid #e0e0e0;
    transition: all 0.3s;
}

.feature-card:hover {
    border-color: #1976d2;
    box-shadow: 0 4px 12px rgba(25, 118, 210, 0.1);
    transform: translateY(-2px);
}

.feature-icon {
    font-size: 2.5rem;
    color: #d32f2f;
    margin-bottom: 1rem;
}

.feature-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: #333;
    margin-bottom: 0.75rem;
}

.feature-description {
    color: #666;
    line-height: 1.6;
}

.feature-list {
    list-style: none;
    padding: 0;
    margin-top: 1rem;
}

.feature-list li {
    padding: 0.5rem 0;
    color: #555;
}

.feature-list li:before {
    content: "✓ ";
    color: #d32f2f;
    font-weight: bold;
    margin-right: 0.5rem;
}

@media (max-width: 768px) {
    .page-title {
        font-size: 2rem;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="content-section">
    <h1 class="page-title">POWERFUL FEATURES</h1>
    <p class="page-subtitle">Everything you need for secure, reliable cloud storage</p>

    <div class="features-grid">
        <div class="feature-card">
            <div class="feature-icon">🔒</div>
            <h2 class="feature-title">Enterprise-Grade Security</h2>
            <p class="feature-description">Your data is protected with industry-leading security measures.</p>
            <ul class="feature-list">
                <li>AES-256 encryption at rest</li>
                <li>TLS 1.3 encryption in transit</li>
                <li>Two-factor authentication (TOTP)</li>
                <li>Regular security audits</li>
                <li>GDPR compliant</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">📁</div>
            <h2 class="feature-title">WebDAV Protocol Support</h2>
            <p class="feature-description">Mount your storage as a network drive on any device.</p>
            <ul class="feature-list">
                <li>Windows, macOS, Linux support</li>
                <li>Standard WebDAV protocol</li>
                <li>Works with native file explorers</li>
                <li>No additional software needed</li>
                <li>Full file system operations</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🔄</div>
            <h2 class="feature-title">File Versioning</h2>
            <p class="feature-description">Never lose important data with automatic version history.</p>
            <ul class="feature-list">
                <li>Automatic version tracking</li>
                <li>Restore previous versions</li>
                <li>Version comparison</li>
                <li>Configurable retention</li>
                <li>No additional cost</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🤝</div>
            <h2 class="feature-title">Sharing & Collaboration</h2>
            <p class="feature-description">Share files securely with team members or external partners.</p>
            <ul class="feature-list">
                <li>Shareable links with expiration</li>
                <li>Password protection</li>
                <li>Access control management</li>
                <li>Share tracking and analytics</li>
                <li>Public and private sharing</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">⚡</div>
            <h2 class="feature-title">High Performance</h2>
            <p class="feature-description">Fast upload and download speeds with global CDN.</p>
            <ul class="feature-list">
                <li>Global edge network</li>
                <li>Parallel upload/download</li>
                <li>Resume interrupted transfers</li>
                <li>Optimized for large files</li>
                <li>Sub-second file access</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🔍</div>
            <h2 class="feature-title">Full-Text Search</h2>
            <p class="feature-description">Find your files instantly with powerful search capabilities.</p>
            <ul class="feature-list">
                <li>Search file names and content</li>
                <li>Filter by type and date</li>
                <li>Advanced query syntax</li>
                <li>Instant results</li>
                <li>Search in shared folders</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🖼️</div>
            <h2 class="feature-title">Media Thumbnails</h2>
            <p class="feature-description">Preview images and videos without downloading.</p>
            <ul class="feature-list">
                <li>Automatic thumbnail generation</li>
                <li>Image preview</li>
                <li>Video thumbnails</li>
                <li>Multiple size options</li>
                <li>Fast loading</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">💰</div>
            <h2 class="feature-title">Pay-As-You-Go Pricing</h2>
            <p class="feature-description">Only pay for what you use with transparent billing.</p>
            <ul class="feature-list">
                <li>No minimum commitment</li>
                <li>$5 per TB per month</li>
                <li>15GB free tier</li>
                <li>Detailed usage tracking</li>
                <li>Monthly invoicing</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🛡️</div>
            <h2 class="feature-title">Data Residency</h2>
            <p class="feature-description">Your data stays in the EU with full GDPR compliance.</p>
            <ul class="feature-list">
                <li>EU-based data centers</li>
                <li>No data transfers outside EU</li>
                <li>GDPR and NIS2 compliant</li>
                <li>ISO 27001 certified</li>
                <li>Full data sovereignty</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">📊</div>
            <h2 class="feature-title">Activity Logging</h2>
            <p class="feature-description">Complete audit trail of all file operations.</p>
            <ul class="feature-list">
                <li>Detailed activity logs</li>
                <li>File access tracking</li>
                <li>User action history</li>
                <li>Compliance reporting</li>
                <li>Export capabilities</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">🔌</div>
            <h2 class="feature-title">API Access</h2>
            <p class="feature-description">Integrate MyWebdav with your applications.</p>
            <ul class="feature-list">
                <li>RESTful API</li>
                <li>OAuth2 authentication</li>
                <li>Comprehensive documentation</li>
                <li>WebDAV protocol support</li>
                <li>Developer-friendly</li>
            </ul>
        </div>

        <div class="feature-card">
            <div class="feature-icon">⭐</div>
            <h2 class="feature-title">Favorites & Organization</h2>
            <p class="feature-description">Organize files your way with folders and favorites.</p>
            <ul class="feature-list">
                <li>Unlimited folder hierarchy</li>
                <li>Star important files</li>
                <li>Quick access favorites</li>
                <li>Drag and drop organization</li>
                <li>Bulk operations</li>
            </ul>
        </div>
    </div>

    <div style="text-align: center; margin-top: 3rem;">
        <a href="/app" class="btn btn-primary" style="font-size: 1.125rem; padding: 1rem 3rem;">Get Started Today</a>
    </div>
</div>
{% endblock %}