{{ define "content" }}

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

  </a>

  <form 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 (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>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>

    <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>

        <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: '', Path: '', NoWatermark: false});">
        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 src="//unpkg.com/alpinejs" defer></script>
<script>
  function configuration() {
    return {
      config: {},
      get_config() {
        fetch('/rest/config')
          .then(response => response.json())  // convert to json
          .then(json => {
            this.config = json;
            console.log(json);
          })
      },
      save_config() {
        fetch('/rest/config', { method: 'POST', body: JSON.stringify(this.config) })
          .then(response => response.json())  // convert to json
          .then(json => {
            this.config = json;
            console.log(json);
          })
      }

    }
  }

</script>
{{ end }}