{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}
{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/services.css' %}"/>
{% endblock %}
{% block title %}
    {% trans 'Service List' %}
{% endblock %}
{% block description %}
    {% trans 'Service List' %}.
{% endblock %}
{% block djappt_content %}
    {% translate "Confirm Deletion" as modal_title %}
    {% translate "Delete" as delete_btn_modal %}
    {% translate "Are you sure you want to delete this service?" as d_modal_message %}
    <div class="djappt-shell djappt-services content content-wrapper">
        {% if messages %}
            <div class="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 %}
            </div>
        {% endif %}

        <header class="djappt-page-head">
            <div>
                <h1 class="djappt-title">{% trans 'Service List' %}</h1>
            </div>
            <div class="djappt-page-tools">
                {# Cards or list; shown by service_list.js, which remembers the choice in this browser #}
                {% if services %}
                    <div class="djappt-view-switch" role="group" aria-label="{% trans 'Display' %}" hidden>
                        <button type="button" class="djappt-view-switch-btn" data-view="cards" aria-pressed="true"
                                title="{% trans 'Cards' %}">
                            <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                <path d="M1 2.5A1.5 1.5 0 0 1 2.5 1h3A1.5 1.5 0 0 1 7 2.5v3A1.5 1.5 0 0 1 5.5 7h-3A1.5 1.5 0 0 1 1 5.5zM2.5 2a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 1h3A1.5 1.5 0 0 1 15 2.5v3A1.5 1.5 0 0 1 13.5 7h-3A1.5 1.5 0 0 1 9 5.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zM1 10.5A1.5 1.5 0 0 1 2.5 9h3A1.5 1.5 0 0 1 7 10.5v3A1.5 1.5 0 0 1 5.5 15h-3A1.5 1.5 0 0 1 1 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5zm6.5.5A1.5 1.5 0 0 1 10.5 9h3a1.5 1.5 0 0 1 1.5 1.5v3a1.5 1.5 0 0 1-1.5 1.5h-3A1.5 1.5 0 0 1 9 13.5zm1.5-.5a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h3a.5.5 0 0 0 .5-.5v-3a.5.5 0 0 0-.5-.5z"/>
                            </svg>
                            <span class="visually-hidden">{% trans 'Cards' %}</span>
                        </button>
                        <button type="button" class="djappt-view-switch-btn" data-view="list" aria-pressed="false"
                                title="{% trans 'List' %}">
                            <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                <path fill-rule="evenodd" d="M5 11.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m0-4a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 0 1h-9a.5.5 0 0 1-.5-.5m-3 1a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2m0 4a1 1 0 1 0 0-2 1 1 0 0 0 0 2"/>
                            </svg>
                            <span class="visually-hidden">{% trans 'List' %}</span>
                        </button>
                    </div>
                {% endif %}
                {% if request.user.is_superuser %}
                    <a class="btn djappt-btn djappt-btn-primary" href="{% url 'appointment:add_service' %}">
                        <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                            <path d="M8 2a.75.75 0 0 1 .75.75v4.5h4.5a.75.75 0 0 1 0 1.5h-4.5v4.5a.75.75 0 0 1-1.5 0v-4.5h-4.5a.75.75 0 0 1 0-1.5h4.5v-4.5A.75.75 0 0 1 8 2"/>
                        </svg>
                        {% trans 'Add Service' %}</a>
                {% endif %}
            </div>
        </header>

        {% if services %}
            <ul class="djappt-service-grid" id="djappt-service-grid">
                {% for service in services %}
                    <li class="djappt-service-tile" style="--djappt-service-color: {{ service.background_color }}">
                        <a class="djappt-service-cover{% if service.get_image_url %} djappt-service-cover--image{% endif %}"
                           href="{% url 'appointment:view_service' service_id=service.id view=1 %}" tabindex="-1" aria-hidden="true">
                            {# An image that fails to load falls back to the colour and the initial #}
                            {% if service.get_image_url %}
                                <img src="{{ service.get_image_url }}" alt="" loading="lazy"
                                     onerror="this.parentNode.classList.remove('djappt-service-cover--image'); this.nextElementSibling.hidden = false; this.remove()">
                            {% endif %}
                            <span class="djappt-service-initial"{% if service.get_image_url %} hidden{% endif %}>{{ service.name|first|upper }}</span>
                        </a>
                        {% if service.id in offered_service_ids %}
                            <span class="djappt-service-offered djappt-service-offered--cover">
                                <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                    <path d="M13.854 3.646a.5.5 0 0 1 0 .708l-7 7a.5.5 0 0 1-.708 0l-3.5-3.5a.5.5 0 1 1 .708-.708L6.5 10.293l6.646-6.647a.5.5 0 0 1 .708 0"/>
                                </svg>
                                <span class="djappt-service-offered-text">{% trans 'You offer this service' %}</span></span>
                        {% endif %}
                        <div class="djappt-service-body">
                            <h2 class="djappt-service-title">
                                <a href="{% url 'appointment:view_service' service_id=service.id view=1 %}">{{ service.name }}</a>
                            </h2>
                            {% if service.description %}
                                <p class="djappt-service-desc">{{ service.description }}</p>
                            {% endif %}
                            <ul class="djappt-service-facts">
                                <li>
                                    <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                        <path d="M8 3.5a.5.5 0 0 0-1 0V9a.5.5 0 0 0 .252.434l3.5 2a.5.5 0 0 0 .496-.868L8 8.71z"/>
                                        <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m7-8A7 7 0 1 1 1 8a7 7 0 0 1 14 0"/>
                                    </svg>
                                    <span class="visually-hidden">{% trans 'Duration' %}:</span> {{ service.get_duration }}
                                </li>
                                <li class="djappt-service-price">
                                    <span class="visually-hidden">{% trans 'Price' %}:</span> {{ service.get_price_text }}
                                </li>
                            </ul>
                        </div>
                        <div class="djappt-service-foot">
                            <a class="djappt-service-more" href="{% url 'appointment:view_service' service_id=service.id view=1 %}">
                                {% trans 'View' %}
                                <span class="visually-hidden">{{ service.name }}</span>
                                <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                    <path d="M5.646 3.146a.5.5 0 0 1 .708 0l4.5 4.5a.5.5 0 0 1 0 .708l-4.5 4.5a.5.5 0 0 1-.708-.708L9.793 8 5.646 3.854a.5.5 0 0 1 0-.708"/>
                                </svg>
                            </a>
                            {% if request.user.is_superuser %}
                                <span class="djappt-service-tools">
                                    <a href="{% url 'appointment:update_service' service_id=service.id %}"
                                       class="btn djappt-btn djappt-btn-ghost djappt-icon-btn"
                                       title="{% trans 'Edit' %}" aria-label="{% trans 'Edit' %}: {{ service.name }}">
                                        <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                            <path d="M12.146.146a.5.5 0 0 1 .708 0l3 3a.5.5 0 0 1 0 .708l-10 10a.5.5 0 0 1-.168.11l-5 2a.5.5 0 0 1-.65-.65l2-5a.5.5 0 0 1 .11-.168zM11.207 2.5 13.5 4.793 14.793 3.5 12.5 1.207zm1.586 3L10.5 3.207 4 9.707V10h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.293zm-9.761 5.175-.106.106-1.528 3.821 3.821-1.528.106-.106A.5.5 0 0 1 5 12.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.468-.325"/>
                                        </svg>
                                    </a>
                                    <button type="button"
                                            onclick="showModal('{{ modal_title|escapejs }}', '{{ d_modal_message|escapejs }}', '{{ delete_btn_modal|escapejs }}', '{% url 'appointment:delete_service' service_id=service.id %}', null)"
                                            class="btn djappt-btn djappt-btn-ghost djappt-text-danger djappt-icon-btn"
                                            title="{% trans 'Delete' %}" aria-label="{% trans 'Delete' %}: {{ service.name }}">
                                        <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                                            <path d="M11 1.5v1h3.5a.5.5 0 0 1 0 1h-.538l-.853 10.66A2 2 0 0 1 11.115 16h-6.23a2 2 0 0 1-1.994-1.84L2.038 3.5H1.5a.5.5 0 0 1 0-1H5v-1A1.5 1.5 0 0 1 6.5 0h3A1.5 1.5 0 0 1 11 1.5m-5 0v1h4v-1a.5.5 0 0 0-.5-.5h-3a.5.5 0 0 0-.5.5M4.5 5.029l.5 8.5a.5.5 0 1 0 .998-.06l-.5-8.5a.5.5 0 1 0-.998.06m6.53-.528a.5.5 0 0 0-.528.47l-.5 8.5a.5.5 0 0 0 .998.058l.5-8.5a.5.5 0 0 0-.47-.528M8 4.5a.5.5 0 0 0-.5.5v8.5a.5.5 0 0 0 1 0V5a.5.5 0 0 0-.5-.5"/>
                                        </svg>
                                    </button>
                                </span>
                            {% endif %}
                        </div>
                    </li>
                {% endfor %}
                {% if request.user.is_superuser %}
                    <li class="djappt-service-tile djappt-service-tile--add">
                        <a href="{% url 'appointment:add_service' %}">
                            <span class="djappt-service-add-icon" aria-hidden="true">+</span>
                            {% trans 'Add Service' %}</a>
                    </li>
                {% endif %}
            </ul>
        {% else %}
            <div class="djappt-card djappt-center">
                <p class="djappt-lead my-2">{% trans 'No service found' %}.</p>
            </div>
        {% endif %}
        {% 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>
    <script src="{% static 'js/app_admin/service_list.js' %}"></script>
{% endblock %}