{% extends 'base/layout.html' %}

{% block content %}
<div style="max-width: 800px; margin: 0 auto;">
    <div style="background: var(--card-bg); padding: 2rem; border-radius: 0.5rem; border: 1px solid var(--border-color);">
        <h2 style="margin-top: 0; color: var(--text-color);">{{ title }}</h2>
        <p style="color: var(--muted-text-color); margin-bottom: 2rem;">
            Please fill out the details below as accurately as possible.
        </p>
        
        <form method="post" enctype="multipart/form-data">
            {% csrf_token %}
            {% if form.non_field_errors %}
                <div style="background: var(--danger-color); color: var(--text-color); padding: 0.75rem; border-radius: 0.375rem; margin-bottom: 1.5rem;">
                    {{ form.non_field_errors }}
                </div>
            {% endif %}

            {% for field in form %}
            <div style="margin-bottom: 1.5rem;">
                <label for="{{ field.id_for_label }}" style="display: block; color: var(--muted-text-color); font-size: 0.875rem; margin-bottom: 0.5rem;">
                    {{ field.label }}
                </label>
                
                {{ field }}
                
                {% if field.help_text %}
                <div style="color: var(--muted-text-color); font-size: 0.75rem; margin-top: 0.5rem;">{{ field.help_text }}</div>
                {% endif %}
                {% if field.errors %}
                <div style="color: var(--danger-color); font-size: 0.875rem; margin-top: 0.25rem;">
                    {{ field.errors.as_text }}
                </div>
                {% endif %}
            </div>
            {% endfor %}
            
            <div style="display: flex; gap: 1rem; justify-content: flex-end; margin-top: 2rem;">
                <a href="{% url 'store:manage_listings' %}" class="btn" style="background: transparent; border: 1px solid var(--border-color); text-decoration: none;">Cancel</a>
                <button type="submit" class="btn">Save Listing</button>
            </div>
        </form>
    </div>
</div>

<style>
    /* Scoped styles for form inputs in this view to match dashboard theme */
    form input[type="text"],
    form input[type="email"],
    form input[type="number"],
    form input[type="password"],
    form input[type="file"], 
    form select, 
    form textarea {
        display: block;
        width: 100%;
        padding: 0.75rem;
        background: var(--input-bg);
        border: 1px solid var(--border-color);
        border-radius: 0.375rem;
        color: var(--text-color);
        font-size: 1rem;
        outline: none;
        transition: border-color 0.2s, box-shadow 0.2s;
    }
    
    form input:focus,
    form select:focus,
    form textarea:focus {
        border-color: var(--primary-color);
        box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2); /* Soft glow */
    }
    
    /* File input styling tweaks */
    form input[type="file"] {
        padding: 0.5rem;
        line-height: 1.5;
    }
    
    form input[type="file"]::file-selector-button {
        background: var(--primary-color);
        border: none;
        color: var(--text-color);
        padding: 0.25rem 0.75rem;
        border-radius: 0.25rem;
        margin-right: 1rem;
        cursor: pointer;
        font-size: 0.875rem;
    }
</style>
{% endblock %}