invitation_form.html

{% extends "base.html" %}
{% load static i18n bootstrap4 %}

{% block title %}{% translate "Schedule appointment" %}{% endblock %}

{% block content %}
    <h1>{{ object.schedule }}</h1>

    <form method="post">
        {% csrf_token %}

        {% bootstrap_form_errors form %}
        <p>{% translate 'Please select one of the available timeslots to make an appointment. You will still be able to change your selection later.' %}</p>

        <table class="table table-hover" data-js="multi-datetime">
            <thead>
                <tr>
                    <th></th>
                    {% for time in table.times %}
                        <th data-value="{{ time|date:'H:i' }}">{{ time }}</th>
                    {% endfor %}
                </tr>
            </thead>
            <tbody>
                {% for date, row in table.timeslots.items %}
                    <tr>
                        <th>{{ date }}</th>
                        {% for time, id in row.items %}
                            <td>
                                {% if id %}
                                    <input type="radio" name="timeslot" value="{{ id }}" {% if id == form.timeslot.value %}checked{% endif %}>
                                {% endif %}
                            </td>
                        {% endfor %}
                    </tr>
                {% endfor %}
            </tbody>
        </table>

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