<script>
  export let block;
  export let onChange;

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

<label>Ссылка (href)
  <input type="text" value={block.data.link ?? ""} on:input={(e) => update({ link: e.target.value })} />
</label>

<label>Имя файла картинки
  <input type="text" value={block.data.imageBaseName ?? ""} on:input={(e) => update({ imageBaseName: 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>Расширение файла
        <input type="text" value={block.data.imageExtension ?? ".png"} on:input={(e) => update({ imageExtension: e.target.value })} />
      </label>

      <label>Ширина картинки (px)
        <input
          type="number"
          value={block.data.imgWidth ?? 264}
          on:input={(e) => update({ imgWidth: parseInt(e.target.value, 10) || 0 })}
        />
      </label>

      <label>Высота картинки (px)
        <input
          type="number"
          value={block.data.imgHeight ?? 330}
          on:input={(e) => update({ imgHeight: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
      <label>
        Отступ снизу (px)
        <input
          type="number"
          value={block.data.bottomSpacing ?? 20}
          on:input={(e) => update({ bottomSpacing: parseInt(e.target.value, 10) || 0 })}
        />
      </label>
    </div>
  {/if}
</div>

<label>Заголовок внутри блока
  <input type="text" value={block.data.header ?? ""} on:input={(e) => update({ header: e.target.value })} />
</label>

<label>
  Текст внутри блока
  <textarea value={block.data.text ?? ""} on:input={(e) => update({ text: e.target.value })}></textarea>
</label>

<label>Текст кнопки
  <input type="text" value={block.data.buttonText ?? ""} on:input={(e) => update({ buttonText: e.target.value })} />
</label>

<label>Ссылка кнопки
  <input type="text" value={block.data.buttonHref ?? ""} on:input={(e) => update({ buttonHref: e.target.value })} />
</label>

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