import { Controller } from "@hotwired/stimulus";
export default class extends Controller {
 static targets = ["container", "field"];
 static values = {
 nextIndex: Number
 }
 
 add(event) {
 event.preventDefault();
 const fields_wrapper = this.element.dataset.nestedFieldsWrapper;
 const field_index_pattern = `[${fields_wrapper}_attributes][0]`
 const new_field_index = `[${fields_wrapper}_attributes][${this.nextIndexValue}]`
 const position = this.containerTarget.children.length + 1;
 const content = this.element.dataset.nestedFieldsTemplate.replace(
 /NEW_RECORD/g,
 new Date().getTime()
 ).replace(
 /NEW_POSITION/g,
 position
 ).replaceAll(
 field_index_pattern,
 new_field_index
 );
 this.containerTarget.insertAdjacentHTML("beforeend", content);
 this.nextIndexValue = this.nextIndexValue + 1; 
 }
 remove(event) {
 event.preventDefault();
 const field = event.target.closest("[data-nested-fields-target='field']");
 const destroyInput = field.querySelector("[data-destroy-input]");
 if (destroyInput) {
 destroyInput.value = 1; // Mark for deletion
 field.style.display = "none";
 } else {
 field.remove();
 }
 }
}
</div><div class="naked_ctrl">
<form action="/index.cgi/larger-text" method="get" name="gate">
<p><a href="http://altstyle.alfasado.net">AltStyle</a> によって変換されたページ <a href="https://topenddevs.com/assets/controllers/nested_fields_controller-406b36d2.js">(-&gt;オリジナル)</a>
/ <label>アドレス: <input type="text" name="naked_post_url" value="https://topenddevs.com/assets/controllers/nested_fields_controller-406b36d2.js" size="22" /></label> <label>モード: <select name="naked_post_mode">
<option value="default">デフォルト</option>
<option value="speech">音声ブラウザ</option>
<option value="ruby">ルビ付き</option>
<option value="contrast">配色反転</option>
<option value="larger-text" selected="selected">文字拡大</option>
<option value="mobile">モバイル</option>
</select>
<input type="submit" value="表示" />
</p>
</form>
</div>