{% extends "appointment/layout.html" %}
{% load i18n %}
{% load static %}

{% block customCSS %}
    <link rel="stylesheet" type="text/css" href="{% static 'css/staff.css' %}"/>
{% endblock %}
{% block title %}
    {% trans 'Staff Appointment Information' %}
{% endblock %}
{% block description %}
    {% trans 'Staff Appointment Information' %}
{% endblock %}

{% block djappt_content %}
    <div class="djappt-shell djappt-staff djappt-staff-form-page content content-wrapper">
        {% include "appointment/_messages.html" %}

        {% block djappt_back %}
        <a class="djappt-back" href="{{ back_url }}">
            <svg class="djappt-icon" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
                <path d="M10.354 3.146a.5.5 0 0 1 0 .708L6.207 8l4.147 4.146a.5.5 0 0 1-.708.708l-4.5-4.5a.5.5 0 0 1 0-.708l4.5-4.5a.5.5 0 0 1 .708 0"/>
            </svg>
            {% trans 'Back' %}</a>
        {% endblock %}

        {# Whose settings these are; a new staff member has no user yet #}
        <header class="djappt-profile-head">
            {% if form.instance.user_id %}
                {% with name=form.instance.get_staff_member_name %}
                    <span class="djappt-avatar" aria-hidden="true">{{ name|first|upper }}</span>
                    <div class="djappt-profile-name">
                        <p class="djappt-eyebrow">{% trans 'Staff Appointment Information' %}</p>
                        <h1 class="djappt-title">{{ name }}</h1>
                    </div>
                {% endwith %}
            {% else %}
                <div class="djappt-profile-name">
                    <p class="djappt-eyebrow">{% trans 'Staff Appointment Information' %}</p>
                    <h1 class="djappt-title">{% trans 'Add staff member' %}</h1>
                </div>
            {% endif %}
        </header>

        <form method="post" class="djappt-card djappt-form djappt-staff-form">
            {% csrf_token %}
            {% if form.non_field_errors %}
                <div class="alert alert-danger">{{ form.non_field_errors }}</div>
            {% endif %}

            {% if form.user %}
                <section class="djappt-form-section">
                    <label class="djappt-card-title" for="{{ form.user.id_for_label }}">{{ form.user.label }}</label>
                    {{ form.user }}
                    {% for error in form.user.errors %}
                        <div class="djappt-field-error">{{ error }}</div>
                    {% endfor %}
                    <p class="djappt-note">
                        {% translate 'User not found' %} ? <a href="{% url 'appointment:add_staff_member_personal_info' %}">{% translate 'Create staff member manually' %}</a>
                    </p>
                </section>
            {% endif %}

            {# One checkbox per service, in the service's colour; they post the same values as the multiple select did #}
            <fieldset class="djappt-form-section">
                <legend class="djappt-card-title">{{ form.services_offered.label }}</legend>
                <ul class="djappt-choices">
                    {% for choice in form.services_offered %}
                        <li>
                            <label class="djappt-choice" for="{{ choice.id_for_label }}"
                                   style="--djappt-service-color: {{ choice.data.value.instance.background_color }}">
                                {{ choice.tag }}
                                <span class="djappt-swatch" aria-hidden="true"></span>
                                <span>{{ choice.choice_label }}</span>
                            </label>
                        </li>
                    {% empty %}
                        <li class="djappt-empty">{% trans 'No service offered yet' %}.</li>
                    {% endfor %}
                </ul>
                {% for error in form.services_offered.errors %}
                    <div class="djappt-field-error">{{ error }}</div>
                {% endfor %}
            </fieldset>

            {# The working day, the slots and the weekends: the label and its explanation, the field on the right #}
            <section class="djappt-form-section">
                <h2 class="djappt-card-title">{% trans 'Schedule' %}</h2>
                <div class="djappt-settings">
                    {% for field in form %}
                        {% if field.name == 'lead_time' or field.name == 'finish_time' or field.name == 'slot_duration' or field.name == 'appointment_buffer_time' %}
                            <div class="djappt-setting djappt-field--{{ field.name }}">
                                <div class="djappt-setting-text">
                                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {% if field.help_text %}
                                        <div class="djappt-help">{{ field.help_text }}</div>
                                    {% endif %}
                                    {% for error in field.errors %}
                                        <div class="djappt-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>
                                <div class="djappt-setting-control">
                                    {% if field.name == 'slot_duration' or field.name == 'appointment_buffer_time' %}
                                        <div class="input-group">
                                            {{ field }}
                                            <span class="input-group-text">{% trans 'min' context 'minutes, short' %}</span>
                                        </div>
                                    {% else %}
                                        {{ field }}
                                    {% endif %}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                    {% for field in form %}
                        {% if field.name == 'work_on_saturday' or field.name == 'work_on_sunday' %}
                            <div class="djappt-setting djappt-field--{{ field.name }}">
                                <div class="djappt-setting-text">
                                    <label class="form-label" for="{{ field.id_for_label }}">{{ field.label }}</label>
                                    {% for error in field.errors %}
                                        <div class="djappt-field-error">{{ error }}</div>
                                    {% endfor %}
                                </div>
                                <div class="djappt-setting-control form-check form-switch">
                                    {{ field }}
                                </div>
                            </div>
                        {% endif %}
                    {% endfor %}
                </div>
            </section>

            <div class="djappt-form-actions">
                <a class="btn djappt-btn djappt-btn-ghost" href="{{ back_url }}">{% trans 'Cancel' %}</a>
                <button type="submit" class="btn djappt-btn djappt-btn-primary">{% trans 'Save' %}</button>
            </div>
        </form>
    </div>
{% endblock %}

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