{% extends "base.html" %}

{% block title %}Logo Customization - DigiServer{% endblock %}

{% block content %}
<div class="container" style="max-width: 900px;">
    <h1 style="margin-bottom: 25px;">🎨 Logo Customization</h1>
    
    <div class="card" style="margin-bottom: 20px;">
        <h2 style="margin-bottom: 20px;">📸 Upload Custom Logos</h2>
        
        <!-- Header Logo -->
        <div style="margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
            <h3 style="margin-bottom: 15px;">Header Logo (Small)</h3>
            <p style="color: #666; margin-bottom: 15px;">
                This logo appears in the top header next to "DigiServer" text.<br>
                <strong>Recommended:</strong> 150x40 pixels (or similar aspect ratio), transparent background PNG
            </p>
            
            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
                <div style="flex: 1;">
                    <img src="{{ url_for('static', filename='uploads/header_logo.png') }}?v={{ version }}" 
                         alt="Current Header Logo" 
                         style="max-height: 50px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 10px; border-radius: 4px;"
                         onerror="this.src='{{ url_for('static', filename='icons/monitor.svg') }}'; this.style.filter='brightness(0) invert(1)'; this.style.maxWidth='50px';">
                    <p style="margin-top: 5px; font-size: 0.9rem; color: #888;">Current Header Logo</p>
                </div>
            </div>
            
            <form method="POST" action="{{ url_for('admin.upload_header_logo') }}" enctype="multipart/form-data">
                <div style="margin-bottom: 10px;">
                    <input type="file" name="header_logo" accept="image/png,image/jpeg,image/svg+xml" required
                           style="padding: 10px; border: 2px solid #ddd; border-radius: 4px; width: 100%;">
                </div>
                <button type="submit" class="btn btn-primary">📤 Upload Header Logo</button>
            </form>
        </div>
        
        <!-- Login Logo -->
        <div style="margin-bottom: 30px; padding: 20px; background: #f8f9fa; border-radius: 8px;">
            <h3 style="margin-bottom: 15px;">Login Page Logo (Large)</h3>
            <p style="color: #666; margin-bottom: 15px;">
                This logo appears on the left side of the login page (2/3 of screen).<br>
                <strong>Recommended:</strong> 800x600 pixels (or similar), transparent background PNG
            </p>
            
            <div style="display: flex; align-items: center; gap: 20px; margin-bottom: 15px;">
                <div style="flex: 1;">
                    <img src="{{ url_for('static', filename='uploads/login_logo.png') }}?v={{ version }}" 
                         alt="Current Login Logo" 
                         style="max-width: 300px; max-height: 200px; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); padding: 20px; border-radius: 8px;"
                         onerror="this.style.display='none'; this.nextElementSibling.style.display='block';">
                    <p style="margin-top: 10px; font-size: 0.9rem; color: #888; display: none;">No login logo uploaded yet</p>
                </div>
            </div>
            
            <form method="POST" action="{{ url_for('admin.upload_login_logo') }}" enctype="multipart/form-data">
                <div style="margin-bottom: 10px;">
                    <input type="file" name="login_logo" accept="image/png,image/jpeg,image/svg+xml" required
                           style="padding: 10px; border: 2px solid #ddd; border-radius: 4px; width: 100%;">
                </div>
                <button type="submit" class="btn btn-primary">📤 Upload Login Logo</button>
            </form>
        </div>
        
        <div style="padding: 15px; background: #e7f3ff; border-radius: 8px; border-left: 4px solid #0066cc;">
            <h4 style="margin: 0 0 10px 0;">ℹ️ Logo Guidelines</h4>
            <ul style="margin: 5px 0; padding-left: 25px; color: #555;">
                <li><strong>Header Logo:</strong> Keep it simple and small (max 200px width recommended)</li>
                <li><strong>Login Logo:</strong> Can be larger and more detailed (800x600px works great)</li>
                <li><strong>Format:</strong> PNG with transparent background recommended, or JPG/SVG</li>
                <li><strong>File Size:</strong> Keep under 2MB for optimal performance</li>
                <li>Logos are cached - clear browser cache if changes don't appear immediately</li>
            </ul>
        </div>
    </div>
    
    <div style="margin-top: 20px;">
        <a href="{{ url_for('admin.admin_panel') }}" class="btn btn-secondary">
            ← Back to Admin Panel
        </a>
    </div>
</div>

<style>
    body.dark-mode div[style*="background: #f8f9fa"] {
        background: #2d3748 !important;
    }
    
    body.dark-mode div[style*="background: #e7f3ff"] {
        background: #1e3a5f !important;
        border-left-color: #64b5f6 !important;
    }
    
    body.dark-mode p[style*="color: #666"],
    body.dark-mode p[style*="color: #888"],
    body.dark-mode ul[style*="color: #555"] {
        color: #cbd5e0 !important;
    }
</style>
{% endblock %}