{% extends 'superuser/base_superuser.html' %}

{% block workspace %}
<div class="page-header">
    <div>
        <h1 class="page-title">Site Data Configuration</h1>
        <p class="page-subtitle">Manage public-facing text, pricing, and contact information.</p>
    </div>
</div>

<div class="form-container" style="max-width: 900px;">
    {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }}" style="background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.2); color: var(--success); padding: 1rem; border-radius: 8px; margin-bottom: 2rem;">
                {{ message }}
            </div>
        {% endfor %}
    {% endif %}

    <form method="POST" enctype="multipart/form-data" class="glass-card" style="padding: 2rem; border-radius: 16px;">
        {% csrf_token %}
        <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Platform Logo Settings</h2>
        <div class="form-group" style="display: flex; align-items: center; gap: 2rem; margin-bottom: 2rem;">
            {% if settings.logo %}
                <div style="flex-shrink: 0; background: var(--bg-card); border: 1px solid var(--border-color); padding: 0.5rem; border-radius: 8px;">
                    <img src="{{ settings.logo.url }}" alt="Platform Logo" style="max-height: 80px; max-width: 80px; object-fit: contain; display: block;">
                </div>
            {% endif %}
            <div style="flex-grow: 1;">
                <label class="form-label" style="display: block; margin-bottom: 0.5rem;">Upload Platform Logo (PWA Icon)</label>
                <input type="file" name="logo" accept="image/*" class="form-input" style="padding: 0.4rem;">
                <span style="font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; display: block;">Recommended size: Square (e.g. 512x512px) in PNG format.</span>
            </div>
        </div>

        <hr style="border-color: var(--border-color); margin: 2rem 0;">

        <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Hero Section Content</h2>
        <div class="form-group">
            <label class="form-label">Hero Badge Text</label>
            <input type="text" name="hero_badge_text" class="form-input" value="{{ settings.hero_badge_text }}">
        </div>
        <div class="form-group">
            <label class="form-label">Hero Title</label>
            <textarea name="hero_title" class="form-textarea" style="min-height: 60px;">{{ settings.hero_title }}</textarea>
        </div>
        <div class="form-group">
            <label class="form-label">Hero Subtitle</label>
            <textarea name="hero_subtitle" class="form-textarea" style="min-height: 80px;">{{ settings.hero_subtitle }}</textarea>
        </div>

        <hr style="border-color: var(--border-color); margin: 2rem 0;">

        

        <h2 style="margin-bottom: 1.5rem; color: var(--primary);">Home Page Features</h2>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Feature 1 Title</label>
                <input type="text" name="home_feature_1_title" class="form-input" value="{{ settings.home_feature_1_title }}">
            </div>
            <div class="form-group">
                <label class="form-label">Feature 1 Description</label>
                <input type="text" name="home_feature_1_desc" class="form-input" value="{{ settings.home_feature_1_desc }}">
            </div>
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Feature 2 Title</label>
                <input type="text" name="home_feature_2_title" class="form-input" value="{{ settings.home_feature_2_title }}">
            </div>
            <div class="form-group">
                <label class="form-label">Feature 2 Description</label>
                <input type="text" name="home_feature_2_desc" class="form-input" value="{{ settings.home_feature_2_desc }}">
            </div>
        </div>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Feature 3 Title</label>
                <input type="text" name="home_feature_3_title" class="form-input" value="{{ settings.home_feature_3_title }}">
            </div>
            <div class="form-group">
                <label class="form-label">Feature 3 Description</label>
                <input type="text" name="home_feature_3_desc" class="form-input" value="{{ settings.home_feature_3_desc }}">
            </div>
        </div>

        <hr style="border-color: var(--border-color); margin: 2rem 0;">

        <h2 style="margin-bottom: 1.5rem; color: var(--accent);">Contact Information</h2>
        <div class="form-group">
            <label class="form-label">Contact Email</label>
            <input type="email" name="contact_email" class="form-input" value="{{ settings.contact_email }}">
        </div>
        <div class="form-group">
            <label class="form-label">Contact Phone</label>
            <input type="text" name="contact_phone" class="form-input" value="{{ settings.contact_phone }}">
        </div>
        <div class="form-group">
            <label class="form-label">Contact Address</label>
            <textarea name="contact_address" class="form-textarea" style="min-height: 80px;">{{ settings.contact_address }}</textarea>
        </div>

        <hr style="border-color: var(--border-color); margin: 2rem 0;">

        <h2 style="margin-bottom: 1.5rem; color: var(--success);">Pricing Plans</h2>
        
        <h3 style="margin-bottom: 1rem; color: var(--text-secondary);">Basic Plan</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Plan Name</label>
                <input type="text" name="pricing_basic_name" class="form-input" value="{{ settings.pricing_basic_name }}">
            </div>
            <div class="form-group">
                <label class="form-label">Price (e.g. $49/mo)</label>
                <input type="text" name="pricing_basic_price" class="form-input" value="{{ settings.pricing_basic_price }}">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Features (one per line)</label>
            <textarea name="pricing_basic_features" class="form-textarea" style="min-height: 100px;">{{ settings.pricing_basic_features }}</textarea>
        </div>

        <h3 style="margin-bottom: 1rem; color: var(--text-secondary); margin-top: 2rem;">Professional Plan</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Plan Name</label>
                <input type="text" name="pricing_pro_name" class="form-input" value="{{ settings.pricing_pro_name }}">
            </div>
            <div class="form-group">
                <label class="form-label">Price</label>
                <input type="text" name="pricing_pro_price" class="form-input" value="{{ settings.pricing_pro_price }}">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Features (one per line)</label>
            <textarea name="pricing_pro_features" class="form-textarea" style="min-height: 100px;">{{ settings.pricing_pro_features }}</textarea>
        </div>

        <h3 style="margin-bottom: 1rem; color: var(--text-secondary); margin-top: 2rem;">Enterprise Plan</h3>
        <div style="display: grid; grid-template-columns: 1fr 1fr; gap: 1rem;">
            <div class="form-group">
                <label class="form-label">Plan Name</label>
                <input type="text" name="pricing_ent_name" class="form-input" value="{{ settings.pricing_ent_name }}">
            </div>
            <div class="form-group">
                <label class="form-label">Price</label>
                <input type="text" name="pricing_ent_price" class="form-input" value="{{ settings.pricing_ent_price }}">
            </div>
        </div>
        <div class="form-group">
            <label class="form-label">Features (one per line)</label>
            <textarea name="pricing_ent_features" class="form-textarea" style="min-height: 100px;">{{ settings.pricing_ent_features }}</textarea>
        </div>

        <div class="form-actions" style="margin-top: 3rem;">
            <button type="submit" class="btn btn-primary" style="width: 100%;">Save Configuration</button>
        </div>
    </form>
</div>
{% endblock %}