{% extends 'base/base.html' %}
{% load static %}

{% block title %}Settings - ThrillWiki{% endblock %}

{% block content %}
<div class="container px-4 mx-auto">
    <h1 class="mb-4 text-2xl font-bold">Settings</h1>

    <div class="p-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
        <form method="POST" enctype="multipart/form-data">
            {% csrf_token %}
            <input type="hidden" name="action" value="update_profile">

            <h2 class="mb-4 text-lg font-semibold">Update Profile</h2>

            <div class="mb-4">
                <label for="display_name" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Display Name</label>
                <input type="text" name="display_name" id="display_name" value="{{ user.profile.display_name }}" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>

            <div class="mb-4">
                <label for="avatar" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Avatar</label>
                <input type="file" name="avatar" id="avatar" class="block w-full mt-1 text-gray-900 dark:text-gray-300">
            </div>

            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-md">Update Profile</button>
        </form>
    </div>

    <div class="p-6 mt-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
        <form method="POST">
            {% csrf_token %}
            <input type="hidden" name="action" value="change_email">

            <h2 class="mb-4 text-lg font-semibold">Change Email</h2>

            <div class="mb-4">
                <label for="new_email" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Email</label>
                <input type="email" name="new_email" id="new_email" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>

            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-md">Change Email</button>
        </form>
    </div>

    <div class="p-6 mt-6 overflow-hidden bg-white rounded-lg shadow dark:bg-gray-800">
        <form method="POST">
            {% csrf_token %}
            <input type="hidden" name="action" value="change_password">

            <h2 class="mb-4 text-lg font-semibold">Change Password</h2>

            <div class="mb-4">
                <label for="old_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">Current Password</label>
                <input type="password" name="old_password" id="old_password" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>

            <div class="mb-4">
                <label for="new_password" class="block text-sm font-medium text-gray-700 dark:text-gray-300">New Password</label>
                <input type="password" name="new_password" id="new_password" class="block w-full mt-1 border-gray-300 rounded-md shadow-sm dark:border-gray-600 dark:bg-gray-700 dark:text-gray-300">
            </div>

            <button type="submit" class="px-4 py-2 text-white bg-blue-500 rounded-md">Change Password</button>
        </form>
    </div>
</div>
{% endblock %}