<turbo-stream action="append" target="words"><template>
  <div class="nested-fields mt-1" data-controller="word">
  <div class="card">
      <button
        type="button"
        class="btn-close position-absolute top-0 end-0 p-2 text-danger"
        data-action="click->word#remove"
        aria-label="Close"
      >
      </button>
    <div class="card-body">
      <h6 class="card-subtitle mb-2 text-body-secondary">Translation (word/expression)</h6>
      <input type="hidden" name="assignment[words_attributes][19808][id]" id="assignment_words_attributes_19808_id" autocomplete="off" />
      <div class="row pb-2">
        <div class="col">
          <div class="form-floating">
            <input type="text" name="assignment[words_attributes][19808][original_text]" id="assignment_words_attributes_19808_original_text" class="form-control " placeholder="Orginal text (e.g. Dog)" />
            <label class="text-truncate w-100" for="assignment_words_attributes_19808_original_text">
              Orginal text (e.g. Dog)
              <span class='text-danger'>*</span>
</label>          </div>
        </div>
        <div class="col">
          <div class="form-floating">
            <input type="text" name="assignment[words_attributes][19808][translated_text]" id="assignment_words_attributes_19808_translated_text" class="form-control " placeholder="Translated text (e.g. Hund)" />
            <label class="text-truncate w-100" for="assignment_words_attributes_19808_translated_text">
              Translated text (e.g. Hund)
              <span class='text-danger'>*</span>
</label>          </div>
        </div>
      </div>
      <div
        class="accordion d-none"
        id="accordion-19808"
        data-toggle-target="accordion"
      >
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button
              class="accordion-button collapsed"
              type="button"
              data-bs-toggle="collapse"
              data-bs-target="#collapse-19808"
              aria-expanded=""
              aria-controls="collapse-19808"
            >
              Wrong translations
            </button>
          </h2>
          <div
            id="collapse-19808"
            class="accordion-collapse collapse "
            data-bs-parent="#accordion-19808"
          >
            <div class="accordion-body">
                <div class="row pb-2">
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][original_text_error1]" id="assignment_words_attributes_19808_original_text_error1" class="form-control " placeholder="Feil original tekst 1" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_original_text_error1">Wrong orginal text 1 (e.g. Cat)</label>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][translated_text_error1]" id="assignment_words_attributes_19808_translated_text_error1" class="form-control " placeholder="Feil oversatt tekst 1" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_translated_text_error1">Wrong translated text 1 (e.g. Katt)</label>
                    </div>
                  </div>
                </div>
                <div class="row pb-2">
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][original_text_error2]" id="assignment_words_attributes_19808_original_text_error2" class="form-control " placeholder="Feil original tekst 2" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_original_text_error2">Wrong orginal text 2 (e.g. Cow)</label>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][translated_text_error2]" id="assignment_words_attributes_19808_translated_text_error2" class="form-control " placeholder="Feil oversatt tekst 2" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_translated_text_error2">Wrong translated text 2 (e.g. Ku)</label>
                    </div>
                  </div>
                </div>
                <div class="row pb-2">
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][original_text_error3]" id="assignment_words_attributes_19808_original_text_error3" class="form-control " placeholder="Feil original tekst 3" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_original_text_error3">Wrong orginal text 3 (e.g. Dogg)</label>
                    </div>
                  </div>
                  <div class="col">
                    <div class="form-floating">
                      <input type="text" name="assignment[words_attributes][19808][translated_text_error3]" id="assignment_words_attributes_19808_translated_text_error3" class="form-control " placeholder="Feil oversatt tekst 3" />
                      <label class="text-truncate w-100" for="assignment_words_attributes_19808_translated_text_error3">Wrong translated text 3 (e.g. Hun)</label>
                    </div>
                  </div>
                </div>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

</template></turbo-stream>