{{ define "content" }}

 <main role="main" x-data="uploads()" x-init="get_uploads();" class="inner DAU">
   <h1 class="DAU-heading">Uploads</h1>
   <p class="lead">Discord-auto-upload uploads</p>

   <h2>Pending uploads</h2>
   
   <table class="table table-condensed table-dark">
     <thead>
       <tr>
         <th>filename</th>
         <th>actions</th>
         <th>&nbsp;</th>
      </tr>
      </thead>
      <tbody>
        <template x-for="ul in pending">
          <tr>
            <td x-text="ul.original_file"></td>
            <td>
              <button @click="start_upload(ul.id)" type="button" class="btn btn-primary">upload</button>
              <button @click="skip_upload(ul.id)" type="button" class="btn btn-primary">reject</button>
            </td>
            <td>
              <a x-bind:href="'/editor.html?id='+ul.id"><img x-bind:src="'/rest/image/'+ul.id+'/thumb'"></a>
              <a x-show="ul.markedup_file" x-bind:href="'/editor.html?id='+ul.id"><img x-bind:src="'/rest/image/'+ul.id+'/markedup_thumb'"></a>
            </td>
          </tr>
        </template>

      </tbody>
    </table>

    <h2>Current uploads</h2>
   
    <table class="table table-condensed table-dark">
      <thead>
        <tr>
          <th>filename</th>
          <th>state</th>
          <th>&nbsp;</th>
        </tr>
      </thead>
      <tbody>
       
        <template x-for="ul in uploads">
          <tr>
            <td x-text="ul.original_file"></td>
            <td> 
              <span x-text="ul.state"></span>
              <div x-if="ul.state_reason">(<span x-text="ul.state_reason"></span>)</div>
             </td>
  
            <td>
              <img :src="'/rest/image/'+ul.id+'/thumb'">
            </td>
          </tr>
        </template>

      </tbody>
   </table>

   <h2>Completed uploads</h2>
   
   <table class="table table-condensed table-dark">
     <thead>
       <tr>
         <th>filename</th>
         <th>state</th>
         <th>&nbsp;</th>
       </tr>
     </thead>
     <tbody>
      
       <template x-for="ul in finished">
         <tr>
           <td x-text="ul.original_file"></td>
           <td> 
            <span x-text="ul.state"></span>
            <div x-if="ul.state_reason">(<span x-text="ul.state_reason"></span>)</div>
           </td>
           <td>
            <img :src="'/rest/image/'+ul.id+'/thumb'">
          </td>
         </tr>
       </template>

     </tbody>
  </table>


</main>

{{ end }}

{{ define "js" }}
<script>
function uploads() {
    return {
      pending: [], uploads: [], finished: [],
      start_upload(id) {
        console.log(id);
        fetch('/rest/upload/'+id+'/start', {method: 'POST'})
          .then(response => response.json())  // convert to json
          .then(json => {
            console.log(json);
          })
      },
      skip_upload(id) {
        console.log(id);
        fetch('/rest/upload/'+id+'/skip', {method: 'POST'})
          .then(response => response.json())  // convert to json
          .then(json => {
            console.log(json);
          })
      },
      get_uploads() {
        fetch('/rest/uploads')
          .then(response => response.json())  // convert to json
          .then(json => {
            this.pending = [];
            this.uploads = [];
            this.finished = [];
            json.forEach(ul => {
              if (ul.state == 'Pending') {
                this.pending.push(ul);
              }
              else if (ul.state == 'Complete' || ul.state == 'Failed' || ul.state == 'Skipped') {
                this.finished.push(ul)
              }
              else {
                this.uploads.push(ul);
              }
            });
            this.config = json;
            console.log(json);
            let self = this;
            setTimeout(function() { self.get_uploads(); } , 1000);
          })
      },
    }
  }

</script>
{{ end }}