<section class="fizzyboard">
  <header class="fizzyboard__header">
    <div class="fizzyboard__left">
      <div class="fizzyboard__search">
        <input type="text"
               placeholder="Search…"
               autocomplete="off"
               spellcheck="false"
               data-fizzy-search />
        <button type="button" class="fizzyboard__search-clear" data-fizzy-search-clear title="Clear">×</button>
      </div>
    </div>

    <div class="fizzyboard__right">
      <div class="fizzyboard__volume">
        <label class="fizzyboard__volume-label" for="fizzyboard-volume">Volume</label>
        <input id="fizzyboard-volume"
               type="range"
               min="0" max="100" step="1"
               value="{{volumePct}}"
               data-fizzy-volume />
        <span class="fizzyboard__volume-out" data-fizzy-volume-out>{{volumePct}}%</span>
      </div>

      <button type="button" data-fizzy-refresh>Reload</button>
    </div>
  </header>

  <div class="fizzyboard__content">
    {{#if loading}}
      <p>Loading sounds…</p>
    {{/if}}

    {{#each groups}}
      <div class="fizzyboard__group" data-group="{{this.dirRel}}">
        <button type="button"
                class="fizzyboard__group-toggle"
                data-fizzy-toggle-group="{{this.dirRel}}">
          <span class="fizzyboard__chev">{{#if this.collapsed}}▶{{else}}▼{{/if}}</span>
          <span class="fizzyboard__group-title">{{this.name}}</span>
          <span class="fizzyboard__count">({{this.sounds.length}})</span>
        </button>

        {{#unless this.collapsed}}
          {{#if this.sounds.length}}
            <div class="fizzyboard__grid">
              {{#each this.sounds}}
                <div class="fizzyboard__row">
                  <div class="fizzyboard__row-top">
                    <button type="button"
                            class="fizzyboard__fav"
                            data-fizzy-fav="{{this.id}}"
                            title="{{#if this.isFavorite}}Unfavorite{{else}}Favorite{{/if}}">
                      {{#if this.isFavorite}}★{{else}}☆{{/if}}
                    </button>

                    <div class="fizzyboard__label" title="{{this.label}}">
                      {{this.label}}{{#if this.durationStr}} ({{this.durationStr}}){{/if}}
                    </div>

                    <div class="fizzyboard__buttons">
                      <button type="button" data-fizzy-preview="{{this.src}}">Preview</button>
                      {{#if ../../isGM}}
                        <button type="button" data-fizzy-broadcast-once="{{this.src}}">All</button>
                      {{/if}}
                    </div>
                  </div>

                  <div class="fizzyboard__loop">
                    <label class="fizzyboard__loop-check">
                      <input type="checkbox"
                             data-fizzy-loop-toggle="{{this.id}}"
                             {{#if this.loopEnabled}}checked{{/if}} />
                      Loop
                    </label>

                    {{#if this.loopEnabled}}
                      <label class="fizzyboard__loop-seconds">
                        Every
                        <input type="number"
                               min="1"
                               step="1"
                               value="{{this.loopSeconds}}"
                               data-fizzy-loop-seconds="{{this.id}}" />
                        s
                      </label>

                      <div class="fizzyboard__loop-actions">
                        <button type="button"
                                data-fizzy-preview-loop="{{this.id}}"
                                data-fizzy-src="{{this.src}}">
                          Start (local)
                        </button>
                        <button type="button"
                                data-fizzy-preview-loop-stop="{{this.id}}">
                          Stop (local)
                        </button>

                        {{#if ../../isGM}}
                          <button type="button"
                                  data-fizzy-all-loop="{{this.id}}"
                                  data-fizzy-src="{{this.src}}">
                            Start (all)
                          </button>
                          <button type="button"
                                  data-fizzy-all-loop-stop="{{this.id}}">
                            Stop (all)
                          </button>
                        {{/if}}
                      </div>
                    {{/if}}
                  </div>
                </div>
              {{/each}}
            </div>
          {{else}}
            <p class="fizzyboard__empty">No sounds in this folder.</p>
          {{/if}}
        {{/unless}}
      </div>
    {{/each}}
  </div>
</section>
