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

{% block content %}
<div class="flex-1 flex flex-col p-6 overflow-auto hide-scrollbar">
    <!-- New export form -->
    <div class="bg-gray-900 rounded-lg p-4 mb-6 max-w-2xl">
        <h2 class="text-lg font-semibold mb-3" data-i18n="new_export">{{ t('new_export') }}</h2>
        <div class="flex gap-3 items-end flex-wrap">
            <div>
                <label class="block text-xs text-gray-400 mb-1" data-i18n="dataset_name">{{ t('dataset_name') }}</label>
                <input id="new-dataset-name" type="text" placeholder="my_robot_dataset"
                       class="bg-gray-800 rounded px-3 py-2 border border-gray-700 w-48">
            </div>
            <div>
                <label class="block text-xs text-gray-400 mb-1" data-i18n="train_ratio">{{ t('train_ratio') }}</label>
                <input id="new-split-ratio" type="number" value="0.9" min="0.5" max="1" step="0.05"
                       class="bg-gray-800 rounded px-3 py-2 border border-gray-700 w-24">
            </div>
            <button onclick="startExport()"
                    class="bg-blue-600 hover:bg-blue-500 text-white px-5 py-2 rounded font-medium">
                <span data-i18n="start_export">{{ t('start_export') }}</span>
            </button>
        </div>
        <p class="text-xs text-gray-500 mt-2">
            Exports all completed episodes by default. You can also select specific episodes from the review page.
        </p>
    </div>

    <!-- Export job list -->
    <div class="bg-gray-900 rounded-lg flex-1 overflow-auto hide-scrollbar">
        <table class="w-full text-sm">
            <thead class="bg-gray-800 text-gray-400 text-left">
                <tr>
                    <th class="px-4 py-2" data-i18n="dataset">{{ t('dataset') }}</th>
                    <th class="px-4 py-2" data-i18n="status">{{ t('status') }}</th>
                    <th class="px-4 py-2" data-i18n="progress">{{ t('progress') }}</th>
                    <th class="px-4 py-2" data-i18n="created">{{ t('created') }}</th>
                    <th class="px-4 py-2" data-i18n="col_actions">{{ t('col_actions') }}</th>
                </tr>
            </thead>
            <tbody id="export-list">
                <tr><td colspan="5" class="text-center text-gray-500 py-8" data-i18n="loading">{{ t('loading') }}</td></tr>
            </tbody>
        </table>
    </div>
</div>

<script src="/static/js/app.js?v={{ asset_version }}"></script>
{% endblock %}