<script>
  export let block;
  export let onChange;

  const update = (patch) => onChange({ ...block.data, ...patch });
  let showAdv = false;
</script>

<label>Баннер 1 — ссылка
  <input type="text" value={block.data.href1 ?? ""} on:input={(e) => update({ href1: e.target.value })} />
</label>
<label>Баннер 1 — имя файла
  <input type="text" value={block.data.imgBaseName1 ?? ""} on:input={(e) => update({ imgBaseName1: e.target.value })} />
</label>

<label>Баннер 2 — ссылка
  <input type="text" value={block.data.href2 ?? ""} on:input={(e) => update({ href2: e.target.value })} />
</label>
<label>Баннер 2 — имя файла
  <input type="text" value={block.data.imgBaseName2 ?? ""} on:input={(e) => update({ imgBaseName2: e.target.value })} />
</label>

<label>Баннер 3 — ссылка
  <input type="text" value={block.data.href3 ?? ""} on:input={(e) => update({ href3: e.target.value })} />
</label>
<label>Баннер 3 — имя файла
  <input type="text" value={block.data.imgBaseName3 ?? ""} on:input={(e) => update({ imgBaseName3: e.target.value })} />
</label>
<div class="advanced-wrapper">
  <button class="btn-advanced-toggle" class:is-open={showAdv} type="button" on:click={() => (showAdv = !showAdv)}>
    Доп. настройки
  </button>
  {#if showAdv}
    <div class="advanced-panel">
      <label>Баннер 1 — расширение
        <input type="text" value={block.data.imgExtension1 ?? ".png"} on:input={(e) => update({ imgExtension1: e.target.value })} />
      </label>
      <label>Баннер 2 — расширение
        <input type="text" value={block.data.imgExtension2 ?? ".png"} on:input={(e) => update({ imgExtension2: e.target.value })} />
      </label>
      <label>Баннер 3 — расширение
        <input type="text" value={block.data.imgExtension3 ?? ".png"} on:input={(e) => update({ imgExtension3: e.target.value })} />
      </label>

      <label>Ширина баннеров (px)
        <input
          type="number"
          value={block.data.width ?? 170}
          on:input={(e) => update({ width: parseInt(e.target.value, 10) || 0 })}
        />
      </label>

      <label>Отступ между баннерами (px)
        <input
          type="number"
          value={block.data.gap ?? 30}
          on:input={(e) => update({ gap: parseInt(e.target.value, 10) || 0 })}
        />
      </label>

      <label>
        Отступ снизу (px)
        <input
          type="number"
          value={block.data.bottomSpacing ?? 40}
          on:input={(e) => update({ bottomSpacing: parseInt(e.target.value, 10) || 0 })}
        />
      </label>

      <label class="inline">
        <input
          type="checkbox"
          checked={block.data.removeBottomSpacing}
          on:change={(e) => update({ removeBottomSpacing: e.target.checked })}
        />
        Убрать отступ после блока
      </label>
    </div>
  {/if}
</div>
