erpnext/www/book-appointment/2.html

{% extends "templates/web.html" %}

{% block title %}{{ _("Book Appointment") }}{% endblock %}

{% block page_content %}
<style>
    .time-slot {
        margin: 0 0;
        border: 0.5px solid #cccccc;
        min-height: 100px;
    }

    .time-slot:hover {
        background: #ddd;
    }

    .time-slot.unavailable {
        background: #bbb;

        color: #777777
    }

    input[type="radio"] {
        visibility: hidden;
        display: none;
    }

    .time-slot.selected {
        color: white;
        background: #5e64ff;
    }
</style>
<div class="container">
    <div class="text-center mb-5">
        {% if is_holiday %}
        <h3> This day is a holiday</h3>
        {% else %}
        <h3>Pick A Time Slot</h3>
        <h4>Selected date is {{ date }}</h4>
    </div>
    <!-- Start of main content-->

    <div class="mt-3 justify-content-center">
        <div class="row">
            {% for timeslot in timeslots %}
                <div class="col-md time-slot {% if timeslot.unavailable %}unavailable{% endif %}" id="{{ timeslot.time.time() }}">{{ timeslot.time.time().strftime('%H : %M') }}</div>
            {% endfor %}
        </div>
        <div class="row justify-content-center">
            <div class="col-md-4 align-self-center">
                <button class="form-control mt-5 btn btn-dark" onclick="next()">
                    Next
                </button>
            </div>
        </div>
        {% endif %}
    </div>
</div>
<!-- End of main content --> 
{% endblock %}