<form action="./create_webhook" method="post">
    <div class="mb-3">
        <label for="name" class="form-label">Name</label>
        <input type="text" name="name" id="name" class="form-control" placeholder="Name">
    </div>
    <div class="mb-3">
        <label for="url" class="form-label">Url (for ntfy it is the topic url)</label>
        <input type="url" name="url" id="url" class="form-control" placeholder="Url">
    </div>
    <div class="mb-3">
        <label for="key" class="form-label">Key (Access Token for Ntfy, Gotify Token or key param)</label>
        <input type="password" name="key" id="key" class="form-control" placeholder="Key">
    </div>
    <div class="mb-3">
        <label for="prio" class="form-label">Priority (only for Gotify or Ntfy)</label>
        <input type="number" name="priority" id="prio" class="form-control" value="2">
    </div>
    <h2>Type:</h2>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="type" id="ntfy" value="ntfy" checked>
        <label class="form-check-label" for="ntfy">
          Ntfy (<a target="_blank" href="https://ntfy.sh/">more</a>)
        </label>
      </div>
    <div class="form-check">
        <input class="form-check-input" type="radio" name="type" id="gotify" value="gotify">
        <label class="form-check-label" for="gotify">
          Gotify (<a target="_blank" href="https://gotify.net/">more</a>)
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="radio" name="type" id="other" value="other">
        <label class="form-check-label" for="other">
          Other (<a target="_blank" href="./other_webhook_help">more</a>)
        </label>
      </div>
    <h2>Enabled categories:</h2>
    <div class="form-check">
        <input class="form-check-input" type="checkbox" name="enablemovies" id="movies" checked>
        <label class="form-check-label" for="movies">
            Movies
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="enableshows" id="shows" checked>
        <label class="form-check-label" for="shows">
            Shows
        </label>
      </div>
      <div class="form-check">
        <input class="form-check-input" type="checkbox" name="enablealbums" id="albums" checked>
        <label class="form-check-label" for="albums">
            Music Albums
        </label>
      </div>
    <input type="submit" value="Create" class="btn btn-primary">
</form>
<hr>
<ul class="list-group">
    {{for webhook in webhooks}}
        <li class="list-group-item">
                <form action="./update_webhook" method="post">
                    <input type="hidden" name="name" value="{{webhook.name}}">
                {{webhook.name}} ({{if webhook.ntfy}}Ntfy{{else if webhook.gotify}}Gotify{{else}}Other{{end}})
                <div class="mb-3">
                <label for="url{{webhook.name}}" class="form-label">Url of {{if webhook.ntfy}}topic{{else if webhook.gotify}}instance{{else}}webhook{{end}}</label>
                <input type="url" class="form-control" name="url" id="url{{webhook.name}}" placeholder="Url of {{if webhook.ntfy}}topic{{else if webhook.gotify}}instance{{else}}webhook{{end}}" value="{{webhook.url}}">
                </div>
               
                <div class="mb-3">
                    <label for="key{{webhook.name}}" class="form-label">{{if webhook.gotify}}Token{{else if webhook.ntfy}}Access Token (optional){{else}}Key{{end}}</label>
                    <input type="password" name="key" id="key{{webhook.name}}" class="form-control" placeholder="{{if webhook.gotify}}Token{{else if webhook.ntfy}}Access Token (optional){{else}}Key{{end}}" value="{{webhook.key}}">
                </div>
                
              

                {{if webhook.gotify || webhook.ntfy}}
                <div class="mb-3">
                    <label for="prio{{webhook.name}}" class="form-label">Priority</label>
                    <input type="number" name="priority" id="prio{{webhook.name}}" class="form-control" value="{{webhook.priority}}">
                </div>
                {{end}}

                <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="enablemovies" {{if webhook.enablemovies}} checked {{end}} id="movies{{webhook.name}}">
                    <label class="form-check-label" for="movies{{webhook.name}}">
                        Movies
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="enableshows" {{if webhook.enableshows}} checked {{end}} id="shows{{webhook.name}}">
                    <label class="form-check-label" for="shows{{webhook.name}}">
                        Shows
                    </label>
                  </div>
                  <div class="form-check">
                    <input class="form-check-input" type="checkbox" name="enablealbums" {{if webhook.enablealbums}} checked {{end}} id="albums{{webhook.name}}">
                    <label class="form-check-label" for="albums{{webhook.name}}">
                        Music Albums
                    </label>
                  </div>

                <input type="submit" value="Update" name="action" class="btn btn-primary">
                <input type="submit" value="Delete" name="action" class="btn btn-danger">
                </form>
        </li>
    {{end}}
</ul>