templates/settings.html

{% extends "base.html" %}

{% block title %}Settings{% endblock %}

{% block head %}
<style>
    .settings-card {
        border-radius: 16px;
        overflow: hidden;
        box-shadow: var(--shadow-md);
    }
    .settings-card .card-header {
        padding: 24px;
    }
    .settings-card .card-body {
        padding: 24px;
    }
    fieldset {
        margin-bottom: 1rem;
    }
    legend {
        color: var(--text-muted);
    }
</style>
{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8">
            <div class="card bg-dark text-white settings-card">
                <div class="card-header">
                    <h2 class="mb-0"><i class="bi bi-gear me-2"></i>Application Settings</h2>
                </div>
                <div class="card-body">
                    {% with messages = get_flashed_messages(with_categories=true) %}
                        {% if messages %}
                            {% for category, message in messages %}
                                <div class="alert alert-{{ category }} alert-dismissible fade show" role="alert">
                                    {{ message }}
                                    <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
                                </div>
                            {% endfor %}
                        {% endif %}
                    {% endwith %}

                    <form method="POST" enctype="multipart/form-data">
                        <fieldset>
                            <legend class="h5 mb-3"><i class="bi bi-cloud me-2"></i>Google Drive Integration</legend>
                            <div class="mb-3">
                                <label for="client_secret" class="form-label">Client Secret JSON</label>
                                <div class="input-group">
                                    <input type="file" class="form-control" id="client_secret" name="client_secret" accept=".json">
                                    <button class="btn btn-outline-secondary btn-pill" type="submit">Upload</button>
                                </div>
                                <div class="form-text">
                                    Status:
                                    {% if client_secret_exists %}
                                        <span class="text-success"><i class="bi bi-check-circle-fill"></i> Configured</span>
                                    {% else %}
                                        <span class="text-danger"><i class="bi bi-x-circle-fill"></i> Not Found</span>
                                    {% endif %}
                                    <br>
                                    Upload the <code>client_secret.json</code> file from Google Cloud Console to enable Drive integration.
                                    <br>
                                    <div class="mt-2 p-2 bg-dark border rounded">
                                        <strong>Required Redirect URI:</strong><br>
                                        <code class="user-select-all">{{ drive_redirect_uri }}</code>
                                    </div>
                                    <span class="text-muted small">Ensure this URI is exactly listed in your Google Cloud Console "Authorized redirect URIs".</span>
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <fieldset>
                            <legend class="h5 mb-3"><i class="bi bi-journal-check me-2"></i>NeetPrep Settings</legend>
                            <div class="mb-3 form-check">
                                <input type="checkbox" class="form-check-input" id="neetprep_enabled" name="neetprep_enabled" {% if current_user.neetprep_enabled %}checked{% endif %}>
                                <label class="form-check-label" for="neetprep_enabled">
                                    Enable NeetPrep Sync
                                </label>
                                <div class="form-text">
                                    Enable synchronization with NeetPrep for question data.
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <fieldset>
                            <legend class="h5 mb-3"><i class="bi bi-cpu me-2"></i>Classifier Settings</legend>
                            <div class="mb-3">
                                <label for="classifier_model" class="form-label">Question Classifier Model</label>
                                <select class="form-select" id="classifier_model" name="classifier_model">
                                    <option value="gemini" {% if current_user.classifier_model == 'gemini' %}selected{% endif %}>Gemini Classifier (Default)</option>
                                    <option value="gemma" {% if current_user.classifier_model == 'gemma' %}selected{% endif %}>NVIDIA Gemma</option>
                                    <option value="nova" {% if current_user.classifier_model == 'nova' %}selected{% endif %}>Amazon Nova Lite</option>
                                </select>
                                <div class="form-text">
                                    Choose the AI model for automatic question classification. Gemini uses Google's Gemini API, while Nova uses Amazon's Nova model via OpenRouter. Requires relevant API keys to be set.
                                </div>
                            </div>
                            <div class="mb-3 form-check form-switch">
                                <input type="checkbox" class="form-check-input" id="use_ai_suggestions" name="use_ai_suggestions" {% if current_user.use_ai_suggestions %}checked{% endif %}>
                                <label class="form-check-label" for="use_ai_suggestions">
                                    Enable AI Topic Suggestions
                                </label>
                                <div class="form-text">
                                    Show AI-suggested topics and chapters in the manual classification wizard. If disabled, you can still type manually.
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <fieldset>
                            <legend class="h5 mb-3"><i class="bi bi-file-pdf me-2"></i>PDF & Image Settings</legend>
                            <div class="mb-3">
                                <label for="pdf_viewer" class="form-label">Default PDF Viewer</label>
                                <select class="form-select" id="pdf_viewer" name="pdf_viewer">
                                    <option value="adobe" {% if current_user.pdf_viewer == 'adobe' %}selected{% endif %}>Adobe PDF Embed (Smooth zoom, recommended)</option>
                                    <option value="browser" {% if current_user.pdf_viewer == 'browser' %}selected{% endif %}>Browser Native (Fast, basic)</option>
                                    <option value="legacy" {% if current_user.pdf_viewer == 'legacy' %}selected{% endif %}>Legacy Image Viewer (Side-by-side pages)</option>
                                </select>
                                <div class="form-text">
                                    Choose the default PDF viewer for the PDF Manager. Adobe PDF Embed provides smooth pinch-to-zoom, Browser Native is lightweight, and Legacy shows pages as images side-by-side.
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="dpi" class="form-label">Rendering DPI</label>
                                <input type="number" class="form-control" id="dpi" name="dpi" min="72" max="900" value="{{ current_user.dpi }}">
                                <div class="form-text">
                                    Set the resolution for converting PDF pages to images. Higher values (e.g., 300) are better for quality and OCR but create larger files. Lower values (e.g., 150) are faster. Default: 300, Max: 900.
                                </div>
                            </div>
                            <div class="mb-3">
                                <label for="color_rm_dpi" class="form-label">Color Removal Output DPI</label>
                                <input type="number" class="form-control" id="color_rm_dpi" name="color_rm_dpi" min="72" max="600" value="{{ current_user.color_rm_dpi }}">
                                <div class="form-text">
                                    Set the output resolution (DPI) for processed images from the Color Removal tool when generating PDFs. Default: 200, Max: 600.
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <fieldset>
                            <legend class="h5 mb-3"><i class="bi bi-layout-split me-2"></i>Crop View Settings</legend>
                            <div class="mb-3 form-check form-switch">
                                <input type="checkbox" class="form-check-input" id="two_page_crop" name="two_page_crop" {% if current_user.two_page_crop %}checked{% endif %}>
                                <label class="form-check-label" for="two_page_crop">
                                    Enable Two-Page Layout
                                </label>
                                <div class="form-text">
                                    Show two pages side by side in the crop view (pages 0-1, 2-3, etc.). Useful for scanned books or documents with facing pages.
                                </div>
                            </div>
                            <div class="mb-3 form-check form-switch">
                                <input type="checkbox" class="form-check-input" id="magnifier_enabled" name="magnifier_enabled" {% if current_user.magnifier_enabled %}checked{% endif %}>
                                <label class="form-check-label" for="magnifier_enabled">
                                    Enable Magnifier Lens
                                </label>
                                <div class="form-text">
                                    Show a magnifying lens when drawing crop boxes for precise selection.
                                </div>
                            </div>
                        </fieldset>
                        <hr>
                        <button type="submit" class="btn btn-primary btn-pill btn-lg px-4">
                            <i class="bi bi-check-lg me-1"></i>Save Settings
                        </button>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}