{% extends 'base.html' %}
{% load i18n %}
{% load static %}
{% block title %}
    {% trans 'Service List' %}
{% endblock %}
{% block description %}
    {% trans 'Service List' %}.
{% endblock %}
{% block body %}
    {% translate "Confirm Deletion" as modal_title %}
    {% translate "Delete" as delete_btn_modal %}
    <div class="row">
        <div class="col-6">
            <h2 class="section-header-itm">{% trans 'Service List' %}</h2>
        </div>
        <div class="table-responsive px-1">
            <table class="table table-sm fs-9 mb-0">
                <thead>
                    <tr>
                        <th class="fw-bold"></th>
                        <th class="fw-bold">{% trans 'Name' %}</th>
                        <th class="fw-bold">{% trans 'Duration' %}</th>
                        <th class="fw-bold">{% trans 'Price' %}</th>
                        <th class="fw-bold">{% trans 'Action' %}</th>
                    </tr>
                </thead>
                <tbody>
                    {% for service in services %}
                        <tr>
                            <td>
                                <img class="rounded-soft"
                                     src="{{ service.get_image_url }}"
                                     alt=""
                                     style="width: 35px;
                                            height: 35px" />
                            </td>
                            <td>{{ service.name }}</td>
                            <td>{{ service.get_duration }}</td>
                            <td>{{ service.get_price_text }}</td>
                            <td>
                                <div class="btn-group btn-group-sm">
                                    <a href="{% url 'appointment:view_service' service_id=service.id view=1 %}"
                                       class="btn btn-sm btn-phoenix-success me-2">
                                        <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="btn btn-sm btn-phoenix-primary me-2">
                                            <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="btn btn-sm btn-phoenix-danger me-2">
                                            <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>
        {% include 'modal/confirm_modal.html' %}
    </div>
{% endblock %}
{% block customJS %}
    <script src="{% static 'js/modal/show_modal.js' %}"></script>
    <script src="{% static 'js/js-utils.js' %}"></script>
{% endblock %}