<form autocomplete="off">

  {{!-- Library bar --}}
  <div class="ms-animator-topbar">
    <select name="librarySelect">
      <option value="">{{localize "MS.Animator.NewAnimation"}}</option>
      {{#each library}}
      <option value="{{this.id}}" {{#if (eq this.id ../selectedId)}}selected{{/if}}>{{this.name}}</option>
      {{/each}}
    </select>
    <button type="button" data-action="deleteAnimation" {{#unless selectedId}}disabled{{/unless}}>
      <i class="fas fa-trash"></i>
    </button>
  </div>

  {{!-- Toolbar --}}
  <div class="ms-animator-toolbar">
    <button type="button" data-action="pickBackground" class="ms-abtn">
      <i class="fas fa-image"></i> Background
    </button>
    <button type="button" data-action="addActor" class="ms-abtn">
      <i class="fas fa-plus"></i> Add Image
    </button>
    <div class="ms-field-group">
      <label>Duration</label>
      <input type="number" name="duration" value="{{duration}}" min="1" max="300" step="1">
      <span>sec</span>
    </div>
    <button type="button" data-action="pickMusic" class="ms-abtn">
      <i class="fas fa-music"></i> Music
    </button>
    <span class="ms-animator-music-label">{{#if music}}{{music}}{{/if}}</span>
    <input type="hidden" name="music" value="{{music}}">
    <div class="ms-field-group">
      <i class="fas fa-volume-up" style="color:rgba(255,255,255,0.4); font-size:0.85em;"></i>
      <input type="range" name="volume" min="0" max="1" value="{{volume}}" step="0.05">
    </div>
  </div>

  {{!-- Canvas --}}
  <div class="ms-animator-canvas">
    <div class="ms-animator-bg-layer"></div>
    <div class="ms-animator-actors-layer"></div>
    {{#unless hasActors}}
    <div class="ms-animator-canvas-empty">Click "Add Image" to place actors on the canvas</div>
    {{/unless}}
  </div>

  {{!-- Timeline --}}
  <div class="ms-animator-timeline">
    <div class="ms-animator-transport">
      <button type="button" data-action="transportPlay" title="Play"><i class="fas fa-play"></i></button>
      <button type="button" data-action="transportPause" title="Pause"><i class="fas fa-pause"></i></button>
      <button type="button" data-action="transportStop" title="Stop"><i class="fas fa-stop"></i></button>
      <span class="ms-animator-time-display">0:00</span>
      <div class="ms-animator-scrubber-track">
        <div class="ms-animator-scrubber-fill"></div>
        <div class="ms-animator-scrubber-handle"></div>
      </div>
      <span class="ms-animator-duration-display">{{duration}}s</span>
    </div>
    <div class="ms-animator-tracks">
      {{#unless hasActors}}
      <div class="ms-animator-tracks-empty">No actors yet</div>
      {{/unless}}
    </div>
  </div>

  {{!-- Actions --}}
  <div class="ms-animator-actions">
    <input type="text" name="saveName" value="{{saveName}}" placeholder="Animation name...">
    <button type="button" data-action="saveAnimation" class="ms-abtn ms-abtn-secondary">
      <i class="fas fa-save"></i> Save
    </button>
    <button type="button" data-action="previewAnimation" class="ms-abtn ms-abtn-secondary">
      <i class="fas fa-eye"></i> Preview
    </button>
    <button type="button" data-action="playForAll" class="ms-abtn ms-abtn-primary">
      <i class="fas fa-play"></i> Play for All
    </button>
  </div>

</form>
