<html>
<head>
    <title>CYCLESCALER | Upload .blend</title>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/public/css/semantic.min.css">
    <style>body{border-top: 30px solid rgb(0, 181, 173);}</style>
    <noscript>
        <style>
            .dropdown:hover > .menu { display: block; }
            .ui.secondary.menu .dropdown.item > .menu { margin-top: 0; }
            </style>
    </noscript>
    <script src="/public/js/jquery-3.4.1.min.js"></script>
    <script src="/public/js/semantic.min.js"></script>
    <script>
        function uploading() {
            $("#form").submit()
            $("#form").hide("slow", function() {
                //animation complete
                $("#uploading").show("slow", function() {

                });
                
            });
        }

        $( document ).ready(function() {
            $("#uploading").hide()
        });
    </script>
</head>
<body>
    <div class="ui container">	
        <br >
        <div class="ui teal segment">
            <h1 class="ui header">
                <i class="cube icon"></i>
                <div class="content">CYCLESCALER</div>
                <div class="sub header">Containerized Distributed Redering System</div>
            </h1>
        </div>
        <div class="ui teal segment">
            <h3 class="ui header">
                <i class="cloud upload icon"></i>
                <div class="content">File Upload</div>
                <div class="sub header">Queue a new render</div>
            </h3>
            <form id="form" class="ui large form" enctype="multipart/form-data" action="/upload" method="post">
                <p>To get started, select the .blend file you would like to render.  The only prerequisite for using this service is that the output for the rendering be set to be PNG images with a path of "./"</p>
                <input type="hidden" name="token" value="{{.Token}}" />
                <div id="fileForm">
                    <label for="fileselect" class="ui fluid icon button">
                        <i class="file icon"></i>
                        Select a .blend File
                    </label>
                    <input type="file" id="fileselect" name="uploadfile" onchange="uploading()" style="display:none">
                </div>
            </form>
            <div id="uploading" class="ui segment">
                <div class="ui active inverted dimmer">
                    <div class="ui text loader">Uploading file - please wait...</div>
                </div>
                <br /><br /><br />
            </div>
        </div>

        <div class="ui teal segment">
            <h3 class="ui header">
                <i class="cubes icon"></i>
                <div class="content">Render Job List</div>
                <div class="sub header">A directory of 3D render jobs</div>
            </h3>        
            {{if .NotNoJobs}}
                {{range .Jobs}}
                    <div class="ui attached segment">
                        <a href="/jobStatus?token={{.Token}}">
                            <h5 class="ui header">
                                <i class="cube icon"></i>
                                <div class="content">Job {{.Token}} - {{.CompletePercentage}}&percnt;</div>
                                <div class="sub header">{{.StartTime}}</div>
                            </h5>
                        </a>

                        <div class="ui bottom attached indicating progress" data-percent="{{.CompletePercentage}}" id="progressbar{{.Token}}">
                            <div class="bar"></div>                                         
                        </div>
                    </div>
                {{end}}
            {{else}}
                <p>No jobs have been created.  Why not start one by uploading a file above?</p>
            {{end}}
            </div>   
    </div>
</body>
</html>