{% extends 'base.html' %}

{% block title %}Reset Password - NetCop AI Hub{% endblock %}

{% block content %}
<div style="min-height: 100vh; background: linear-gradient(135deg, #f6f8ff 0%, #e8f0fe 50%, #f0f7ff 100%); display: flex; align-items: center; justify-content: center; padding: 20px;">
    
    <div style="background: white; border-radius: 20px; padding: 40px; width: 100%; max-width: 400px; box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1);">
        <div style="text-align: center; margin-bottom: 32px;">
            <h1 style="font-size: 28px; font-weight: bold; color: #1f2937; margin-bottom: 8px;">
                Reset Your Password
            </h1>
            <p style="color: #6b7280;">
                Enter your new password below
            </p>
        </div>

        {% if error %}
            <div style="background: #fef2f2; border: 1px solid #fecaca; color: #dc2626; padding: 16px; border-radius: 12px; text-align: center; margin-bottom: 20px;">
                <div style="font-size: 48px; margin-bottom: 16px;">❌</div>
                <h3 style="font-weight: bold; margin-bottom: 8px;">Error</h3>
                <p style="margin-bottom: 16px;">{{ error }}</p>
                <a href="{% url 'homepage' %}" style="background: #dc2626; color: white; padding: 8px 16px; border-radius: 8px; text-decoration: none; font-size: 14px;">
                    Go to Homepage
                </a>
            </div>
        {% else %}
            <form method="post" style="display: flex; flex-direction: column; gap: 20px;">
                {% csrf_token %}
                
                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">
                        New Password
                    </label>
                    <input type="password" name="password" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; transition: border-color 0.2s;" placeholder="Enter new password">
                </div>

                <div>
                    <label style="display: block; margin-bottom: 8px; font-weight: 500; color: #374151;">
                        Confirm Password
                    </label>
                    <input type="password" name="confirm_password" required style="width: 100%; padding: 12px 16px; border: 2px solid #e5e7eb; border-radius: 12px; font-size: 16px; transition: border-color 0.2s;" placeholder="Confirm new password">
                </div>

                <button type="submit" style="background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%); color: white; padding: 14px 24px; border-radius: 12px; font-size: 16px; font-weight: 600; border: none; cursor: pointer; transition: transform 0.2s;" onmouseover="this.style.transform='scale(1.02)'" onmouseout="this.style.transform='scale(1)'">
                    Update Password
                </button>
            </form>
        {% endif %}

        <div style="text-align: center; margin-top: 24px; padding-top: 24px; border-top: 1px solid #e5e7eb;">
            <a href="{% url 'homepage' %}" style="background: none; border: none; color: #3b82f6; font-weight: 500; cursor: pointer; text-decoration: underline;">
                Back to Homepage
            </a>
        </div>
    </div>
</div>
{% endblock %}