<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<body>

<!-- File Upload Content Fragment -->
<div th:fragment="file-upload-content">
    <h2 th:text="#{upload.title}">Import Location Data</h2>
    
    <div th:if="${uploadSuccessMessage}" class="alert alert-success" style="display: block;">
        <span th:text="${uploadSuccessMessage}">File uploaded successfully</span>
    </div>
    <div th:if="${uploadErrorMessage}" class="alert alert-danger" style="display: block;">
        <span th:text="${uploadErrorMessage}">Error message</span>
    </div>
    
    <div class="upload-options">
        <div class="settings-card">
            <h3 th:text="#{upload.gpx.title}">GPX Files</h3>
            <p class="description" th:text="#{upload.gpx.description}">
                Upload GPX files from your GPS devices or tracking apps. GPX files contain waypoints, 
                tracks, and routes with timestamps that can be processed into your location history.
            </p>
            <form id="gpx-upload-form"
                  hx-post="/import/gpx"
                  hx-target="#file-upload"
                  hx-encoding="multipart/form-data">
                <div class="form-group">
                    <input type="file" name="files" accept=".gpx" multiple required>
                </div>
                <button type="submit" class="btn upload-btn" th:text="#{upload.button.gpx}">Upload GPX File</button>
                <div class="spinner" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Processing...</span>
                    </div>
                    <span>Processing ...</span>
                </div>
            </form>
            <progress id='progress-gpx' value='0' max='100' style="display: none"></progress>
        </div>
        <div class="settings-card">
            <h3 th:text="#{upload.geojson.title}">GeoJSON Files</h3>
            <p class="description" th:text="#{upload.geojson.description}">
                Upload GeoJSON files containing Point features with location data. GeoJSON files
                should contain Point geometries with coordinates and optional timestamp properties.
                Supports both single Feature and FeatureCollection formats.
            </p>
            <form id="geojson-upload-form"
                  hx-post="/import/geojson"
                  hx-target="#file-upload"
                  hx-swap="innerHTML"
                  hx-encoding="multipart/form-data">
                <div class="form-group">
                    <input type="file" name="files" accept=".geojson,.json" multiple required>
                </div>
                <button type="submit" class="btn upload-btn" th:text="#{upload.button.geojson}">Upload GeoJSON File</button>
                <div class="spinner" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Processing...</span>
                    </div>
                    <span>Processing ...</span>
                </div>
            </form>
            <progress id='progress-geojson' value='0' max='100' style="display: none"></progress>
        </div>
        <div class="settings-card">
            <h3 th:text="#{upload.google.android.format.title}">📱 Android Timeline (timeline.json)</h3>
            <p><strong>Android:</strong> <span th:text="#{upload.google.new.format.instructions}">From your Android phone: Settings → Location → Location Services → Timeline → Export Timeline</span></p>
            <p class="description" th:text="#{upload.google.android.format.description}">This exports a timeline.json file with your recent location data from Android devices.</p>

            <form id="timeline-android-upload-form"
                  hx-post="/import/google-timeline-android"
                  hx-target="#file-upload"
                  hx-swap="innerHTML"
                  hx-encoding="multipart/form-data">
                <div class="form-group">
                    <input type="file" name="file" accept=".json" required>
                </div>
                <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.timeline.android}">Upload Android Timeline Data</button>
                <div class="spinner" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Processing...</span>
                    </div>
                    <span>Processing ...</span>
                </div>
            </form>
            <progress id='progress-timeline-android' value='0' max='100'  style="display: none"></progress>
        </div>
        <div class="settings-card">
            <h3 th:text="#{upload.google.ios.format.title}">📱 iOS Timeline (timeline.json)</h3>
            <p><strong>iOS:</strong> <span th:text="#{upload.google.new.format.ios.instructions}">From iOS Google Maps: Open Google Maps → Click on your Profile → Settings → Personal content → Export Timeline Data</span></p>
            <p class="description" th:text="#{upload.google.ios.format.description}">This exports a timeline.json file with your recent location data from iOS devices.</p>

            <form id="timeline-ios-upload-form"
                  hx-post="/import/google-timeline-ios"
                  hx-target="#file-upload"
                  hx-swap="innerHTML"
                  hx-encoding="multipart/form-data">
                <div class="form-group">
                    <input type="file" name="file" accept=".json" required>
                </div>
                <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.timeline.ios}">Upload iOS Timeline Data</button>
                <div class="spinner" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Processing...</span>
                    </div>
                    <span>Processing iOS Timeline...</span>
                </div>
            </form>
            <progress id='progress-timeline-ios' value='0' max='100'  style="display: none"></progress>
        </div>
        <div class="settings-card">
            <h3 th:text="#{upload.google.old.format.title}">🌐 Old Format (Records.json)</h3>
            <p th:text="#{upload.google.old.format.instructions}">From Google Takeout: Export your data from takeout.google.com and upload the Records.json file from the Location History folder.</p>
            <p class="description" th:text="#{upload.google.old.format.description}">This contains your complete historical location data.</p>
            <form id="records-upload-form"
                  hx-post="/import/google-records"
                  hx-target="#file-upload"
                  hx-swap="innerHTML"
                  hx-encoding="multipart/form-data">
                <div class="form-group">
                    <input type="file" name="file" accept=".json" required>
                </div>
                <button type="submit" class="btn upload-btn" th:text="#{upload.button.google.records}">Upload Records Data</button>
                <div class="spinner" style="display: none;">
                    <div class="spinner-border" role="status">
                        <span class="sr-only">Processing...</span>
                    </div>
                    <span>Processing ...</span>
                </div>
            </form>
            <progress id='progress-records' value='0' max='100'  style="display: none"></progress>
        </div>
    </div>
</div>


</body>
</html>
