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

{% block head %}{% endblock %}

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

{% block body %}
<div class="content">
    <h2>Add new services</h2>
    <hr>

    {% if messages %}
    <div class="messages">
        {% for message in messages %}
        <div class="alert {% if message.tags %}alert-{{ message.tags }}{% endif %}" role="alert">
            {{ message }}
        </div>
        {% endfor %}
    </div>
    {% endif %}

    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        <div class="row mb-4">
            <div class="col-md-6 mt-2">
                {{ form.name.label_tag }}
                {{ form.name }}
                {% if form.name.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.name.errors }}
                </div>
                {% endif %}
            </div>
            <div class="col-md-6 mt-2">
                {{ form.unit_price.label_tag }}
                {{ form.unit_price }}
                {% if form.unit_price.errors %}
                <div class="invalid-feedback d-block">
                    {{ form.unit_price.errors }}
                </div>
                {% endif %}
            </div>
        </div>
        <button type="submit" class="btn btn-success w-100">Add new services</button>
    </form>
</div>
<script>
    document.addEventListener('DOMContentLoaded', (event) => {
        const messages = document.querySelector('.messages');
        if (messages) {
            setTimeout(function() {
                messages.remove();
            }); 
        }
    });
</script>

{% endblock %}