{% extends 'base.html' %}
{% load crispy_forms_tags %}

{% block title %}Accept Invitation{% endblock %}

{% block content %}
<div class="container mt-5">
    <div class="row justify-content-center">
        <div class="col-md-8 col-lg-6">
            <div class="card shadow-lg border-0 rounded-lg">
                <div class="card-header bg-gradient-primary text-white text-center py-4">
                    <h3 class="font-weight-light my-2">Join {{ invitation.company.name }}</h3>
                </div>
                <div class="card-body p-4">
                    {% if user.is_authenticated and user.email != invitation.email %}
                        <div class="alert alert-warning" role="alert">
                            You are logged in as {{ user.email }}. This invitation is for {{ invitation.email }}. Please log out or use the correct account.
                        </div>
                    {% else %}
                        <p class="mb-4">You have been invited to join <strong>{{ invitation.company.name }}</strong>. Please create an account or log in to accept the invitation.</p>
                        <form method="post" class="needs-validation" novalidate>
                            {% csrf_token %}
                            {% if not user.is_authenticated %}
                                <div class="mb-3">
                                    {{ form.username|as_crispy_field }}
                                </div>
                                <div class="mb-3">
                                    {{ form.password|as_crispy_field }}
                                </div>
                                <div class="mb-3">
                                    {{ form.password2|as_crispy_field }}
                                </div>
                            {% endif %}
                            <div class="d-flex align-items-center justify-content-between mt-4 mb-0">
                                <button type="submit" class="btn btn-primary">Accept Invitation</button>
                            </div>
                        </form>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}