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

{% block title %}
    {% trans 'Service List' %}
{% endblock %}
{% block description %}
    {% trans 'Service List' %}.
{% endblock %}
{% block body %}

        <div class="pt-5 pb-9">
            <section class="profile-section">
                <div class="section-header">
                    <h2 class="section-header-itm">{% trans 'Service List' %}</h2>
                </div>
                <div class="responsive-table-container">
                    <table>
                        <thead>
                        <tr>
                            <th>{% trans 'Name' %}</th>
                            <th>{% trans 'Duration' %}</th>
                            <th>{% trans 'Price' %}</th>
                            <th>{% trans 'Action' %}</th>
                        </tr>
                        </thead>
                        <tbody>
                        {% for service in services %}
                            <tr>
                                <td>{{ service.name }}</td>
                                <td>{{ service.get_duration }}</td>
                                <td>{{ service.get_price_text }}</td>
                                <td>
                                    <div class="buttons-container">
                                        <a href="{% url 'appointment:view_service' service_id=service.id view=1 %}"
                                           class="modify-btn button-color-green">
                                            <i class="fas fa-eye"></i>
                                        </a>
                                        {% translate "Are you sure you want to delete this service?" as d_modal_message %}
                                        {% if request.user.is_superuser %}
                                            <a href="{% url 'appointment:update_service' service_id=service.id %}"
                                               class="modify-btn button-color-blue">
                                                <i class="fas fa-pen"></i>
                                            </a>
                                            <a href="javascript:void(0)"
                                               onclick="showModal('{{ modal_title }}', '{{ d_modal_message }}', '{{ delete_btn_modal }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
                                               class="modify-btn button-color-red">
                                                <i class="fas fa-trash"></i>
                                            </a>
                                        {% endif %}
                                    </div>
                                </td>
                            </tr>
                        {% empty %}
                            <tr>
                                <td colspan="3">{% trans 'No service found' %}.</td>
                            </tr>
                        {% endfor %}
                        </tbody>
                    </table>
                </div>
            </section>
            <div class="messages" style="margin: 20px 0">
                {% if messages %}
                    {% for message in messages %}
                        <div class="alert alert-dismissible {% if message.tags %}alert-{% if message.level == DEFAULT_MESSAGE_LEVELS.ERROR %}danger{% else %}{{ message.tags }}{% endif %}{% endif %}"
                             role="alert">{{ message }}</div>
                    {% endfor %}
                {% endif %}
            </div>
        </div>

{% endblock %}

{% block customJS %}
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}