{% extends "_layout.html" %}

{% block content %}
<div class="max-w-4xl mx-auto p-4">
    <h1 class="text-2xl font-bold mb-4">Import/Export Data</h1>

    <!-- Import Data Section -->
    <div class="bg-white p-6 rounded-lg shadow-md mb-6">
        <h2 class="text-lg font-semibold mb-4">Import Data</h2>
        <form method="POST" action="{{ url_for('main.manage_data') }}" enctype="multipart/form-data">
            <label for="file" class="block text-sm font-medium text-gray-700 mb-2">Upload CSV File</label>
            <input type="file" name="file" id="file"
                class="w-full p-3 border border-gray-300 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
            <button type="submit"
                class="mt-4 bg-blue-600 text-white px-6 py-2 rounded-lg shadow-md hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500">
                Import Data
            </button>
        </form>
    </div>

    <!-- Export Data Section -->
    <div class="bg-white p-6 rounded-lg shadow-md">
        <h2 class="text-lg font-semibold mb-4">Export Data</h2>
        <a href="{{ url_for('main.export_data') }}"
            class="bg-green-600 text-white px-6 py-2 rounded-lg shadow-md hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500">
            Download CSV
        </a>
    </div>
</div>
{% endblock %}