<style>
.file-link {
    margin: 10px 0;
}

.file-item {
    text-decoration: none;
    color: #333;
    padding: 8px 16px;
    border: 1px solid #ddd;
    border-radius: 4px;
    display: inline-block;
    background-color: #ffffff;
}

.file-item:hover {
    background-color: #f5f5f5;
    color: #000;
}
body{
    font-family: 'Lato' , sans-serif;
    background-color: #f1f1f1;
}

.container{
    padding: 20px;
}
</style>
<div class="container">
<h2>{{title}}</h2>

{{#each files}}
    <div class="file-link">
        <form action="/print/download/" method="POST" style="display: inline;">
            <input type="hidden" name="print_id" value="{{../print_id}}">
            <input type="hidden" name="filename" value="{{this}}">
            <span style="width: 200px; display: inline-block;">{{this}}</span>
            <button type="submit" class="file-item">Download</button>
        </form>
    </div>
{{/each}}

<br>
<form action="/print/allzip" method="POST" style="display: inline;">
    <input type="hidden" name="print_id" value="{{print_id}}">
    <span style="width: 200px; display: inline-block;">Download All (zip)</span>
    <button type="submit" class="file-item">Download</button>
</form>
</div>

<br>

<div id="warningDialog" class="warning-dialog" style="display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: white; padding: 20px; border: 1px solid #ccc; border-radius: 5px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); z-index: 1000;">
    <h3 style="margin-top: 0;">Warning</h3>
    <p>Are you sure you want to proceed with placing this order? This will send the order to the Skyou OMS system and cannot be undone.</p>
    <div style="text-align: right; margin-top: 15px;">
        <button onclick="hideWarning()" class="file-item" style="margin-right: 10px;">Cancel</button>
        <button onclick="proceedWithOrder()" class="file-item">Proceed</button>
    </div>
</div>


<div class="container" style="margin-top: 100px;">
<form action="/orders/oms" method="POST" style="display: inline;">
    <input type="hidden" name="print_id" value="{{print_id}}">
    <span style="width: 200px; display: inline-block;">Place Production Order</span>
    <button type="submit" class="file-item">Order</button>
</form>
</div>

<script>
    function startup() {
        console.log("startup");
    }
function showWarning(e) {
    e.preventDefault();
    document.getElementById('warningDialog').style.display = 'block';
}

function hideWarning() {
    document.getElementById('warningDialog').style.display = 'none';
}

function proceedWithOrder() {
    hideWarning();
    document.querySelector('form[action="/orders/oms"]').submit();
}

// Add event listener to the order form
document.querySelector('form[action="/orders/oms"]').addEventListener('submit', showWarning);
</script>