<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org" lang="en">
<head>
    <title>eSign</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <link th:href="@{/static/css/bootstrap-5.3.3.min.css}" rel="stylesheet" />
    <link th:href="@{/static/css/font-awesome-4.7.0.min.css}" rel="stylesheet" />
    <link th:href="@{/static/css/esign-toast.css}" rel="stylesheet" />

    <script th:src="@{/static/js/jquery-3.7.1.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/esign-toast.js}" type="text/javascript"></script>
    <script th:src="@{/static/webViewer/lib/webviewer.min.js}" type="text/javascript"></script>
    <script th:src="@{/static/js/bootstrap-5.3.3.min.js}" type="text/javascript"></script>
    <script th:inline="javascript"> var contextRoot = /*[[@{/}]]*/ '';</script>
    <script th:src="@{/static/js/viewer.js}" type="text/javascript"></script>


    <style>
        #pdfViewer {
            width: 100vh;
        }
        .alert {
            padding: 5px 10px !important;
        }
        .eSignLoadingSpinner {
            background: rgba(0, 0, 0, 0.1) no-repeat scroll center center;
            display: none;
            height: 100%;
            left: 0;
            position: fixed;
            top: 0;
            width: 100%;
            z-index: 999;
            text-align: center;
        }

        .eSignLoadingSpinner i {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }

        .declined-document-modal-backdrop {
            position: fixed;
            top: 0;
            left: 0;
            z-index: 1055;
            width: 100vw;
            height: 100vh;
            background-color: #000;
        }

        .declined-document-modal-backdrop.show {
            opacity: .5;
        }
    </style>
</head>
<body style="margin: 0">

    <!--Loading Spinner-->
    <div class="eSignLoadingSpinner" style="display: none;z-index:9999999999"><i class="fa fa-spinner fa-spin fa-2x"></i></div>

    <!-- Hidden input to store the isValidUrl value -->
    <input type="hidden" id="isValidUrl" th:value="${isValidUrl}" />
    <input type="hidden" id="pdfDetails" th:value="${pdfDetails}" />
    <input type="hidden" id="uniqueURL" th:value="${uniqueURL}" />
    <input type="hidden" id="isLocked" th:value="${isLocked}" />
    <input type="hidden" id="licenseKey" th:value="${licenseKey}" />


    <div class="modal fade" id="pdfViewerModal" tabindex="-1" aria-labelledby="pdfViewerModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-fullscreen">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="pdfViewerModalLabel"></h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="alert alert-info" style="display: flex;margin-bottom: 10px;" id="finishDocumentDiv" th:if='${!recipientStatus.equals("Completed") and !documentStatus.equals("Voided") and !documentStatus.equals("Expired")}'>
                        <span style="font-size: 14px;margin-top: 4px;font-weight: 600;">Please Review & Act on These Documents</span>
                        <div style="margin-left: auto">
                            <button class="btn btn-sm btn-danger" id="declineButton" disabled><i class='fa fa-ban' aria-hidden='true'></i> Decline</button>
                            <button class="btn btn-sm btn-primary" id="finishButton" disabled><i class='fa fa-floppy-o' aria-hidden='true'></i> Finish Document</button>
                        </div>
                    </div>
                    <div id="pdfViewer" style="width: 100%;"></div>
                </div>
            </div>
        </div>
    </div>


    <!--Declined Popup-->
    <div class="modal fade" id="declinedDocumentModal" tabindex="-1" aria-labelledby="declinedDocumentModalLabel" aria-hidden="true" style="z-index: 1060">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-6" id="declinedDocumentModalLabel">Are you sure you want to decline document?</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="declined_reason_main_container" style="display: flex;padding: 10px;justify-content: center;flex-direction: column;gap: 20px;">
                        <div class="actual_reason_div" style="display: flex;width: 100%;">
                            <span style="display: flex;gap: 5px;padding: 5px;border: 1px solid;border-radius: 10px;width: 100%;background: white;align-items: center;">
                                <textarea class="form-control" name="reason_for_void" id="reason_for_void" placeholder="Add Reason" rows="5" autocomplete="off"></textarea>
                            </span>
                        </div>
                        <span>Note : If you Decline this document then status of this document will be marked as Void.</span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times" style="margin-right: 3px;"></i>No</button>
                    <button type="button" class="btn btn-sm btn-success" id="declinedConfirmationButton"><i class="fa fa-check-square-o" style="margin-right: 3px;"></i>Yes</button>
                </div>
            </div>
        </div>
    </div>

    <!--Custom Modal BackDrop -->
    <div class="declined-document-modal-backdrop fade" style="display: none"></div>


    <!--View Next Document Popup-->
    <div class="modal fade" id="nextDocumentModal" tabindex="-1" aria-labelledby="nextDocumentModalLabel" aria-hidden="true" style="z-index: 1060">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <h1 class="modal-title fs-5" id="nextDocumentModalLabel">You're Done! Want To Sign Another Document?</h1>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="row p-2">
                        <div class="col-sm-12">
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">Name</label>
                                <span class="col-md-8" id="documentName"></span>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">Description</label>
                                <span class="col-md-8 text-break" id="documentDescription"></span>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">File Name</label>
                                <span class="col-md-8" id="documentFileName"></span>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">Creator Name</label>
                                <span class="col-md-8" id="documentCreatorName"></span>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">Expiry Date</label>
                                <span class="col-md-8 text-danger" id="documentExpiryDate"></span>
                            </div>
                            <div class="row mb-3">
                                <label class="col-md-4 fw-semibold">Sent On</label>
                                <span class="col-md-8" id="documentSentOn"></span>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-sm btn-success" id="signNextDocumentButton">Sign Next Document <i class="fa fa-arrow-circle-right" style="margin-left: 3px;"></i></button>
                    <button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal"><i class="fa fa-times" style="margin-right: 3px;"></i>No Thanks</button>
                </div>
            </div>
        </div>
    </div>
</body>
</html>
<script>
</script>

Can you make this as mobile freidly also