<div class="flexcol standard-form vgmusic-config">
  <input type="hidden" name="documentType" value="{{documentType}}">
  {{#each playlistConfig as |section|}}
    <fieldset>
      <legend>{{section.labelLocalized}}</legend>
      <div class="standard-form playlist-section" data-section="{{section.id}}" data-item-id="{{section.playlist.id}}">
        {{#if section.playlist}}
          <div class="form-group">
            <label>{{localize "VGMusic.PlaylistSection.Combat"}}</label>
            <div class="form-fields playlist-info">
              <i class="fas fa-music"></i>
              <span class="playlist-name">{{section.playlist.name}}</span>
              <button type="button" data-action="openPlaylist" data-tooltip="{{localize 'PLAYLIST.ViewSheet'}}">
                <i class="fas fa-edit"></i>
              </button>
              <button type="button" data-action="deletePlaylist" data-tooltip="{{localize 'Delete'}}">
                <i class="fas fa-trash"></i>
              </button>
            </div>
          </div>
          <div class="form-group">
            <label>{{localize "VGMusic.InitialTrack"}}</label>
            <div class="form-fields">
              <select name="music.{{section.id}}.initialTrack">
                {{{selectOptions section.tracks selected=section.data.initialTrack blank=(localize "VGMusic.Default")}}}
              </select>
            </div>
          </div>
          {{#if section.allowPriority}}
            <div class="form-group">
              <label>{{localize "VGMusic.Priority"}}</label>
              <div class="form-fields">
                <input type="number" name="music.{{section.id}}.priority" value="{{section.data.priority}}"
                  placeholder="0">
              </div>
            </div>
          {{/if}}
        {{else}}
          <div class="form-group">
            <div class="form-fields">
              <p class="hint">{{localize "VGMusic.ConfigHelp"}}</p>
            </div>
          </div>
        {{/if}}
      </div>
    </fieldset>
  {{/each}}
  <footer class="flexrow">
    {{#each buttons as |button|}}
      <button type="{{button.type}}" {{#if button.action}}data-action="{{button.action}}" {{/if}}>
        <i class="{{button.icon}}"></i>
        {{localize button.label}}
      </button>
    {{/each}}
  </footer>
</div>
