{% extends "layouts/base.html" %}
{% load i18n %}

{% block title %}{% trans "Bulk Invite" %}{% endblock %}

{% block content %}
<div class="p-6 md:p-8">
    <!-- Header -->
    <div class="mb-8">
        <a href="{% url 'accounts:onboarding_dashboard' %}" class="inline-flex items-center text-navy hover:text-navy mb-4 font-medium">
            <i data-lucide="arrow-left" class="w-4 h-4 mr-2"></i>
            {% trans "Back to Dashboard" %}
        </a>
        <h1 class="text-3xl font-bold text-gray-800 mb-2">
            {% trans "Send Bulk Invitations" %}
        </h1>
        <p class="text-gray-500">
            {% trans "Invite multiple staff members to complete onboarding" %}
        </p>
    </div>

    <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
        <!-- Form -->
        <div class="lg:col-span-2">
            <div class="bg-white rounded-2xl shadow-sm border border-gray-100 p-6 md:p-8">
                <form method="post" enctype="multipart/form-data">
                    {% csrf_token %}
                    
                    <div class="mb-6">
                        <label class="block text-gray-700 font-medium mb-2">
                            {% trans "Upload CSV File" %}
                        </label>
                        <div class="border-2 border-dashed border-gray-200 rounded-2xl p-8 text-center hover:border-blue transition cursor-pointer">
                            <input type="file" name="csv_file" accept=".csv" class="hidden" id="csv_file">
                            <label for="csv_file" class="cursor-pointer">
                                <i data-lucide="upload-cloud" class="w-12 h-12 text-gray-400 mx-auto mb-3"></i>
                                <p class="text-gray-600 font-medium mb-1">{% trans "Click to upload CSV file" %}</p>
                                <p class="text-gray-400 text-sm">{% trans "or drag and drop" %}</p>
                            </label>
                        </div>
                        <p class="text-sm text-gray-400 mt-2">
                            <i data-lucide="info" class="w-4 h-4 inline mr-1"></i>
                            {% trans "CSV should contain columns: email, name, department" %}
                        </p>
                    </div>

                    <div class="mb-6">
                        <label class="block text-gray-700 font-medium mb-2">
                            {% trans "Or Enter Email Addresses" %}
                        </label>
                        <textarea name="emails" rows="5" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="email1@example.com&#10;email2@example.com&#10;email3@example.com"></textarea>
                    </div>

                    <div class="mb-6">
                        <label class="block text-gray-700 font-medium mb-2">
                            {% trans "Custom Message (Optional)" %}
                        </label>
                        <textarea name="custom_message" rows="3" class="w-full px-4 py-3 border border-gray-200 rounded-xl focus:outline-none focus:ring-2 focus:ring-navy focus:border-transparent" placeholder="{% trans 'Add a personal note to your invitation emails...' %}"></textarea>
                    </div>

                    <div class="flex gap-4">
                        <button type="submit" class="flex-1 bg-gradient-to-r from-navy to-orange-500 text-white px-6 py-3 rounded-xl font-bold hover:from-navy hover:to-orange-600 transition shadow-lg shadow-blue-200">
                            <i data-lucide="send" class="w-5 h-5 inline mr-2"></i>
                            {% trans "Send Invitations" %}
                        </button>
                        <a href="{% url 'accounts:onboarding_dashboard' %}" class="px-6 py-3 bg-gray-100 text-gray-700 rounded-xl font-bold hover:bg-gray-200 transition">
                            {% trans "Cancel" %}
                        </a>
                    </div>
                </form>
            </div>
        </div>

        <!-- Help Sidebar -->
        <div class="space-y-6">
            <div class="bg-blue-50 border border-blue-200 rounded-2xl p-6">
                <h3 class="font-bold text-blue-800 mb-3 flex items-center gap-2">
                    <i data-lucide="help-circle" class="w-5 h-5"></i>
                    {% trans "How it works" %}
                </h3>
                <ol class="text-blue-700 text-sm space-y-2 list-decimal list-inside">
                    <li>{% trans "Upload a CSV file or enter emails manually" %}</li>
                    <li>{% trans "Preview and verify the invitation list" %}</li>
                    <li>{% trans "Send invitations to all staff members" %}</li>
                    <li>{% trans "Track their onboarding progress" %}</li>
                </ol>
            </div>

            <div class="bg-light border border-blue-200 rounded-2xl p-6">
                <h3 class="font-bold text-navy mb-3 flex items-center gap-2">
                    <i data-lucide="alert-triangle" class="w-5 h-5"></i>
                    {% trans "Important Notes" %}
                </h3>
                <ul class="text-navy text-sm space-y-2">
                    <li class="flex gap-2">
                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "Each email will receive a unique activation link" %}</span>
                    </li>
                    <li class="flex gap-2">
                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "Links expire after 7 days" %}</span>
                    </li>
                    <li class="flex gap-2">
                        <i data-lucide="check" class="w-4 h-4 flex-shrink-0 mt-0.5"></i>
                        <span>{% trans "Staff must complete onboarding to access the system" %}</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>

<script>
document.addEventListener('DOMContentLoaded', function() {
    lucide.createIcons();
});
</script>
{% endblock %}