{% extends "base.html" %}
{% block title %}{% endblock %}
{% block content %}
<div class="full-container lattan ">
    <div class="mobile-nav text-white">
        <a href="/back" class="back-button">
            <span class="material-symbols-outlined">
                arrow_back_ios
            </span>
        </a>
        <h4>{{scriptTitle}}</h4>
    </div>
    <div class="content-section" style="overflow-y: scroll;
    overflow-x: hidden;">
        <div class="result-section-lattan-result">
            <div class="row row-cols-1 g-4">
                {% for x in bookingData %}
                <div class="col">
                    <div class="card"
                        onclick="window.location.href='{{url_for('user_webview_direct.appointmentHistoryDetail',userID=userID,bookID=x['id'])}}'">
                        <div class="card-body">
                            <!-- <h4>session 1</h4> -->
                            <div class="mb-2 row justify-content-between">
                                <div class="col-auto">Session:</div>
                                <div class="col-auto d-flex align-items-center">
                                    <b>
                                        <script>
                                            document.write(moment('{{x['session']['start_session']}}', 'HH:mm:ss').format('hh:mm a'));
                                        </script>
                                    </b> &nbsp; -
                                    &nbsp;<b>
                                        <script>
                                            document.write(moment('{{x['session']['end_session']}}', 'HH:mm:ss').format('hh:mm a'));
                                        </script>
                                    </b>
                                </div>
                            </div>
                            <div class="mb-2 row justify-content-between">
                                <div class="col-auto">Date:</div>
                                <div class="col-auto"><b>{{x['date']}}</b></div>
                            </div>
                            <div class="mb-2 row justify-content-between">
                                <div class="col-auto">Status:</div>
                                <div class="col-auto">
                                    {% if x['status'] == '0' %}
                                    <i class="text-warning">Pending</i>
                                    {% elif x['status'] == '1' %}
                                    <i class="text-success">Confirmed</i>
                                    {% elif x['status'] == '2' %}
                                    <i class="text-danger">Canceled</i>
                                    {% endif %}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                {% endfor %}
            </div>
        </div>
    </div>

</div>

<script>
    $(document).ready(function () {
        var height = $(window).height()
        $('.content-section').css('height', height);
        $('.result-section-lattan').css('height', height);
    })
</script>
{% endblock %}