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

{% block content %}
    {% if participation.status != participation.INVITED %}
        <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>
        <p>
            {% blocktranslate with reminder_period=reminder_period %}The subject will be reminded {{ reminder_period }} days before each appointment.{% endblocktranslate %}
        </p>

        {% for entry in form.appointments %}
            <div class="mb-3">
                {% bootstrap_field entry.field wrapper_class="" %}
                {% if 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>
        {% 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>

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

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