{% extends 'base.html' %}

{% block content %}
<div class="container">
    <h2>Register</h2>
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="form-group mb-3">
            <label for="{{ form.first_name.id_for_label }}">First Name</label>
            {{ form.first_name }}
            {% if form.first_name.errors %}
                <div class="invalid-feedback">
                    {% for error in form.first_name.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.last_name.id_for_label }}">Last Name</label>
            {{ form.last_name }}
            {% if form.last_name.errors %}
                <div class="invalid-feedback">
                    {% for error in form.last_name.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.email.id_for_label }}">Email</label>
            {{ form.email }}
            {% if form.email.errors %}
                <div class="invalid-feedback">
                    {% for error in form.email.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.password.id_for_label }}">Password</label>
            {{ form.password }}
            {% if form.password.errors %}
                <div class="invalid-feedback">
                    {% for error in form.password.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.confirm_password.id_for_label }}">Confirm Password</label>
            {{ form.confirm_password }}
            {% if form.confirm_password.errors %}
                <div class="invalid-feedback">
                    {% for error in form.confirm_password.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.profile.id_for_label }}">Profile Image</label>
            {{ form.profile }}
            {% if form.profile.errors %}
                <div class="invalid-feedback">
                    {% for error in form.profile.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.price.id_for_label }}">Price</label>
            {{ form.price }}
            {% if form.price.errors %}
                <div class="invalid-feedback">
                    {% for error in form.price.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.bio.id_for_label }}">Bio</label>
            {{ form.bio }}
            {% if form.bio.errors %}
                <div class="invalid-feedback">
                    {% for error in form.bio.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.service_offered.id_for_label }}">Service Offered</label>
            {{ form.service_offered }}
            {% if form.service_offered.errors %}
                <div class="invalid-feedback">
                    {% for error in form.service_offered.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <div class="form-group mb-3">
            <label for="{{ form.login_profile.id_for_label }}">Login Profile</label>
            {{ form.login_profile }}
            {% if form.login_profile.errors %}
                <div class="invalid-feedback">
                    {% for error in form.login_profile.errors %}
                        <p>{{ error }}</p>
                    {% endfor %}
                </div>
            {% endif %}
        </div>

        <button type="submit" class="btn btn-primary">Register</button>
    </form>
    <p>Already have an account? <a href="{% url 'login' %}">Login here</a>.</p>
</div>
{% endblock %}
