{% extends "base.html" %}

{% block content %}
<div style="max-width: 600px; margin: 30px auto; background: white; padding: 30px; border-radius: 10px; box-shadow: 0 0 20px rgba(0,0,0,0.1);">
    <h2 style="text-align: center; margin-bottom: 30px;">🔧 Settings</h2>
    
    <div style="margin-bottom: 30px;">
        <h3>🖼️ Prescription Background</h3>
        {% if background_path %}
            <div style="text-align: center; margin: 20px 0;">
                <img src="/static/uploads/{{ background_path }}" alt="Background Preview" style="max-width: 100%; max-height: 200px; border: 1px solid #ddd; border-radius: 5px;">
            </div>
            <form method="POST" style="text-align: center;">
                <input type="hidden" name="action" value="clear_background">
                <button type="submit" class="btn btn-danger" onclick="return confirm('Are you sure?')">🗑️ Clear Background</button>
            </form>
        {% else %}
            <p style="text-align: center; color: #666;">No background set</p>
        {% endif %}
        
        <form method="POST" enctype="multipart/form-data" style="margin-top: 20px;">
            <input type="hidden" name="action" value="set_background">
            <div style="margin-bottom: 15px;">
                <label style="display: block; margin-bottom: 5px; font-weight: bold;">Upload New Background:</label>
                <input type="file" name="background_file" accept="image/*" style="width: 100%; padding: 8px; border: 1px solid #ddd; border-radius: 4px;">
            </div>
            <button type="submit" class="btn btn-primary" style="width: 100%;">🖼️ Set Background</button>
        </form>
    </div>
    
    <div style="text-align: center;">
        <a href="/dashboard" class="btn btn-danger" style="text-decoration: none;">⬅️ Back to Dashboard</a>
    </div>
</div>
{% endblock %}