{% extends "base.html" %}
{% block title %}Export{% endblock %}

{% block content %}
<div class="page-header">
    <h1>Export Data</h1>
    <p class="text-muted">Download posts and mentions as CSV files for analysis.</p>
</div>

<div class="export-grid">
    <!-- Posts Export -->
    <div class="card">
        <h2>Export Posts</h2>
        <p class="text-muted">Download all collected posts from tracked accounts.</p>
        <form action="{{ url_for('export.posts_csv') }}" method="get" class="export-form">
            <div class="form-group">
                <label for="post-account">Filter by Account</label>
                <select id="post-account" name="account" class="form-control">
                    <option value="">All accounts</option>
                    {% for a in accounts %}
                    <option value="{{ a.did }}">{{ a.handle }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="post-since">From date</label>
                    <input type="date" id="post-since" name="since" class="form-control">
                </div>
                <div class="form-group">
                    <label for="post-until">To date</label>
                    <input type="date" id="post-until" name="until" class="form-control">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">
                Download Posts CSV
            </button>
        </form>
    </div>

    <!-- Mentions Export -->
    <div class="card">
        <h2>Export Mentions</h2>
        <p class="text-muted">Download all collected mentions of tracked accounts.</p>
        <form action="{{ url_for('export.mentions_csv') }}" method="get" class="export-form">
            <div class="form-group">
                <label for="mention-account">Filter by Mentioned Account</label>
                <select id="mention-account" name="account" class="form-control">
                    <option value="">All accounts</option>
                    {% for a in accounts %}
                    <option value="{{ a.did }}">{{ a.handle }}</option>
                    {% endfor %}
                </select>
            </div>
            <div class="form-row">
                <div class="form-group">
                    <label for="mention-since">From date</label>
                    <input type="date" id="mention-since" name="since" class="form-control">
                </div>
                <div class="form-group">
                    <label for="mention-until">To date</label>
                    <input type="date" id="mention-until" name="until" class="form-control">
                </div>
            </div>
            <button type="submit" class="btn btn-primary">
                Download Mentions CSV
            </button>
        </form>
    </div>
</div>

<style>
    .export-grid {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        gap: 1.5rem;
        margin-top: 1.5rem;
    }
    .export-form {
        margin-top: 1rem;
    }
    .form-group {
        margin-bottom: 1rem;
    }
    .form-group label {
        display: block;
        margin-bottom: 0.4rem;
        color: #b0b0b0;
        font-size: 0.9rem;
    }
    .form-control {
        width: 100%;
        padding: 0.5rem 0.75rem;
        background: #1a1a2e;
        border: 1px solid #2a2a4a;
        border-radius: 6px;
        color: #e0e0e0;
        font-size: 0.95rem;
    }
    .form-control:focus {
        border-color: #00b4d8;
        outline: none;
    }
    .form-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }
    .export-form .btn {
        margin-top: 0.5rem;
        width: 100%;
    }
</style>
{% endblock %}