{% extends "base.html" %}

{% block title %}Bilder zu PDF - PDF Editor{% endblock %}

{% block content %}
<div class="row">
    <div class="col-12">
        <div class="page-header mb-4">
            <h2>
                <i class="fas fa-images me-2"></i>Bilder zu PDF konvertieren
            </h2>
            <p class="text-muted">
                Laden Sie mehrere Bilder hoch und konvertieren Sie diese in eine PDF-Datei.
            </p>
        </div>
    </div>
</div>

<div class="row">
    <!-- Upload Area -->
    <div class="col-lg-8">
        <div class="card">
            <div class="card-header">
                <h5 class="mb-0">
                    <i class="fas fa-upload me-2"></i>Bilder hochladen
                </h5>
            </div>
            <div class="card-body">
                <!-- File Upload Area -->
                <div id="upload-area" class="upload-area border-dashed p-4 text-center">
                    <div class="upload-content">
                        <i class="fas fa-cloud-upload-alt fa-3x text-muted mb-3"></i>
                        <h5>Bilder hier hinziehen oder klicken zum Auswählen</h5>
                        <p class="text-muted mb-3">
                            Unterstützte Formate: JPG, PNG, GIF, BMP, TIFF<br>
                            Maximale Dateigröße: 16 MB pro Datei
                        </p>
                        <input type="file" id="file-input" multiple accept="image/*" class="d-none">
                        <button type="button" class="btn btn-primary" onclick="document.getElementById('file-input').click()">
                            <i class="fas fa-folder-open me-2"></i>Dateien auswählen
                        </button>
                    </div>
                </div>

                <!-- Progress Bar -->
                <div id="upload-progress" class="mt-3" style="display: none;">
                    <div class="d-flex justify-content-between align-items-center mb-2">
                        <small class="text-muted">Upload läuft...</small>
                        <small id="progress-text" class="text-muted">0%</small>
                    </div>
                    <div class="progress">
                        <div id="progress-bar" class="progress-bar" role="progressbar" style="width: 0%"></div>
                    </div>
                </div>

                <!-- File List -->
                <div id="file-list" class="mt-4" style="display: none;">
                    <h6>Hochgeladene Dateien:</h6>
                    <div id="files-container" class="list-group sortable-list">
                        <!-- Files will be added here dynamically -->
                    </div>
                    
                    <div class="mt-3 d-flex gap-2">
                        <button id="convert-btn" class="btn btn-success" disabled>
                            <i class="fas fa-file-pdf me-2"></i>Zu PDF konvertieren
                        </button>
                        <button id="clear-btn" class="btn btn-outline-secondary">
                            <i class="fas fa-trash me-2"></i>Alle entfernen
                        </button>
                    </div>
                </div>

                <!-- Result Area -->
                <div id="result-area" class="mt-4" style="display: none;">
                    <div class="alert alert-success">
                        <div class="d-flex align-items-center">
                            <i class="fas fa-check-circle fa-2x me-3"></i>
                            <div class="flex-grow-1">
                                <h6 class="mb-1">PDF erfolgreich erstellt!</h6>
                                <p class="mb-0">Ihre Bilder wurden erfolgreich in eine PDF-Datei konvertiert.</p>
                            </div>
                            <a id="download-link" href="#" class="btn btn-success">
                                <i class="fas fa-download me-2"></i>PDF herunterladen
                            </a>
                        </div>
                    </div>
                </div>

                <!-- Error Area -->
                <div id="error-area" class="mt-4" style="display: none;">
                    <div class="alert alert-danger">
                        <h6><i class="fas fa-exclamation-triangle me-2"></i>Fehler</h6>
                        <p id="error-message" class="mb-0"></p>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Sidebar -->
    <div class="col-lg-4">
        <div class="card">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-cog me-2"></i>Einstellungen
                </h6>
            </div>
            <div class="card-body">
                <div class="mb-3">
                    <label class="form-label">Seitenformat:</label>
                    <select id="page-format" class="form-select">
                        <option value="A4">A4 (210 × 297 mm)</option>
                        <option value="Letter">Letter (216 × 279 mm)</option>
                        <option value="A3">A3 (297 × 420 mm)</option>
                        <option value="A5">A5 (148 × 210 mm)</option>
                    </select>
                </div>
                
                <div class="mb-3">
                    <label class="form-label">Bildanpassung:</label>
                    <select id="image-fit" class="form-select">
                        <option value="fit">An Seite anpassen</option>
                        <option value="fill">Seite füllen</option>
                        <option value="center">Zentrieren</option>
                    </select>
                </div>

                <div class="form-check mb-3">
                    <input class="form-check-input" type="checkbox" id="maintain-aspect-ratio" checked>
                    <label class="form-check-label">
                        Seitenverhältnis beibehalten
                    </label>
                </div>

                <div class="mb-3">
                    <label class="form-label">Bildvorschau-Größe:</label>
                    <select id="preview-size" class="form-select" onchange="updatePreviewSize()">
                        <option value="small">Klein (80px)</option>
                        <option value="medium" selected>Mittel (120px)</option>
                        <option value="large">Groß (160px)</option>
                    </select>
                </div>
            </div>
        </div>

        <!-- Tips -->
        <div class="card mt-3">
            <div class="card-header">
                <h6 class="mb-0">
                    <i class="fas fa-lightbulb me-2"></i>Tipps
                </h6>
            </div>
            <div class="card-body">
                <ul class="list-unstyled mb-0">
                    <li class="mb-2">
                        <i class="fas fa-sort me-2 text-muted"></i>
                        <small>Ziehen Sie Dateien in der Liste, um die Reihenfolge zu ändern</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-images me-2 text-muted"></i>
                        <small>Hochauflösende Bilder ergeben bessere PDF-Qualität</small>
                    </li>
                    <li class="mb-2">
                        <i class="fas fa-file-pdf me-2 text-muted"></i>
                        <small>Jedes Bild wird auf eine separate PDF-Seite platziert</small>
                    </li>
                    <li>
                        <i class="fas fa-shield-alt me-2 text-muted"></i>
                        <small>Alle Dateien werden lokal verarbeitet - maximale Sicherheit</small>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="{{ url_for('static', filename='js/images-to-pdf.js') }}"></script>
{% endblock %}