{% extends "base.html" %}

{% block title %}{{ title }} - Pro Choice{% endblock %}

{% block content %}
<link rel="stylesheet" href="{{ url_for('static', filename='css/admin.css') }}">

<div class="form-container">
    <div class="form-header">
        <h1>{{ title }}</h1>
    </div>

    {% with messages = get_flashed_messages(with_categories=true) %}
        {% if messages %}
            {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                    {{ message }}
                </div>
            {% endfor %}
        {% endif %}
    {% endwith %}

    <div class="form-card">
        <form method="POST" action="" enctype="multipart/form-data">
            {{ form.hidden_tag() }}
            
            <div class="form-group">
                {{ form.name.label }}
                <div class="input-icon">
                    <i class="fas fa-tag"></i>
                    {{ form.name(class="form-control", placeholder="e.g., Organic Moringa Powder") }}
                </div>
                {% if form.name.errors %}
                    {% for error in form.name.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.price.label }}
                <div class="input-icon">
                    <i class="fas fa-naira-sign"></i>
                    {{ form.price(class="form-control", placeholder="e.g., 4000.00", step="0.01") }}
                </div>
                {% if form.price.errors %}
                    {% for error in form.price.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.image.label }}
                <div class="input-icon">
                    <i class="fas fa-image"></i>
                    {{ form.image(class="form-control") }}
                </div>
                {% if form.image.errors %}
                    {% for error in form.image.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="form-hint">
                        <i class="fas fa-info-circle"></i>
                        Upload a product image (jpg, jpeg, png, gif, webp)
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.badge.label }}
                {{ form.badge(class="form-control") }}
                {% if form.badge.errors %}
                    {% for error in form.badge.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.description.label }}
                {{ form.description(class="form-control", placeholder="Describe your product's benefits and features...", rows="4") }}
                {% if form.description.errors %}
                    {% for error in form.description.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% else %}
                    <div class="form-hint">
                        <i class="fas fa-info-circle"></i>
                        Write a compelling description (10-500 characters)
                    </div>
                {% endif %}
            </div>

            <div class="form-group">
                {{ form.quantity_available.label }}
                <div class="input-icon">
                    <i class="fas fa-boxes"></i>
                    {{ form.quantity_available(class="form-control", placeholder="e.g., 50") }}
                </div>
                {% if form.quantity_available.errors %}
                    {% for error in form.quantity_available.errors %}
                        <div class="error-message">
                            <i class="fas fa-exclamation-circle"></i>
                            {{ error }}
                        </div>
                    {% endfor %}
                {% endif %}
            </div>

            <div class="form-actions">
                <button type="submit" class="btn-submit">
                    <i class="fas fa-save"></i> {{ form.submit.label.text }}
                </button>
                <a href="{{ url_for('admin.dashboard') }}" class="btn-cancel">
                    <i class="fas fa-times"></i> Cancel
                </a>
            </div>
        </form>
    </div>

    <a href="{{ url_for('admin.dashboard') }}" class="back-link">
        <i class="fas fa-arrow-left"></i>
        Back to Dashboard
    </a>
</div>
{% endblock %}