{% extends 'base.html' %}

{% block title %}Site Settings | Admin | {{ settings.site_name }}{% endblock %}

{% block content %}
<section class="section-light py-4">
    <div class="container">
        <nav aria-label="breadcrumb">
            <ol class="breadcrumb mb-1">
                <li class="breadcrumb-item"><a href="{{ url_for('admin.dashboard') }}">Dashboard</a></li>
                <li class="breadcrumb-item active">Settings</li>
            </ol>
        </nav>
        <h1 class="h3 mb-0">Site Settings</h1>
    </div>
</section>

<section class="section">
    <div class="container">
        <form action="{{ url_for('admin.settings') }}" method="POST" enctype="multipart/form-data">
            <input type="hidden" name="csrf_token" value="{{ csrf_token() }}">
            
            <div class="row">
                <div class="col-lg-8">
                    <!-- General Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-cog me-2"></i>General Settings</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="site_name" class="form-label">Site Name</label>
                                    <input type="text" class="form-control" id="site_name" name="site_name"
                                           value="{{ settings.site_name if settings else 'ScholarPress' }}">
                                </div>
                                <div class="col-md-6">
                                    <label for="site_tagline" class="form-label">Tagline</label>
                                    <input type="text" class="form-control" id="site_tagline" name="site_tagline"
                                           value="{{ settings.site_tagline if settings else '' }}"
                                           placeholder="Your research, published">
                                </div>
                                <div class="col-12">
                                    <label for="site_description" class="form-label">Site Description</label>
                                    <textarea class="form-control" id="site_description" name="site_description" rows="3"
                                              placeholder="Brief description of your platform">{{ settings.site_description if settings else '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Contact Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-address-card me-2"></i>Contact Information</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="contact_email" class="form-label">Contact Email</label>
                                    <input type="email" class="form-control" id="contact_email" name="contact_email"
                                           value="{{ settings.contact_email if settings else '' }}"
                                           placeholder="contact@example.com">
                                </div>
                                <div class="col-md-6">
                                    <label for="contact_phone" class="form-label">Contact Phone</label>
                                    <input type="text" class="form-control" id="contact_phone" name="contact_phone"
                                           value="{{ settings.contact_phone if settings else '' }}"
                                           placeholder="+1 234 567 8900">
                                </div>
                                <div class="col-12">
                                    <label for="contact_address" class="form-label">Address</label>
                                    <textarea class="form-control" id="contact_address" name="contact_address" rows="2"
                                              placeholder="123 Academic Street, Research City">{{ settings.contact_address if settings else '' }}</textarea>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Social Media -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-share-alt me-2"></i>Social Media</h5>
                        </div>
                        <div class="card-body">
                            <div class="row g-3">
                                <div class="col-md-6">
                                    <label for="twitter_url" class="form-label">
                                        <i class="fab fa-twitter text-info me-1"></i>Twitter/X
                                    </label>
                                    <input type="url" class="form-control" id="twitter_url" name="twitter_url"
                                           value="{{ settings.twitter_url if settings else '' }}"
                                           placeholder="https://twitter.com/yourhandle">
                                </div>
                                <div class="col-md-6">
                                    <label for="linkedin_url" class="form-label">
                                        <i class="fab fa-linkedin text-primary me-1"></i>LinkedIn
                                    </label>
                                    <input type="url" class="form-control" id="linkedin_url" name="linkedin_url"
                                           value="{{ settings.linkedin_url if settings else '' }}"
                                           placeholder="https://linkedin.com/company/yourcompany">
                                </div>
                                <div class="col-md-6">
                                    <label for="facebook_url" class="form-label">
                                        <i class="fab fa-facebook text-primary me-1"></i>Facebook
                                    </label>
                                    <input type="url" class="form-control" id="facebook_url" name="facebook_url"
                                           value="{{ settings.facebook_url if settings else '' }}"
                                           placeholder="https://facebook.com/yourpage">
                                </div>
                                <div class="col-md-6">
                                    <label for="youtube_url" class="form-label">
                                        <i class="fab fa-youtube text-danger me-1"></i>YouTube
                                    </label>
                                    <input type="url" class="form-control" id="youtube_url" name="youtube_url"
                                           value="{{ settings.youtube_url if settings else '' }}"
                                           placeholder="https://youtube.com/yourchannel">
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Analytics -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-chart-line me-2"></i>Analytics & Tracking</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="google_analytics_id" class="form-label">Google Analytics ID</label>
                                <input type="text" class="form-control" id="google_analytics_id" name="google_analytics_id"
                                       value="{{ settings.google_analytics_id if settings else '' }}"
                                       placeholder="G-XXXXXXXXXX or UA-XXXXXXXX-X">
                            </div>
                            <div class="mb-3">
                                <label for="custom_head_code" class="form-label">Custom Head Code</label>
                                <textarea class="form-control font-monospace" id="custom_head_code" name="custom_head_code" rows="4"
                                          placeholder="<!-- Custom scripts, meta tags, etc. -->">{{ settings.custom_head_code if settings else '' }}</textarea>
                                <div class="form-text">Add custom code to the &lt;head&gt; section of all pages</div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="col-lg-4">
                    <!-- Save Button -->
                    <div class="card border-0 shadow-sm mb-4 sticky-top" style="top: 100px;">
                        <div class="card-body">
                            <button type="submit" class="btn btn-primary w-100 py-2">
                                <i class="fas fa-save me-2"></i>Save Settings
                            </button>
                        </div>
                    </div>
                    
                    <!-- Logo Settings -->
                    <div class="card border-0 shadow-sm mb-4">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-image me-2"></i>Branding</h5>
                        </div>
                        <div class="card-body">
                            <div class="mb-3">
                                <label for="logo" class="form-label">Site Logo</label>
                                {% if settings and settings.logo %}
                                <div class="mb-2">
                                    <img src="{{ url_for('main.uploaded_file', filename= settings.logo) }}" 
                                         alt="Current logo" class="img-thumbnail" style="max-height: 80px;">
                                </div>
                                {% endif %}
                                <input type="file" class="form-control" id="logo" name="logo" accept="image/*">
                                <div class="form-text">Recommended: 200x60px, PNG or SVG</div>
                            </div>
                            
                            <div class="mb-3">
                                <label for="favicon" class="form-label">Favicon</label>
                                {% if settings and settings.favicon %}
                                <div class="mb-2">
                                    <img src="{{ url_for('main.uploaded_file', filename= settings.favicon) }}" 
                                         alt="Current favicon" style="max-height: 32px;">
                                </div>
                                {% endif %}
                                <input type="file" class="form-control" id="favicon" name="favicon" 
                                       accept=".ico,.png,.svg">
                                <div class="form-text">32x32px, ICO or PNG</div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Quick Links -->
                    <div class="card border-0 shadow-sm">
                        <div class="card-header bg-transparent">
                            <h5 class="mb-0"><i class="fas fa-link me-2"></i>Related</h5>
                        </div>
                        <div class="card-body">
                            <div class="d-grid gap-2">
                                <a href="{{ url_for('admin.content_blocks') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-edit me-2"></i>Manage Content
                                </a>
                                <a href="{{ url_for('admin.images') }}" class="btn btn-outline-primary">
                                    <i class="fas fa-images me-2"></i>Manage Images
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </form>
    </div>
</section>
{% endblock %}