{{ define "content" }}

 <main role="main" class="inner DAU">
   <h1 class="DAU-heading">Config</h1>
   <p class="lead">Discord-auto-upload configuration</p>
   <a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks"><p class="lead">How to find your discord webhook</p></a>


   <form class="">
     <div class="form-row align-items-center config-item" data-key="webhook">
       <div class="col-sm-5 my-1">
         <span>Discord WebHook URL</span>
       </div>
       <div class="col-sm-4 my-1">
         <label class="sr-only" for="inlineFormInputName">Name</label>
         <input type="text" class="form-control rest-field" placeholder="https://....">
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

   <form class="">
     <div class="form-row align-items-center config-item" data-key="username">
       <div class="col-sm-5 my-1">
         <span>Bot username (optional)</span>
       </div>
       <div class="col-sm-4 my-1">
         <label class="sr-only" for="inlineFormInputName">Name</label>
         <input type="text" class="form-control rest-field" placeholder="">
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

   <form class="">
     <div class="form-row align-items-center config-item" data-key="directory">
       <div class="col-sm-5 my-1">
         <span>Directory to watch</span>
       </div>
       <div class="col-sm-4 my-1">
         <label class="sr-only" for="inlineFormInputName">Name</label>
         <input type="text" class="form-control rest-field" placeholder="/...">
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

   <form class="">
     <div class="form-row align-items-center config-item" data-key="watch">
       <div class="col-sm-5 my-1">
         <span>Period between filesystem checks (seconds)</span>
       </div>
       <div class="col-sm-4 my-1">
         <label class="sr-only" for="inlineFormInputName">Seconds</label>
         <input type="text" class="form-control rest-field " placeholder="/...">
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

   <form class="">
     <div class="form-row align-items-center config-item" data-key="nowatermark">
       <div class="col-sm-5 my-1">
         <span>Do not watermark images</span>
       </div>
       <div class="col-sm-4 my-1">
         <div class="custom-control custom-switch">
           <input type="checkbox" class="custom-control-input rest-field rest-field-boolean" id="input-nowatermark">
           <label class="custom-control-label" for="input-nowatermark">&nbsp;</label>
           <span id="sadness" style="">😭</span>
         </div>
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

   <form class="">
     <div class="form-row align-items-center config-item" data-key="exclude">
       <div class="col-sm-5 my-1">
         <span>Files to exclude</span>
       </div>
       <div class="col-sm-4 my-1">
         <label class="sr-only" for="input-exclude">Name</label>
         <input type="text" id="input-exclude" class="form-control rest-field" placeholder="">
       </div>
       <div class="col-auto my-1">
         <button type="submit" class="btn btn-primary">update</button>
       </div>
     </div>
   </form>

 </main>
{{ end }}

{{ define "js" }}
<script>
function update_sadness () {
  if ($('#input-nowatermark').prop('checked')) {
    $('#sadness').css('visibility','');
  }
  else {
    $('#sadness').css('visibility','hidden');
  }
}
$(document).ready(function() {

  $('#input-nowatermark').on('click', function() { update_sadness(); });

  // populate each field
  $('.config-item').each(function() {
    let el = $(this);
    let key = el.data('key');

    $.ajax({ method: 'get', url: '/rest/config/'+key})
     .done(function(data) {
       var this_el = $(".config-item[data-key='"+key+"']").find('.rest-field');
       if (this_el.hasClass('rest-field-boolean')) {
         this_el.prop('checked', data.value);
       }
       else {

         this_el.val(data.value);
       }
       update_sadness();

     });
    });

  // respond to button clicks to update
  $('.config-item button').on('click', function(e,f) {
    key = $(this).parents('.config-item').data('key');
    val = $(this).parents('.config-item').find('.rest-field').val();
    if ($(this).parents('.config-item').find('.rest-field-boolean').length) {
      val = $(this).parents('.config-item').find('.rest-field').prop('checked') ? 1 : 0;
    }
    $.post('/rest/config/'+key, { value: val })
     .done(function(d) {
       if (d.success) {
         alert('Updated config');
       } else {
         alert("Error: " + d.error);
       }
     });

    return false;
  });
});
</script>
{{ end }}