{% extends "core/base.html" %}
{% load static %}

{% block title %}Request CV Access{% endblock %}

{% block content %}
<div class="container mx-auto px-4 py-8">
    <div class="max-w-2xl mx-auto">
        <h1 class="text-3xl font-bold mb-6">Request CV Access</h1>
        
        {% if messages %}
        <div class="mb-6">
            {% for message in messages %}
                <div class="p-4 mb-4 rounded-lg {% if message.tags == 'success' %}bg-green-100 text-green-700{% else %}bg-red-100 text-red-700{% endif %}">
                    {{ message }}
                </div>
            {% endfor %}
        </div>
        {% endif %}

        <div class="bg-white shadow-lg rounded-lg p-6">
            <p class="mb-6 text-gray-600">
                To access my CV, please provide your email address and some information about your request. 
                After submitting, you'll receive a verification email with a link to access the CV.
            </p>

            <form method="POST" class="space-y-6">
                {% csrf_token %}
                
                <div>
                    <label for="email" class="block text-sm font-medium text-gray-700 mb-1">
                        Email Address *
                    </label>
                    <input type="email" name="email" id="email" required
                           class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                </div>

                <div>
                    <label for="purpose" class="block text-sm font-medium text-gray-700 mb-1">
                        Purpose of Access *
                    </label>
                    <select name="purpose" id="purpose" required
                            class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500">
                        <option value="">Select a purpose...</option>
                        <option value="Recruitment">Recruitment/Hiring</option>
                        <option value="Business">Business Opportunity</option>
                        <option value="Networking">Professional Networking</option>
                        <option value="Other">Other</option>
                    </select>
                </div>

                <div>
                    <label for="details" class="block text-sm font-medium text-gray-700 mb-1">
                        Additional Details *
                    </label>
                    <textarea name="details" id="details" required rows="4"
                              class="w-full px-4 py-2 border rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"
                              placeholder="Please provide more context about your request (e.g., company name, position, or specific interest)"></textarea>
                </div>

                <div class="flex items-start">
                    <div class="flex items-center h-5">
                        <input type="checkbox" name="gdpr_accepted" id="gdpr_accepted" required
                               class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded">
                    </div>
                    <div class="ml-3 text-sm">
                        <label for="gdpr_accepted" class="font-medium text-gray-700">
                            GDPR Consent *
                        </label>
                        <p class="text-gray-500">
                            I consent to the processing of my personal data according to GDPR guidelines. 
                            This information will only be used to provide CV access and related communications.
                        </p>
                    </div>
                </div>

                <div class="pt-4">
                    <button type="submit"
                            class="w-full bg-blue-600 text-white px-6 py-3 rounded-lg font-medium hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
                        Request Access
                    </button>
                </div>
            </form>
        </div>
    </div>
</div>
{% endblock %}