{% extends 'esign/base_login.html' %}

{% block content %}



<script>
document.addEventListener("DOMContentLoaded", function() {

    let url = window.location.pathname;  
        // /sign/82c4e3.../c2F1cm...
        
        let parts = url.split("/");  
        // ["", "sign", "82c4e3...", "c2F1..."]

        let token = parts[2];  // <-- token yaha se mil jayega
        
    fetch(`/view-status/${token}/`, {
        method: "GET",
        headers: {
            "X-Requested-With": "XMLHttpRequest"
        }
    })
    .then(response => response.json())
    .then(data => {
        console.log("View status:", data);
    })
    .catch(error => console.error("Error:", error));

});
</script>
<div class="container-fluid vh-100 p-0" style="font-family: 'Inter', sans-serif;">
    <div class="row g-0 h-100">
        <!-- PDF Viewer Only -->
        <div class="col-12 h-100">
            <div class="card shadow-sm border-0 h-100 m-2">
                <div class="card-body p-3 d-flex flex-column">
                    <h4 class="text-success fw-bold mb-3 text-center">Document Preview</h4>
                    {% if document %}
                        <iframe src="{{ document.file.url }}#toolbar=0" 
                                class="rounded flex-grow-1" 
                                style="border: none; width: 100%; height: 100%; min-height: 400px;">
                        </iframe>
                    {% else %}
                        <p class="text-center text-danger">No document available to display.</p>
                    {% endif %}
                </div>
            </div>
        </div>
    </div>
</div>

<!-- Custom responsive tweaks -->
<style>
@media (max-width: 768px) {
    iframe {
        min-height: 600px; /* make PDF taller on mobile */
    }
    h4 {
        font-size: 1.4rem !important;
    }
}
</style>
{% endblock %}