{% 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>Add New Employee</h2>
    <hr>
    {% 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" enctype="multipart/form-data">
        {% csrf_token %}
        
        <div class="row mb-4">
            <div class="col-md-3 mt-2">
                <label for="{{ form.first_name.id_for_label }}">{{ form.first_name.label }}</label>
                {{ form.first_name }}
            </div>
            <div class="col-md-3 mt-2">
                <label for="{{ form.last_name.id_for_label }}">{{ form.last_name.label }}</label>
                {{ form.last_name }}
            </div>
            <div class="col-md-3 mt-2">   
                <label for="{{ form.access_level.id_for_label }}">{{ form.access_level.label }}</label>
                {{ form.access_level }}
            </div>
            <div class="col-md-3 mt-2">
                <label for="{{ form.password.id_for_label }}">{{ form.password.label }}</label>
                {{ form.password }}
            </div>
            <div class="col-md-3 mt-2">
                <label for="{{ form.confirm_password.id_for_label }}">{{ form.confirm_password.label }}</label>
                {{ form.confirm_password }}
            </div>
        </div>

        <button type="submit" class="btn btn-success w-100">Add New Employee</button>
    </form>
</div>  
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const messages = document.querySelector('.django-messages');
        if (messages) {
            setTimeout(function() {
                messages.remove();
            }, 5000); 
        }
    });
</script>

{% endblock %}