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

{% block head %}
    <!-- Add any additional head-specific content here -->
{% endblock %}

{% block title %}
    Shiraz Center
{% endblock %}

{% block body %}
    <div class="">
        <h2>Edit profile</h2>
        <hr>

        {% if messages %}
        {% for message in messages %}
            <div class="alert alert-{{ message.tags }} alert-dismissible fade show" role="alert">
                {{ message }}
                <button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
            </div>
        {% endfor %}
    {% endif %}

    
        {% if form.errors %}
        <div class="alert alert-danger" id="django-messages">
            <strong>There were some errors in your form:</strong>
            <ul>
            {% for field in form %}
                {% for error in field.errors %}
                    <li><strong>{{ field.label }}:</strong> {{ error }}</li>
                {% endfor %}
            {% endfor %}
            </ul>
        </div>
        {% endif %}
            <form method="post">
            {% csrf_token %}
            <div class="row mb-4">
                <div class="col-md-3 mt-2">
                    <label for="{{ form.first_name.id_for_label }}" class="form-label">First name</label>
                    {{ form.first_name }}
                </div>
                <div class="col-md-3 mt-2">
                    <label for="{{ form.last_name.id_for_label }}" class="form-label">Last name</label>
                    {{ form.last_name }}
                </div>
                <div class="col-md-3 mt-2">
                    <label for="{{ form.access_level.id_for_label }}" class="form-label">Access level</label>
                    {{ form.access_level }}
                </div>
                <div class="col-md-3 mt-2">
                    <label for="{{ form.password.id_for_label }}" class="form-label">Password</label>
                    {{ form.password }}
                </div>
                <div class="col-md-3 mt-2">
                    <label for="{{ form.confirm_password.id_for_label }}" class="form-label">Confirm Password</label>
                    {{ form.confirm_password }}
                </div>
            </div>

            <button type="submit" class="btn btn-success w-100">Save changes</button>
        </form>
        <form method="post" action="{% url 'userauth:security-delete' id=user.id %}">
            {% csrf_token %}
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-danger w-100" onclick="return confirm('Are you sure you want to delete this employ?');">Delete Employee</button>
            </div>
        </form>
    </div>

<script>
    // Auto-dismiss alerts after 2 seconds
    document.addEventListener('DOMContentLoaded', function() {
        setTimeout(function() {
            var alerts = document.querySelectorAll('.alert');
            alerts.forEach(function(alert) {
                var bsAlert = new bootstrap.Alert(alert);
                bsAlert.close();
            });
        }, 3000);
    });
</script>

    
{% endblock %}