<form class="ib-note-config-form">
  {{#unless (or (eq noteType "handout") (eq noteType "media") (eq noteType "pin"))}}
    <div class="form-group">
      <label for="text">Note Text:</label>
      <textarea name="text" rows="4" placeholder="Enter note text...">{{text}}</textarea>
    </div>

    {{!-- Color Selection --}}
    <div class="form-group color-settings">
      {{#if (eq noteType "sticky")}}
      <div class="color-mosaic-group">
        <label>Note Color:</label>
        <div class="color-mosaic sticky-tints">
          {{#each stickyTints}}
            <div class="color-option {{#if (eq ../tint this)}}active{{/if}}" 
                 data-color="{{this}}" 
                 data-type="tint"
                 style="background-color: {{this}};" 
                 title="{{@key}}"></div>
          {{/each}}
          <input type="hidden" name="tint" value="{{tint}}" />
        </div>
      </div>
      {{/if}}

      <div class="color-mosaic-group">
        <label>Ink Color:</label>
        <div class="color-mosaic ink-colors">
          {{#each inkColors}}
            <div class="color-option {{#if (eq ../textColor this)}}active{{/if}}" 
                 data-color="{{this}}" 
                 data-type="textColor"
                 style="background-color: {{this}};" 
                 title="{{@key}}"></div>
          {{/each}}
          <input type="hidden" name="textColor" value="{{textColor}}" />
        </div>
      </div>
    </div>

    {{!-- Font Settings --}}
    <div class="form-group font-settings">
      <div class="font-select-group">
        <label for="font">Font:</label>
        <select name="font">
          <option value="Rock Salt" {{#if (eq font "Rock Salt")}}selected{{/if}}>Rock Salt</option>
          <option value="Caveat" {{#if (eq font "Caveat")}}selected{{/if}}>Caveat</option>
          <option value="Courier New" {{#if (eq font "Courier New")}}selected{{/if}}>Courier New</option>
          <option value="Times New Roman" {{#if (eq font "Times New Roman")}}selected{{/if}}>Times New Roman</option>
          <option value="Signika" {{#if (eq font "Signika")}}selected{{/if}}>Signika</option>
          <option value="Arial" {{#if (eq font "Arial")}}selected{{/if}}>Arial</option>
          <option value="Typewriter Condensed" {{#if (eq font "Typewriter Condensed")}}selected{{/if}}>Typewriter Condensed</option>
          <option value="IB Special Elite" {{#if (eq font "IB Special Elite")}}selected{{/if}}>Special Elite</option>
        </select>
      </div>
      <div class="font-size-group">
        <label for="fontSize">Font Size:</label>
        <input type="number" name="fontSize" value="{{fontSize}}" min="8" max="48" step="1" />
      </div>
    </div>
  {{/unless}}

  {{!-- Linked Object field --}}
  <div class="form-group ib-drop-zone">
    <label for="linkedObject">Linked Object:</label>
    <div class="linked-object-row">
      <div class="linked-object-display">
        {{#if linkedObject}}
          <div class="enriched-link">
            {{{enrichedLinkedObject}}}
          </div>
        {{else}}
          <span class="no-link">No object linked. Drag and drop here to link.</span>
        {{/if}}
        <input type="hidden" name="linkedObject" value="{{linkedObject}}" />
      </div>
      {{#if linkedObject}}
        <button type="button" class="remove-link-btn" title="Remove link">
          <i class="fas fa-trash"></i>
        </button>
      {{/if}}
    </div>
  </div>

  {{!-- Media Audio Path --}}
  {{#if (eq noteType "media")}}
    <div class="form-group">
      <label for="audioPath">Audio File:</label>
      <div class="file-picker">
        <input type="text" name="audioPath" value="{{audioPath}}" placeholder="Select audio file..." readonly />
        <button type="button" class="audio-picker-button" title="Browse Audio">
          <i class="fas fa-music"></i>
        </button>
        <button type="button" class="preview-audio-btn" title="Preview Audio" {{#unless audioPath}}disabled{{/unless}}>
          <i class="fas fa-play"></i>
        </button>
      </div>
    </div>
    <div class="form-group">
      <label for="audioEffectEnabled">Apply Tape Effect:</label>
      <input type="checkbox" name="audioEffectEnabled" {{#if audioEffectEnabled}}checked{{/if}} />
      <p class="notes">Old tape recording (High-pass filter).</p>
    </div>
  {{/if}}

  {{!-- Show Image Path field for photo notes and handouts --}}
  {{#if (or (eq noteType "photo") (eq noteType "handout"))}}
    <div class="form-group" style="display: block;">
      <label for="image">Image Path:</label>
      <div class="file-picker">
        <input type="text" name="image" value="{{image}}" placeholder="Enter image path" readonly />
        <button type="button" class="file-picker-button">
          <i class="fas fa-folder-open"></i> Browse
        </button>
      </div>
    </div>
  {{else}}
    <div class="form-group" style="display: none;"></div>
  {{/if}}


  {{!-- Connections Section --}}
  {{#if connections.length}}
    <div class="form-group connections-section">
      <label class="connections-header">Connections from this note:</label>
      <div class="connections-list">
        {{#each connections}}
          <div class="connection-item" data-index="{{@index}}">
            <span class="connection-target">{{this.displayNumber}}: {{this.targetLabel}}</span>
            <div class="connection-controls">
              <input type="color" name="connection-color-{{@index}}" value="{{this.color}}" title="Change yarn color" />
              <button type="button" class="remove-connection-btn" data-index="{{@index}}" title="Remove connection">
                <i class="fas fa-unlink"></i>
              </button>
            </div>
          </div>
        {{/each}}
      </div>
    </div>
  {{/if}}

  <div class="form-group button-group">
    <button type="submit" class="save-button">
      <i class="fas fa-save"></i> Save
    </button>
    <button type="button" class="cancel-button">
      <i class="fas fa-times"></i> Cancel
    </button>
  </div>
</form>