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

{% block title %}Profile - {{ user.get_full_name }}{% endblock %}

{% block content %}
<div class="profile-container">
    <div class="profile-card">
        <div class="profile-header">
            <h2>My Profile</h2>
        </div>
        <div class="profile-content">
            <div class="profile-image-section">
                <div class="profile-image-container">
                    {% if user.profile_picture %}
                        <img src="{{ user.profile_picture.url }}" 
                             alt="{{ user.get_full_name }}" 
                             class="profile-image"
                             id="profile-image-preview">
                    {% else %}
                        <div class="default-profile-image" id="default-profile-image">
                            <span>{{ user.first_name|slice:':1' }}{{ user.last_name|slice:':1' }}</span>
                        </div>
                    {% endif %}
                </div>
                <div class="mt-3">
                    <label for="id_profile_picture" class="upload-btn btn btn-outline-primary">
                        <i class="fas fa-upload me-2"></i>Change Photo
                    </label>
                    {% if user.profile_picture %}
                    <button type="button" class="btn btn-outline-danger ms-2" id="remove-profile-picture">
                        <i class="fas fa-trash-alt me-1"></i> Remove
                    </button>
                    {% endif %}
                </div>
            </div>
            
            <div class="profile-details">
                <form method="post" enctype="multipart/form-data" class="profile-form">
                    {% csrf_token %}
                    <div class="row">
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.first_name.id_for_label }}">First Name</label>
                                {{ form.first_name }}
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="form-group">
                                <label for="{{ form.last_name.id_for_label }}">Last Name</label>
                                {{ form.last_name }}
                            </div>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="{{ form.email.id_for_label }}">Email</label>
                        {{ form.email }}
                    </div>
                    <button type="submit" class="btn-save">Save Changes</button>
                    <a href="{% url 'change_password' %}" class="btn btn-outline-secondary ms-2">Change Password</a>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
// Auto-submit the profile picture form when a file is selected
document.getElementById('profile-picture-input').addEventListener('change', function() {
    document.getElementById('profile-picture-form').submit();
});
</script>
{% endblock %}