<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-icons/1.8.1/font/bootstrap-icons.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdn.datatables.net/2.1.8/css/dataTables.dataTables.css" />
    <link rel="stylesheet" href="https://cdn.datatables.net/searchpanes/2.3.3/css/searchPanes.dataTables.css" />
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.3/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
    <script src="https://cdn.datatables.net/2.1.8/js/dataTables.js"></script>
    <script src="https://cdn.datatables.net/searchpanes/2.3.3/js/dataTables.searchPanes.js"></script>
    <script src="https://cdn.datatables.net/select/3.0.0/js/dataTables.select.js"></script>
    <title>{% block title %} {% endblock %} AIND Data Transfer Service Job Parameters</title>
    <style>
        body {
            margin: 20px;
            font-family: arial, sans-serif;
        }
        nav {
            height: 40px;
        }
        .modal-body {
            max-height: calc(100vh - 200px);
            overflow: auto;
        }
    </style>
</head>
<body>
    <nav>
        <a href="/">Submit Jobs</a> |
        <a href="/jobs">Job Status</a> |
        <a href="/job_params">Job Parameters</a> |
        <a title="Download job template as .xslx" href= "/api/job_upload_template" download>Job Submit Template</a> |
        <a title="List of project names" href= "{{ project_names_url }}" target="_blank" >Project Names</a> |
        <a title="For more information click here" href="https://aind-data-transfer-service.readthedocs.io"  target="_blank" >Help</a>
    </nav>
    <div class="content">
        <h4 class="mb-2">
            <!-- dropdown to switch version -->
            <div id="version-dropdown" class="btn-group mb-2">
                <button id="version-button" type="button" class="btn btn-primary dropdown-toggle" data-bs-toggle="dropdown">
                    {{default_version}}
                </button>
                <ul class="dropdown-menu">
                    {% for v in versions %}
                    <button class="dropdown-item" type="button">{{ v }}</button>
                    {% endfor %}
                </ul>
            </div>
            <span>Job Parameters</span>
        </h4>
        <!-- job params table -->
        <div>
            <table id="job-params-table" class="display compact table table-bordered table-sm" style="font-size: small">
                <thead>
                    <tr>
                        <th>Job Type</th>
                        <th>Task ID</th>
                        <th>Modality</th>
                        <th>Parameter Name</th>
                        <th>Last Modified</th>
                    </tr>
                </thead>
            </table>
            <!-- modal for displaying param value as json -->
            <div class="modal fade" id="param-modal" tabindex="-1" aria-labelledby="param-modal-label" aria-hidden="true">
                <div class="modal-dialog modal-xl">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title" id="param-modal-label"></h5>
                            <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                        </div>
                        <div class="modal-body">
                            <pre id="param-modal-content" class="bg-light p-1 border rounded"></pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        $(document).ready(function() {
            createJobParamsTable();
            // Event listeners for param value modal
            $('#param-modal').on('show.bs.modal', function(event) {
                var button = $(event.relatedTarget);
                var paramName = button.data('bs-param-name');
                var jobType = button.data('bs-job-type');
                var taskId = button.data('bs-task-id');
                var modality = button.data('bs-modality');
                // update the modal label and contents
                var modal = $(this);
                modal.find('#param-modal-label').text(paramName);
                var version = $('#version-button').text().trim();
                var getParameterUrl = `/api/${version}/parameters/job_types/${jobType}/tasks/${taskId}`;
                if (modality) {
                    getParameterUrl += `/${modality}`;
                }
                $.ajax({
                    url: getParameterUrl,
                    type: 'GET',
                    success: function(response) {
                        jsonStr = JSON.stringify(response.data, null, 3);
                        modal.find('#param-modal-content').text(jsonStr);
                    },
                    error: function(xhr, status, error) {
                        modal.find('#param-modal-content').text(error);
                    }
                });
            });
            $('#param-modal').on('hidden.bs.modal', function() {
                $(this).find('#param-modal-label').text('');
                $(this).find('#param-modal-content').text('');
            });
            // Event listener for version dropdown
            $('#version-dropdown .dropdown-item').on('click', function() {
                var version = $(this).text();
                if (version != $('#version-button').text().trim()) {
                    $('#version-button').text(version);
                    $('#job-params-table').DataTable().ajax.url(`/api/${version}/parameters`).load();
                }
            });
        });
        // Create DataTable for job params table
        function createJobParamsTable() {
            $('#job-params-table').DataTable({
                ajax: {
                    url: "/api/{{default_version}}/parameters",
                    dataSrc: 'data'
                },
                processing: true,
                columns: [
                    { data: 'job_type', searchPanes: {show: true} },
                    { data: 'task_id', searchPanes: {show: true} },
                    { data: 'modality', searchPanes: {show: false} },
                    { data: 'name', render: renderParameterButton },
                    { data: 'last_modified', render: renderDatetime },
                ],
                order: [0, 'asc'],
                // preselect "default" job_type
                searchPanes: {
                    preSelect: [ { rows: ['default'], column: 0 } ],
                },
                // options to match default jobs table
                pageLength: 25,
                layout: {
                    topStart: null,
                    topEnd: null,
                    bottomStart: null,
                    bottomEnd: null,
                    top1Start: "searchPanes",
                    top: [
                        'pageLength',
                        'info',
                        { paging: { numbers: false } }
                    ],
                },
                language: {
                    info: "_START_ to _END_ of _TOTAL_",
                    infoEmpty: "0 to 0 of 0",
                    entries: { _: "parameters", 1: "parameter" },
                    paginate: {
                        first: '&laquo; First',
                        previous: '&lsaquo; Prev',
                        next: 'Next &rsaquo;',
                        last: 'Last &raquo;'
                    },
                },
            });
        }
        function renderDatetime(data, type, row) {
            return (type === 'display') ? moment.utc(data).local().format('YYYY-MM-DD h:mm:ss a') : data;
        }
        function renderParameterButton(data, type, row) {
            if (type == 'display') {
                return (
                    `<button type="button" class="btn btn-link btn-sm" 
                        data-bs-toggle="modal" 
                        data-bs-target="#param-modal" 
                        data-bs-param-name=${data} 
                        data-bs-job-type=${row.job_type} 
                        data-bs-task-id=${row.task_id}
                        data-bs-modality=${row.modality}
                    >${data}
                    </button>`
                );
            }
            return data;
        }
    </script>
    </body>
</html>
