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

{% block head %}
{% endblock %}

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

{% block body %}
    <div class="content">
        <h2>Edit service</h2>
        <hr>
        
        {% if messages %}
        <div class="messages">
            {% for message in messages %}
            <div class="alert alert-{% if message.tags %}{{ 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="text-danger">
                            {{ 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="text-danger">
                            {{ form.unit_price.errors }}
                        </div>
                    {% endif %}
                            </div>
            </div>

            <div class="text-center">
                <button type="submit" class="btn btn-success d-inline-block w-25">Save changes</button>
            </div>
        </form>
        <form method="post" action="{% url 'core:service-delete' id=service.id %}">
            {% csrf_token %}
            <div class="text-center mt-4">
                <button type="submit" class="btn btn-danger d-inline-block w-25">Delete the service</button>
            </div>
        </form>

    </div>
    <script>
        document.addEventListener('DOMContentLoaded', (event) => {
            const messages = document.querySelector('.messages');
            if (messages) {
                setTimeout(function() {
                    messages.remove();
                }); 
            }
        });
    </script>
    
{% endblock %}