{% extends "frontend/base.html" %}
{% load i18n %}
{% block html_title %}
    {% block page_title %}
        {% translate "Accept Organization Invitation" %}
    {% endblock page_title %}
{% endblock html_title %}
{% block content %}
    <section class="section">
        <div class="card">
            <div class="card-content">
                <div class="card-body">
                    <div class="alert alert-info">
                        <i class="bi bi-info-circle"></i>
                        {% blocktranslate with org_name=invitation.organization.name role=invitation.get_role_display %}
                        You have been invited to join <strong>{{ org_name }}</strong> as a <strong>{{ role }}</strong>.
                        {% endblocktranslate %}
                    </div>
                    {% if user.email|lower != invitation.email|lower %}
                        <div class="alert alert-warning">
                            <i class="bi bi-exclamation-triangle"></i>
                            {% blocktranslate with invitation_email=invitation.email user_email=user.email %}
                            <strong>Note:</strong> This invitation was sent to <strong>{{ invitation_email }}</strong>,
                            but you are currently logged in as <strong>{{ user_email }}</strong>.
                            {% endblocktranslate %}
                        </div>
                    {% endif %}
                    <form method="post">
                        {% csrf_token %}
                        <div class="d-flex justify-content-end gap-2">
                            <a href="{% url 'frontend:organization.selection' %}"
                               class="btn btn-secondary">{% translate "Cancel" %}</a>
                            <button type="submit" class="btn btn-primary">
                                <i class="bi bi-check-circle"></i> {% translate "Accept Invitation" %}
                            </button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </section>
{% endblock content %}
