<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{{ file_set.name }} - Presigned URLs</title>
    <link rel="stylesheet" type="text/css" href="{{ style.skin_css }}">
    <link rel="stylesheet" type="text/css" href="/static/legacy/style.css">
</head>
<body>
    {% include 'legacy/bloom_header.html' %}

    <h1>{{ file_set.euid }} - Presigned URLs</h1>
    <small>{{ file_set.json_addl.get('properties','').get('name','') }}</small>
        <hr>
    <table id="urls-table" border="1">
        <thead>
            <tr>
                <th onclick="sortTable(0)">File EUID</th>
                <th onclick="sortTable(1)">Original File Name</th>
                <th onclick="sortTable(2)">File Reference EUID</th>
                <th onclick="sortTable(3)">Presigned URL</th>
                <th onclick="sortTable(4)">Valid Start Datetime</th>
                <th onclick="sortTable(5)">Valid End Datetime</th>
            </tr>
        </thead>
        <tbody>
            {% for ref in shared_refs %}
            <tr>
                <td><a target=euid href=/euid_details?euid={{ ref.orig_file.euid }} >{{ ref.orig_file.euid }} </a></td>
                <td>{{ ref.orig_file.json_addl.get('properties','').get('original_file_name') }} </td>
                <td><a target=euid href=/euid_details?euid={{ ref.euid }}>{{ ref.euid }} </a></td>
                <td><a href="{{ ref.url }}" target="_blank">{{ ref.url }}</a></td>
                <td>{{ ref.start_datetime }}</td>
                <td>{{ ref.end_datetime }}</td>

            </tr>
            {% endfor %}
        </tbody>
    </table>

    <button class="floating-button" onclick="downloadTableAsTSV()">⬇️ Download TSV</button>

    <script>
        let sortDirections = Array(8).fill(true); // Track sort direction for each column

        function sortTable(columnIndex) {
            const table = document.getElementById('urls-table');
            const tbody = table.tBodies[0];
            const rows = Array.from(tbody.rows);

            const direction = sortDirections[columnIndex] ? 1 : -1;

            const sortedRows = rows.sort((a, b) => {
                const cellA = a.cells[columnIndex].innerText.toLowerCase();
                const cellB = b.cells[columnIndex].innerText.toLowerCase();

                if (cellA < cellB) return -1 * direction;
                if (cellA > cellB) return 1 * direction;
                return 0;
            });

            tbody.append(...sortedRows);
            sortDirections[columnIndex] = !sortDirections[columnIndex]; // Toggle sort direction
        }

        function downloadTableAsTSV() {
            const table = document.getElementById('urls-table');
            const rows = Array.from(table.rows);
            const tsv = rows.map(row => {
                const cells = Array.from(row.cells);
                return cells.map(cell => cell.innerText).join('\t');
            }).join('\n');

            const tsvFile = new Blob([tsv], { type: 'text/tab-separated-values' });
            const downloadLink = document.createElement('a');
            const now = new Date();
            const timestamp = now.toISOString().slice(0, 19).replace(/[:T]/g, '-');
            downloadLink.download = `file_set_urls_${timestamp}.tsv`;
            downloadLink.href = URL.createObjectURL(tsvFile);
            document.body.appendChild(downloadLink);
            downloadLink.click();
            document.body.removeChild(downloadLink);
        }
    </script>

    <style>
        .floating-button {
            position: fixed;
            bottom: 10px;
            right: 10px;
            padding: 10px;
            background-color: #008CBA; /* Blue background */
            color: white; /* White text */
            border: none;
           
