{% extends "base.html" %}

{% block title %}Sign Up - MarketMatchr{% endblock %}

{% block content %}
<div class="container mt-5 pt-5">
    <div class="row justify-content-center">
        <div class="col-md-6">
            <div class="card">
                <div class="card-body">
                    <h2 class="card-title text-center">Sign Up</h2>
                    <div class="text-center mb-4">
                        <p>Join as a company or an influencer.</p>
                        <div class="btn-group" role="group">
                            <button type="button" class="btn btn-primary active" id="influencer-btn">Influencer</button>
                            <button type="button" class="btn btn-outline-primary" id="company-btn">Company</button>
                        </div>
                    </div>
                    <form method="post" id="signup-form">
                        {% csrf_token %}
                        <input type="hidden" name="role" id="role-input" value="influencer">
                        {{ form.as_p }}
                        <div class="d-grid">
                            <button type="submit" class="btn btn-primary">Sign Up</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const influencerBtn = document.getElementById('influencer-btn');
    const companyBtn = document.getElementById('company-btn');
    const roleInput = document.getElementById('role-input');

    influencerBtn.addEventListener('click', () => {
        influencerBtn.classList.add('active', 'btn-primary');
        influencerBtn.classList.remove('btn-outline-primary');
        companyBtn.classList.remove('active', 'btn-primary');
        companyBtn.classList.add('btn-outline-primary');
        roleInput.value = 'influencer';
    });

    companyBtn.addEventListener('click', () => {
        companyBtn.classList.add('active', 'btn-primary');
        companyBtn.classList.remove('btn-outline-primary');
        influencerBtn.classList.remove('active', 'btn-primary');
        influencerBtn.classList.add('btn-outline-primary');
        roleInput.value = 'company';
    });
</script>
{% endblock %}