{% extends view.base_template|default:"base.html" %}
{% load i18n static django_bootstrap5 utils %}

{% block content %}
    {% if participation.status not in participation.INVITED_SET %}
        <p class="alert alert-warning">{% translate 'Appointments only available for participating subjects' %}</p>
    {% endif %}

    {% if study.session_instructions %}
        {{ study.session_instructions|urlize|linebreaks }}
    {% endif %}

    <form method="post">
        {% include 'utils/form_errors.html' with form=form %}
        {% csrf_token %}

        <dl class="row">
            <dt class="col-sm-6">{{ study|verbose_name:'sessions_start' }}</dt>
            <dd class="col-sm-6">
                <time id="sessions-start" datetime="{{ study.sessions_start|date:'c' }}">{{ study|display:'sessions_start' }}</time>
            </dd>

            <dt class="col-sm-6">{{ study|verbose_name:'sessions_end' }}</dt>
            <dd class="col-sm-6">
                <time id="sessions-end" datetime="{{ study.sessions_end|date:'c' }}">{{ study|display:'sessions_end' }}</time>
            </dd>
        </dl>

        {% for entry in form.appointments %}
            <fieldset class="mb-3">
                <legend>{{ entry.legend }}</legend>
                <div class="mb-2">
                    {% bootstrap_field entry.field wrapper_class="" %}
                    {% if entry.invitation_url == 'error' %}
                        <span class="text-danger">{% translate 'Error while contacting schedule' %}</span>
                    {% elif entry.invitation_url %}
                        <a id="invitation_url_{{ entry.field.id_for_label }}" href="{{ entry.invitation_url }}" target="_blank">{% translate 'Select timeslot for this subject' %}</a>
                        <button type="button" class="btn btn-sm btn-light" tabindex="-1" data-clipboard="#invitation_url_{{ entry.field.id_for_label }}" data-animation="success" title="{% translate 'Copy link' %}">
                            {% icon 'copy' label=_('Copy link') %}
                        </button>
                    {% endif %}
                </div>
                <div data-js="d-select2-clear">
                    {% bootstrap_field entry.assigned_conductors %}
                </div>
                {% if entry.reminder_text %}
                    <div class="form-text">{{ entry.reminder_text }}</div>
                {% endif %}
                {% if entry.first_reminder_days %}
                    <div class="form-text">{% blocktranslate with reminder_days=entry.first_reminder_days %}The subject will be reminded {{ reminder_days }} days before the appointment.{% endblocktranslate %}</div>
                {% endif %}
            </fieldset>
        {% endfor %}

        <div class="d-print-none mb-3">
            <a href="{% url 'recruitment:calendar' study.pk %}" class="btn btn-secondary" data-js="popup">{% translate 'Calendar' %}</a>
        </div>

        {% bootstrap_field form.send_notifications %}

        <div class="d-print-none mb-3">
            <button class="btn btn-primary">{% translate 'Save' %}</button>
        </div>
    </form>
{% endblock %}

{% block extra_scripts %}
    <script type="module" src="{% static 'js/appointments-form.js' %}"></script>
{% endblock %}