<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
        <link rel="stylesheet" crossorigin="anonymous" href="/node_modules/@finos/perspective-viewer/dist/css/themes.css" />
    </head>

    <body>
        <script>
            function copyLayout(name){
                let copy_name = prompt("Enter new name", name + ".copy");
                if (!copy_name) return;
                fetch(`/layout/${name}`)
                    .then(response => response.json())
                    .then(layout => {
                        fetch(`/layout/${copy_name}`, {method: "post", body: JSON.stringify(layout)})
                            .then(() => window.location.reload());
                    });
            }

            function deleteLayout(name){
                let confirm1 = confirm("Are you sure you want to delete layout " + name + "?");
                if (!confirm1) return false;
                fetch(`/layout/${name}`, {method: "delete"})
                    .then(() => window.location.reload());
            }

            function uploadLayout(){
                let form = document.forms.upload;
                let name = form.name.value;
                let content = form.content.files[0];
                if (!name || !content) return false;
                let reader = new FileReader();
                reader.onload = function(){
                    fetch(`/layout/${name}`, {method: "post", body: reader.result})
                        .then(() => window.location.reload());
                };
                reader.readAsText(content);
                return false;
            }

            function newLayout(){
                let form = document.forms.new;
                let name = form.name.value;
                if (!name) return false;
                window.location.href = `/workspace/${name}`;
                return false;
            }

            function restoreVersion(name, version){
                fetch(`/layout/${name}.${version}`)
                    .then(response => response.json())
                    .then(layout => {
                        fetch(`/layout/${name}`, {method: "post", body: JSON.stringify(layout)})
                            .then(() => window.location.reload());
                    });
            }
        </script>

        <table>
            <thead>
                <tr>
                    <th>Layouts</th>
                    {% if versions %}
                    <th>Versions</th>
                    {% end %}
                </tr>
            <tbody>
            <tr>
                <td style="vertical-align: top">
                    <form name="new" action="/workspace" method="post" onsubmit="return newLayout()">
                        <input style="font-size: xx-small" type="text" name="name" placeholder="New layout" />
                        <input style="font-size: xx-small" type="submit" value="Create"/>
                    </form>
                    <br/>
                    {% for layout in layouts %}
                    <div>
                        <a href="/workspace/{{layout}}">{{layout}}</a>
                        &nbsp;(
                        {% if not versions %}
                        <a style="font-size: smaller" href="/versions/{{layout}}">versions</a>
                        &nbsp;
                        {% end %}
                        <button style="font-size: xx-small" onclick="copyLayout('{{layout}}')">copy</button>
                        &nbsp;
                        <button style="font-size: xx-small" onclick="deleteLayout('{{layout}}')">delete</button>
                        &nbsp;
                        <a  style="font-size: xx-small" href="/layout/{{layout}}" download="{{layout}}.json">download</a>
                        )
                    </div>
                    {% end %}
                    <div>
                        <br/>
                        <form name="upload" action="/layout" method="post" onsubmit="return uploadLayout()">
                            <input style="font-size: xx-small" type="file" name="content"><br/>
                            <input style="font-size: xx-small" type="text" name="name" placeholder="Upload layout" />
                            <input style="font-size: xx-small" type="submit" value="Upload"/>
                        </form>
                    </div>
                </td>
                {% if versions %}
                <td>
                    {% for version in versions %}
                    <div>
                    <a href="/workspace/{{layouts[0]}}.{{version[0]}}">{{version[0]}}</a>&nbsp;{{version[1]}}
                    &nbsp;
                    <button style="font-size: xx-small" onclick="restoreVersion('{{layouts[0]}}', '{{version[0]}}')">restore</button>
                    &nbsp;
                    <a  style="font-size: xx-small" href="/layout/{{layouts[0]}}.{{version[0]}}" download="{{layouts[0]}}.{{version[0]}}.json">download</a>
                    </div>
                    {% end %}
                </td>
                {% end %}
            </tr>
            <tr >
                <td colspan="2" style="padding-top: 50pt">
                    <div style="font-size: xx-small;">
                        {% for table in sorted(mgr.get_table_names(), key=lambda x: x.lower()) %}
                        <a href="/table/{{table}}">{{table}}</a>,
                        {% end %}
                    </div>
                </td>
            </tr>
        </tbody>
        </table>
    </body>
</html>
