<html>
<head>
    <title>CYCLESCALER | Status</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 copyWget(){
            var copyText = document.getElementById("wget");
            copyText.select();
            document.execCommand("copy");
        }
        $( document ).ready(function() {
            $('#progressbarJob').progress();
            {{range .Job.Wips}}
            $('#progressbar{{.FrameNumber}}').progress();
            {{end}}
        });
    </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">
            <div class="ui two column very relaxed grid">
                <div class="column">
                    <h3 class="ui header">
                        <i class="globe icon"></i>
                        <div class="content">
                            Job Status
                            <div class="sub header">{{.Job.BlendFileName}}</div>
                        </div>
                    </h3>
                    <p>Job Token: {{.Job.Token}}</p>                 
                    <div class="ui action input">
                        <input id="wget" type="text" value="wget -r -nc --cut-dirs=3 -nH &quot;https://deadbeef.codes:8098/public/renderedframes/{{.Job.Token}}&quot; &#59; rm -f renderedframes">
                        <button class="ui teal right labeled icon button" onclick="copyWget()">
                            <i class="copy icon"></i>
                            wget Images
                        </button>
                    </div>
                    <p><a href="/public/renderedframes">Individual rendered frames</a></p>
                    {{if .Job.Completed}}
                        <div class="ui large positive icon message">
                           <i class="checkered flag icon"></i>
                           <div class="content">Rendering Completed!</div>
                        </div>
                    {{end}}
                    {{if not .Job.Completed}}
                    <br />
                        <div class="ui big indicating progress" data-percent="{{.Job.CompletePercentage}}" id="progressbarJob">
                            <div class="bar">
                                <div class="progress">{{.Job.CompletePercentage}}&percnt;</div>
                            </div>    
                        </div>
                    {{end}}
                </div>
                <div class="column">
                    <a href="{{.LatestImage}}"><img class="ui fluid rounded image"  src="{{.LatestImage}}"></a>
                </div>
            </div>
            <div class="ui vertical divider"></div>
        </div> 
        
        <div class="ui teal segment">
            <h3 class="ui header">
                <i class="cubes icon"></i>
                <div class="content">In Progress</div>
            </h3>
            {{if .InProgress}}
                {{range .Job.Wips}}
                    <div class="ui attached segment">
                        <h3 class="ui header">
                            <i class="cube icon"></i>
                            <div class="content">Frame {{.FrameNumber}} -  {{.CompletePercentage}}&percnt;</div>
                            <div class="ui right floated button" tabindex="0">{{.SlaveName}}</div>
                        </h3>
                        {{.Output}}
                                               
                        {{if .BadHealth}}<div class="ui inverted progress warning" data-percent="{{.CompletePercentage}}" id="progressbar{{.FrameNumber}}"><div class="ui red message">Render slave has lost contact with master. </div>{{end}}
                        {{if not .BadHealth}}<div class="ui bottom attached indicating progress" data-percent="{{.CompletePercentage}}" id="progressbar{{.FrameNumber}}">{{end}}
                            <div class="bar">
                            </div>                                         
                        </div>
                    </div>
                {{end}}
            {{end}}
            {{if not .InProgress}}
                <p>Rendering is not currently in progress</p>
            {{end}}
        </div>

        <div class="ui teal segment">
            <h3 class="ui header">
                <i class="images icon"></i>
                <div class="content">Completed Frames</div>
            </h3>
            {{ if .UseTinyImages }}<div class="ui tiny images"> {{ else }}<div class="ui small images">{{ end }}
                {{ range .Images }}
                    <a href="/{{.RenderedFramePath}}"><img class="ui rounded image" src="/{{.ThumbnailPath}}"/></a>
                {{ end }}
            </div>
        </div>
    </div>
</body>
</html>
