{{ define "content" }}

<main role="main" class="inner DAU" x-data="configuration()" x-init="get_config()">
  <h1 class="DAU-heading">Config</h1>

  <div x-cloak x-show="error" class="alert alert-danger" role="alert" x-text="error">
  </div>
  <div x-cloak x-show="success" class="alert alert-success" role="alert" x-text="success">
  </div>

  <form x-cloak class="">

    <p>Configuration changes are not made until the Save button is pressed
      at the bottom of this page.
    </p>

    <h3>global configuration</h3>

    <p>The server port dictates which TCP port the web server listens on.
      If you change this number you will need to restart.
    </p>

    <p>The Watch Interval is how often new files will be discovered by your
      watchers (watchers are configured below).</p>

    <div class="form-row align-items-center">
      <div class="col-sm-6 my-1">
        <span>Server port</span>
      </div>
      <div class="col-sm-6 my-1">
        <label class="sr-only">Server port</label>
        <input type="text" class="form-control" placeholder="" x-model.number="config.Port">
      </div>
    </div>

    <div class="form-row align-items-center">
      <div class="col-sm-6 my-1">
        <span>Open browser on startup</span>
      </div>
      <div class="col-sm-6 my-1">
        <label class="sr-only">Open browser</label>
        <button type="button" @click="config.OpenBrowserOnStart = ! config.OpenBrowserOnStart" class="btn btn-success" x-text="config.OpenBrowserOnStart ? 'Enabled' : 'Disabled'"></button>

      </div>
    </div>

    <div class="form-row align-items-center">
      <div class="col-sm-6 my-1">
        <span>Watch interval</span>
      </div>
      <div class="col-sm-6 my-1">
        <label class="sr-only">Watch interval</label>
        <input type="text" class="form-control" placeholder="" x-model.number="config.WatchInterval">
      </div>
    </div>


    <h3>watcher configuration</h3>

    <p>You may configure one or more watchers. Each watcher watches a
      single directory (and all subdirectories) and when a new image file
      is found it uploads it to the specified channel via the webhook URL.
    </p>

    <p><a href="https://support.discord.com/hc/en-us/articles/228383668-Intro-to-Webhooks">
        Click here</a> for information on how to find your discord webhook URL.</p>

    <p>You may also specify a username for the bot to masquerade as. This is a cosmetic
      change only, and does not hide the uploaders actual identity.
    </p>

    <p>A watcher can be configured to hold uploads. This causes the new images seen 
      by the watcher to be held for review on the <a href="/uploads.html">uploads page</a>.
        This allows each image to be individually uploaded or skipped.

    </p>

    <p>Exclusions can be specified, zero or more arbitrary strings. If any
      file matches one of those strings then it will not be uploaded. This is most
      often used if you use software (like Steam) which automatically creates thumbnails
      in the same directory as the screenshots.
    </p>

    <template x-for="(watcher, i) in config.Watchers">
      <div class="my-5">
        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Directory to watch</span>
          </div>
          <div class="col-sm-6 my-1">
            <label class="sr-only" for="">Directory</label>
            <input type="text" class="form-control" placeholder="" x-model="watcher.Path">
          </div>
        </div>

        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Webhook URL</span>
          </div>
          <div class="col-sm-6 my-1">
            <label class="sr-only" for="">WebHook URL</label>
            <input type="text" class="form-control" placeholder="" x-model="watcher.WebHookURL">
          </div>
        </div>

        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Username</span>
          </div>
          <div class="col-sm-6 my-1">
            <label class="sr-only" for="">Username</label>
            <input type="text" class="form-control" placeholder="" x-model="watcher.Username">
          </div>
        </div>

        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Watermark</span>
          </div>
          <div class="col-sm-6 my-1">
            <button type="button" @click="config.Watchers[i].NoWatermark = ! config.Watchers[i].NoWatermark" class="btn btn-success" x-text="watcher.NoWatermark ? 'Disabled 😢' : 'Enabled'"></button>
          </div>
        </div>

        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Hold Uploads</span>
          </div>
          <div class="col-sm-6 my-1">
            <button type="button" @click="config.Watchers[i].HoldUploads = ! config.Watchers[i].HoldUploads" class="btn btn-success" x-text="watcher.HoldUploads ? 'Enabled' : 'Disabled'"></button>
          </div>
        </div>


        <div class="form-row align-items-center">
          <div class="col-sm-6 my-1">
            <span>Exclusions</span>
          </div>
          <div class="col-sm-6 my-1">
            <template x-for="(exclude, j) in config.Watchers[i].Exclude">
              <div class="form-row">
                <div class="col">
                  <input type="text" class="form-control" x-model="config.Watchers[i].Exclude[j]">
                </div>
                <div class="col">
                  <button type="button" class="btn btn-danger" href="#" @click.prevent="config.Watchers[i].Exclude.splice(j, 1);">
                  -            
                  </button>
                </div>
              </div> 
     
            </template>
            <button type="button" class="btn btn-secondary" href="#"
             @click.prevent="config.Watchers[i].Exclude.push('');">
        +</button>
          </div>
        </div>



        <button type="button" class="btn btn-primary" href="#" @click.prevent="config.Watchers.splice(i, 1);">Remove
          this watcher</button>

      </div>

    </template>

    <div class="my-5">
      <button type="button" class="btn btn-secondary" href="#"
        @click.prevent="config.Watchers.push({Username: '', WebHookURL: 'https://webhook.url.here/', Path: '/directory/path/here', NoWatermark: false, HoldUploads: false, Exclude: []});">
        Add a new watcher</button>
    </div>

    <div class="my-5">

      <button type="button" class="my-4 btn btn-danger" href="#" @click="save_config()">
        Save all Configuration
      </button>
    </div>

  </form>



</main>
{{ end }}

{{ define "js" }}
<script>
  function configuration() {
    return {
      config: {}, error: '', success: '',
      get_config() {
        fetch('/rest/config')
          .then(response => response.json())  // convert to json
          .then(json => {
            this.config = json;
            console.log(json);
          })
      },
      save_config() {
        this.error = '';
        this.success = '';
        fetch('/rest/config', { method: 'POST', body: JSON.stringify(this.config) })
          .then(response => response.json())  // convert to json
          .then(json => {
            if (json.error) {
              this.error = json.error
            } else {
              this.success = 'Configuration saved';
              this.config = json;
            }
            window.scrollTo(0,0);
          })
      }

    }
  }

</script>
{{ end }}