{% extends "admin/base.html" %}
{% block title %}Site Settings{% endblock %}
{% block content %}
<div style="padding:2rem;max-width:1000px;margin:0 auto">
  <h1 style="font-size:2rem;font-weight:700;margin-bottom:2rem;color:var(--accent)">⚙️ Site Settings</h1>
  
  <form method="POST" enctype="multipart/form-data" style="display:grid;gap:2rem">
    
    <!-- General Settings -->
    <div style="background:var(--surface-2);border-radius:16px;padding:1.5rem">
      <h2 style="font-size:1.3rem;font-weight:600;margin-bottom:1.5rem;color:var(--accent);display:flex;align-items:center;gap:0.5rem">
        <span>📝</span> General Settings
      </h2>
      
      <div style="display:grid;gap:1.5rem">
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Site Name</label>
          <input type="text" name="site_name" value="{{ config.site_name }}" required 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);font-size:1rem;transition:border 0.2s" 
                 onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='transparent'" />
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">The name displayed across the site</p>
        </div>
        
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Footer Text</label>
          <textarea name="footer_text" rows="3" 
                    style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);font-size:1rem;resize:vertical;transition:border 0.2s" 
                    onfocus="this.style.borderColor='var(--accent)'" onblur="this.style.borderColor='transparent'">{{ config.footer_text or '' }}</textarea>
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">Custom text shown in the footer</p>
        </div>
      </div>
    </div>
    
    <!-- Logo & Images -->
    <div style="background:var(--surface-2);border-radius:16px;padding:1.5rem">
      <h2 style="font-size:1.3rem;font-weight:600;margin-bottom:1.5rem;color:var(--accent);display:flex;align-items:center;gap:0.5rem">
        <span>🖼️</span> Logo & Images
      </h2>
      
      <div style="display:grid;gap:1.5rem">
        <!-- Site Logo -->
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Site Logo</label>
          {% if config.site_logo %}
          <div style="margin-bottom:1rem;padding:1rem;background:var(--surface-3);border-radius:8px;display:flex;align-items:center;gap:1rem">
            <img src="{{ config.site_logo }}" style="max-width:200px;max-height:80px;object-fit:contain;border-radius:8px" />
            <div style="flex:1">
              <p style="margin:0;font-size:0.9rem;color:var(--text-muted)">Current logo</p>
            </div>
          </div>
          {% endif %}
          <input type="file" name="site_logo" accept="image/*" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);cursor:pointer" />
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">Upload a new logo (PNG, JPG, SVG)</p>
        </div>
        
        <!-- Site Background -->
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Site Background Image</label>
          {% if config.site_background %}
          <div style="margin-bottom:1rem;padding:1rem;background:var(--surface-3);border-radius:8px">
            <img src="{{ config.site_background }}" style="max-width:100%;max-height:200px;object-fit:cover;border-radius:8px" />
            <p style="margin:0.5rem 0 0 0;font-size:0.9rem;color:var(--text-muted)">Current background image</p>
          </div>
          {% endif %}
          <input type="file" name="site_background" accept="image/*" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);cursor:pointer" />
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">Upload a custom background for the site (will replace default animated background)</p>
        </div>
        
        <!-- Hero Image -->
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">Hero Section Image</label>
          {% if config.hero_image %}
          <div style="margin-bottom:1rem;padding:1rem;background:var(--surface-3);border-radius:8px">
            <img src="{{ config.hero_image }}" style="max-width:100%;max-height:200px;object-fit:cover;border-radius:8px" />
            <p style="margin:0.5rem 0 0 0;font-size:0.9rem;color:var(--text-muted)">Current hero image</p>
          </div>
          {% endif %}
          <input type="file" name="hero_image" accept="image/*" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);cursor:pointer" />
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">Upload hero image (will be hidden if empty)</p>
        </div>
        
        <!-- About Image -->
        <div>
          <label style="display:block;margin-bottom:0.5rem;font-weight:600;color:var(--accent)">About Section Image</label>
          {% if config.about_image %}
          <div style="margin-bottom:1rem;padding:1rem;background:var(--surface-3);border-radius:8px">
            <img src="{{ config.about_image }}" style="max-width:100%;max-height:200px;object-fit:cover;border-radius:8px" />
            <p style="margin:0.5rem 0 0 0;font-size:0.9rem;color:var(--text-muted)">Current about image</p>
          </div>
          {% endif %}
          <input type="file" name="about_image" accept="image/*" 
                 style="width:100%;padding:0.75rem;background:var(--surface-3);border:2px solid transparent;border-radius:8px;color:var(--text);cursor:pointer" />
          <p style="margin:0.5rem 0 0 0;font-size:0.85rem;color:var(--text-muted)">Upload about section image (will be hidden if empty)</p>
        </div>
      </div>
    </div>
    
    <!-- Info Box -->
    <div style="padding:1rem;background:var(--surface-2);border-radius:12px;border-left:4px solid var(--accent)">
      <p style="margin:0;color:var(--text-muted);font-size:0.95rem">
        <strong style="color:var(--accent)">💡 Note:</strong> 
        Images are optional. If no image is uploaded, the corresponding section will be automatically hidden on the site.
      </p>
    </div>
    
    <!-- Submit Button -->
    <div>
      <button type="submit" style="padding:1rem 3rem;background:var(--accent);color:#000;border:none;border-radius:999px;font-weight:700;font-size:1.1rem;cursor:pointer;transition:transform 0.2s,box-shadow 0.2s" 
              onmouseover="this.style.transform='translateY(-2px)';this.style.boxShadow='0 8px 20px rgba(110,231,183,0.3)'" 
              onmouseout="this.style.transform='translateY(0)';this.style.boxShadow='none'">Save All Settings</button>
    </div>
    
  </form>
</div>
{% endblock %}