{% extends "layout.html" %}
{% block content %}
<div style="max-width: 680px; margin: 4rem auto;">
    <h1 style="margin-bottom: 2rem;">Roadmap</h1>
    <p style="color: var(--text-secondary); margin-bottom: 2rem;">Here is what we are working on regarding the future of OpenTimeTracker.</p>
    
    <div class="card">
        <div style="display: flex; gap: 20px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-dim);">
            <div style="min-width: 100px; font-weight: bold; color: var(--primary-color);">March 2026</div>
            <div>
                <h3 style="margin: 0; font-size: 1.1rem;">Export and Import Data</h3>
                <p style="margin: 5px 0 0; color: var(--text-secondary);">Full control over your data. Migrate easily between instances.</p>
            </div>
        </div>
        
        <div style="display: flex; gap: 20px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-dim);">
            <div style="min-width: 100px; font-weight: bold; color: var(--text-primary);">April 2026</div>
            <div>
                <h3 style="margin: 0; font-size: 1.1rem;">Calendar Sync via WebDAV</h3>
                <p style="margin: 5px 0 0; color: var(--text-secondary);">See your tracked time entries directly in your favorite calendar app.</p>
            </div>
        </div>

        <div style="display: flex; gap: 20px; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-dim);">
            <div style="min-width: 100px; font-weight: bold; color: var(--text-primary);">May 2026</div>
            <div>
                <h3 style="margin: 0; font-size: 1.1rem;">API for Mobile and Desktop Apps</h3>
                <p style="margin: 5px 0 0; color: var(--text-secondary);">Public API documentation to enable community integrations and native clients.</p>
            </div>
        </div>

        <div style="display: flex; gap: 20px;">
            <div style="min-width: 100px; font-weight: bold; color: var(--text-primary);">August 2026</div>
            <div>
                <h3 style="margin: 0; font-size: 1.1rem;">Mobile App for iOS and Android</h3>
                <p style="margin: 5px 0 0; color: var(--text-secondary);">Native experience for tracking your time on the go.</p>
            </div>
        </div>
    </div>
    
    <div style="margin-top: 2rem;">
        <a href="{{ url_for('index') }}" style="color: var(--text-secondary); text-decoration: none;">&larr; Back to Home</a>
    </div>
</div>
{% endblock %}