<div class="returns-registration">
      <div class="returns-registration__container">
          <div class="returns-registration__back-button-top">
              <a href="#" class="button-icon--icon-text-large -icon-arrow-left">
                  Zurück zu Retourenübersicht
              </a>
          </div>
          <div class="account-header">
              <h3 class="account-header__title">Retouren erfassen</h3>
              <p class="account-header__subtitle">(1–10 / 60 Retournierbare Artikel)</p>
          </div>
          <div class="returns-registration__filters">
              <form class="filters">
                  <div class="filters__list">
                      <div class="filters__list-item">

                          <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
                              <div class="text-field__wrapper date-picker__wrapper">
                                  <input class="text-field__input date-picker__input" id="dateFrom" type="text" name="dateFrom" />
                                  <label class="text-field__label date-picker__label" for="dateFrom">Lieferdatum von</label>
                                  <button type="reset" class="date-picker__reset"></button>
                              </div>

                          </div>
                      </div>
                      <div class="filters__list-item">

                          <div class="text-field--light date-picker--light is-initialized" data-disable-text-field-js data-language="" data-format="" data-min-date="" data-max-date="">
                              <div class="text-field__wrapper date-picker__wrapper">
                                  <input class="text-field__input date-picker__input" id="dateTo" type="text" name="dateTo" />
                                  <label class="text-field__label date-picker__label" for="dateTo">Lieferdatum bis</label>
                                  <button type="reset" class="date-picker__reset"></button>
                              </div>

                          </div>
                      </div>
                      <div class="filters__list-item">
                          <div class="text-field--light is-initialized">
                              <div class="text-field__wrapper">
                                  <input class="text-field__input" id="orderNumber" type="text" name="orderNumber" />
                                  <label class="text-field__label" for="orderNumber">Auftrags-/Bestellnummer
                                  </label>
                              </div>

                          </div>
                      </div>
                      <div class="filters__list-item">
                          <div class="text-field--light is-initialized">
                              <div class="text-field__wrapper">
                                  <input class="text-field__input" id="articleNumber" type="text" name="articleNumber" />
                                  <label class="text-field__label" for="articleNumber">Artikelnummer
                                  </label>
                              </div>

                          </div>
                      </div>
                      <div class="filters__list-buttons">
                          <div class="filters__list-button--reset">
                              <button class="button--tertiary-light-small" value="yes" type="reset">Zurücksetzen</button>
                          </div>
                          <div class="filters__list-button--submit">
                              <button class="button--primary-small" value="yes" type="submit">Suchen</button>
                          </div>
                      </div>
                  </div>
              </form>
          </div>
          <div class="returns-registration-table">

              <div class="table-header">

                  <div class="table-header__column--title">

                      <h4 class="heading-counter">
                          Retournierbare Artikel
                          <span class="counter-bubble" data-counter="60"></span>
                      </h4>

                  </div>

              </div>
              <div class="responsive-table--first-column-mobile-full-height -spacing-large">
                  <div class="responsive-table__container--auto-scrollbar">
                      <table class="responsive-table__table" data-responsive-table-filter-context>
                          <colgroup>
                              <col style="72px">
                              <col style="">
                              <col style="">
                              <col style="">
                              <col style="">
                              <col style="">
                              <col style="">
                              <col style="">
                          </colgroup>
                          <thead>
                              <tr class="responsive-table__tr">
                                  <th class="responsive-table__th">

                                  </th>
                                  <th class="responsive-table__th">
                                      Artikel
                                  </th>
                                  <th class="responsive-table__th">
                                      Auftragsnummer
                                  </th>
                                  <th class="responsive-table__th">
                                      Urspr. Pos.
                                  </th>
                                  <th class="responsive-table__th">
                                      Lieferdatum
                                  </th>
                                  <th class="responsive-table__th">
                                      Retournierbar bis
                                  </th>
                                  <th class="responsive-table__th is-right-aligned">
                                      Retournierbar
                                  </th>
                                  <th class="responsive-table__th is-hidden-on-desktop">
                                      Aktion
                                  </th>
                              </tr>
                          </thead>
                          <tbody>
                              <tr class="responsive-table__tr">
                                  <td class="responsive-table__td is-top-aligned">
                                      <div class="responsive-table__td-inner-container">
                                          <a href="#" class="image-cell__image-link">
                                              <div class="image ">
                                                  <picture>
                                                      <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                  </picture>
                                              </div>

                                          </a>

                                          <div class="image-cell__specials">
                                              <div class="specials">

                                                  <div class="specials--medium-horizontally-vertically  ">
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                          <span class="visually-hidden">Sale</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

                                                      </button>
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                          <span class="visually-hidden">New</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

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

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__td-inner-container">
                                          <h5 class="item-cell__title--with-attributes">
                                              <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 700 Performance Anthrazit</a>
                                          </h5>
                                          <div class="attributes--small-bold">
                                              <ul class="attributes__list">
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr.</div>
                                                      <div class="attributes__value " title="56.65563">
                                                          56.65563
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr. Lieferant</div>
                                                      <div class="attributes__value " title="IBTE8036E">
                                                          IBTE8036E
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Gruppe</div>
                                                      <div class="attributes__value " title="Bosch eBike">
                                                          Bosch eBike
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Kurzbezeichn.</div>
                                                      <div class="attributes__value " title="Transfer">
                                                          Transfer
                                                      </div>
                                                  </li>
                                              </ul>
                                          </div>
                                      </div>

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <a href="#">88903800</a>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Urspr. Pos.</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>6</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.11.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.12.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="text-with-tooltip-cell">
                                                      <div class="text-with-tooltip-cell__text">5</div>
                                                      <button type="button" class="info-tooltip__toggle--small">
                                                          <span class="visually-hidden"></span>
                                                      </button>
                                                      <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                          <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                              <div class="responsive-table__container--auto-scrollbar">
                                                                  <table class="responsive-table__table" data-responsive-table-filter-context>
                                                                      <colgroup>
                                                                          <col style="">
                                                                          <col style="">
                                                                      </colgroup>
                                                                      <thead>
                                                                          <tr class="responsive-table__tr">
                                                                              <th class="responsive-table__th">
                                                                                  Status
                                                                              </th>
                                                                              <th class="responsive-table__th is-right-aligned">
                                                                                  Anzahl
                                                                              </th>
                                                                          </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Ursprünglich bestellt</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>10</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits retourniert</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>5</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits in der Retourenliste</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>3</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                              <td class="responsive-table__td" colspan="2">
                                                                                  <div class="wysiwyg-content">
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                      </tbody>
                                                                  </table>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Aktion</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="button-add-to-returns">
                                                      <form class="button-add-to-returns__container" action="http://localhost:3005/add-to-returns/" method="post">
                                                          <div class="button-add-to-returns__quantity-switcher">
                                                              <div class="quantity-switcher--light">
                                                                  <button type="button" class="quantity-switcher__minus">
                                                                      <span class="quantity-switcher__minus-content">–</span>
                                                                  </button>
                                                                  <input class="quantity-switcher__quantity" type="number" id="quantity-1380901094" min="1" max="99" name="qty" value="5" required />
                                                                  <label class="visually-hidden" for="quantity-1380901094">Quantity</label>
                                                                  <input type="hidden" name="productId" value="abcdefghijk-123" />
                                                                  <button type="button" class="quantity-switcher__plus">
                                                                      <span class="quantity-switcher__plus-content">+</span>
                                                                  </button>
                                                              </div>
                                                          </div>
                                                          <button class="button--primary" type="submit"> <span class="button-add-to-returns__button">
                                                                  <span class="visually-hidden">In die Retourenliste</span>
                                                                  <span class="button-add-to-returns__button-icon"></span>
                                                              </span></button>
                                                      </form>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                              </tr>
                              <tr class="responsive-table__tr">
                                  <td class="responsive-table__td is-top-aligned">
                                      <div class="responsive-table__td-inner-container">
                                          <a href="#" class="image-cell__image-link">
                                              <div class="image ">
                                                  <picture>
                                                      <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                  </picture>
                                              </div>

                                          </a>

                                          <div class="image-cell__specials">
                                              <div class="specials">

                                                  <div class="specials--medium-horizontally-vertically  ">
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                          <span class="visually-hidden">Sale</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

                                                      </button>
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                          <span class="visually-hidden">New</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

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

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__td-inner-container">
                                          <h5 class="item-cell__title--with-attributes">
                                              <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 700 Performance Anthrazit</a>
                                          </h5>
                                          <div class="attributes--small-bold">
                                              <ul class="attributes__list">
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr.</div>
                                                      <div class="attributes__value " title="56.65563">
                                                          56.65563
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr. Lieferant</div>
                                                      <div class="attributes__value " title="IBTE8036E">
                                                          IBTE8036E
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Gruppe</div>
                                                      <div class="attributes__value " title="Bosch eBike">
                                                          Bosch eBike
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Kurzbezeichn.</div>
                                                      <div class="attributes__value " title="Transfer">
                                                          Transfer
                                                      </div>
                                                  </li>
                                              </ul>
                                          </div>
                                      </div>

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <a href="#">88903800</a>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Urspr. Pos.</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>10</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.11.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.12.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="text-with-tooltip-cell">
                                                      <div class="text-with-tooltip-cell__text">5</div>
                                                      <button type="button" class="info-tooltip__toggle--small">
                                                          <span class="visually-hidden"></span>
                                                      </button>
                                                      <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                          <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                              <div class="responsive-table__container--auto-scrollbar">
                                                                  <table class="responsive-table__table" data-responsive-table-filter-context>
                                                                      <colgroup>
                                                                          <col style="">
                                                                          <col style="">
                                                                      </colgroup>
                                                                      <thead>
                                                                          <tr class="responsive-table__tr">
                                                                              <th class="responsive-table__th">
                                                                                  Status
                                                                              </th>
                                                                              <th class="responsive-table__th is-right-aligned">
                                                                                  Anzahl
                                                                              </th>
                                                                          </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Ursprünglich bestellt</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>10</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits retourniert</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>5</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits in der Retourenliste</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>3</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                              <td class="responsive-table__td" colspan="2">
                                                                                  <div class="wysiwyg-content">
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                      </tbody>
                                                                  </table>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Aktion</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="button-add-to-returns">
                                                      <form class="button-add-to-returns__container" action="http://localhost:3005/add-to-returns/" method="post">
                                                          <div class="button-add-to-returns__quantity-switcher">
                                                              <div class="quantity-switcher--light">
                                                                  <button type="button" class="quantity-switcher__minus">
                                                                      <span class="quantity-switcher__minus-content">–</span>
                                                                  </button>
                                                                  <input class="quantity-switcher__quantity" type="number" id="quantity-1367635216" min="1" max="99" name="qty" value="5" required />
                                                                  <label class="visually-hidden" for="quantity-1367635216">Quantity</label>
                                                                  <input type="hidden" name="productId" value="abcdefghijk-123" />
                                                                  <button type="button" class="quantity-switcher__plus">
                                                                      <span class="quantity-switcher__plus-content">+</span>
                                                                  </button>
                                                              </div>
                                                          </div>
                                                          <button class="button--primary" type="submit"> <span class="button-add-to-returns__button">
                                                                  <span class="visually-hidden">In die Retourenliste</span>
                                                                  <span class="button-add-to-returns__button-icon"></span>
                                                              </span></button>
                                                      </form>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                              </tr>
                              <tr class="responsive-table__tr">
                                  <td class="responsive-table__td is-top-aligned">
                                      <div class="responsive-table__td-inner-container">
                                          <a href="#" class="image-cell__image-link">
                                              <div class="image ">
                                                  <picture>
                                                      <img src="/example-assets/images/responsive-table/thumb.png" class="image__img image-cell__image is-loading" alt="Alt" title="Title" srcset="/example-assets/images/responsive-table/thumb.png 1x, /example-assets/images/responsive-table/thumb.png 2x" onload="this.classList.remove('is-loading')" />
                                                  </picture>
                                              </div>

                                          </a>

                                          <div class="image-cell__specials">
                                              <div class="specials">

                                                  <div class="specials--medium-horizontally-vertically  ">
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="Sale" style="background-color: #e30a24;">
                                                          <span class="visually-hidden">Sale</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/sale.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

                                                      </button>
                                                      <button type="button" class="specials__toggle" data-info-tooltip-content="New" style="background-color: #333333;">
                                                          <span class="visually-hidden">New</span>
                                                          <span class="image ">
                                                              <picture>
                                                                  <img src="/example-assets/images/specials/new.svg" class="image__img specials__toggle-image is-loading" alt="" onload="this.classList.remove('is-loading')" />
                                                              </picture>
                                                          </span>

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

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__td-inner-container">
                                          <h5 class="item-cell__title--with-attributes">
                                              <a href="#" class="item-cell__title-link">Bosch Gepäckträgerakku PowerPack 700 Performance Anthrazit</a>
                                          </h5>
                                          <div class="attributes--small-bold">
                                              <ul class="attributes__list">
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr.</div>
                                                      <div class="attributes__value " title="56.65563">
                                                          56.65563
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Art.-Nr. Lieferant</div>
                                                      <div class="attributes__value " title="IBTE8036E">
                                                          IBTE8036E
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Gruppe</div>
                                                      <div class="attributes__value " title="Bosch eBike">
                                                          Bosch eBike
                                                      </div>
                                                  </li>
                                                  <li class="attributes__list-item">
                                                      <div class="attributes__name">Kurzbezeichn.</div>
                                                      <div class="attributes__value " title="Transfer">
                                                          Transfer
                                                      </div>
                                                  </li>
                                              </ul>
                                          </div>
                                      </div>

                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Auftragsnummer</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <a href="#">88903800</a>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Urspr. Pos.</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>12</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Lieferdatum</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.11.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar bis</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="wysiwyg-content">
                                                      <p>05.12.2021</p>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td is-right-aligned">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Retournierbar</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="text-with-tooltip-cell">
                                                      <div class="text-with-tooltip-cell__text">5</div>
                                                      <button type="button" class="info-tooltip__toggle--small">
                                                          <span class="visually-hidden"></span>
                                                      </button>
                                                      <div class="info-tooltip__html" data-info-tooltip-content-html="">
                                                          <div class="responsive-table--first-column-mobile-full-height -spacing-medium -not-responsive">
                                                              <div class="responsive-table__container--auto-scrollbar">
                                                                  <table class="responsive-table__table" data-responsive-table-filter-context>
                                                                      <colgroup>
                                                                          <col style="">
                                                                          <col style="">
                                                                      </colgroup>
                                                                      <thead>
                                                                          <tr class="responsive-table__tr">
                                                                              <th class="responsive-table__th">
                                                                                  Status
                                                                              </th>
                                                                              <th class="responsive-table__th is-right-aligned">
                                                                                  Anzahl
                                                                              </th>
                                                                          </tr>
                                                                      </thead>
                                                                      <tbody>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Ursprünglich bestellt</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>10</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits retourniert</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>5</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr">
                                                                              <td class="responsive-table__td">
                                                                                  <div class="responsive-table__td-inner-container">
                                                                                      <div class="wysiwyg-content">
                                                                                          <p>Bereits in der Retourenliste</p>
                                                                                      </div>
                                                                                  </div>

                                                                              </td>
                                                                              <td class="responsive-table__td is-right-aligned">
                                                                                  <div class="responsive-table__mobile-container">
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__mobile-column-title">Anzahl</div>
                                                                                      </div>
                                                                                      <div class="responsive-table__mobile-column">
                                                                                          <div class="responsive-table__td-inner-container">
                                                                                              <div class="wysiwyg-content">
                                                                                                  <p><strong>3</strong></p>
                                                                                              </div>
                                                                                          </div>

                                                                                      </div>
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                          <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                                                              <td class="responsive-table__td" colspan="2">
                                                                                  <div class="wysiwyg-content">
                                                                                  </div>
                                                                              </td>
                                                                          </tr>
                                                                      </tbody>
                                                                  </table>
                                                              </div>
                                                          </div>
                                                      </div>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                                  <td class="responsive-table__td">
                                      <div class="responsive-table__mobile-container">
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__mobile-column-title">Aktion</div>
                                          </div>
                                          <div class="responsive-table__mobile-column">
                                              <div class="responsive-table__td-inner-container">
                                                  <div class="button-add-to-returns">
                                                      <form class="button-add-to-returns__container" action="http://localhost:3005/add-to-returns/" method="post">
                                                          <div class="button-add-to-returns__quantity-switcher">
                                                              <div class="quantity-switcher--light">
                                                                  <button type="button" class="quantity-switcher__minus">
                                                                      <span class="quantity-switcher__minus-content">–</span>
                                                                  </button>
                                                                  <input class="quantity-switcher__quantity" type="number" id="quantity-2007400114" min="1" max="99" name="qty" value="5" required />
                                                                  <label class="visually-hidden" for="quantity-2007400114">Quantity</label>
                                                                  <input type="hidden" name="productId" value="abcdefghijk-123" />
                                                                  <button type="button" class="quantity-switcher__plus">
                                                                      <span class="quantity-switcher__plus-content">+</span>
                                                                  </button>
                                                              </div>
                                                          </div>
                                                          <button class="button--primary" type="submit"> <span class="button-add-to-returns__button">
                                                                  <span class="visually-hidden">In die Retourenliste</span>
                                                                  <span class="button-add-to-returns__button-icon"></span>
                                                              </span></button>
                                                      </form>
                                                  </div>
                                              </div>

                                          </div>
                                      </div>
                                  </td>
                              </tr>
                              <tr class="responsive-table__tr" data-responsive-table-filter-no-match hidden>
                                  <td class="responsive-table__td" colspan="8">
                                      <div class="wysiwyg-content">
                                          <p class="responsive-table__no-match">Keine Ergebnisse gefunden</p>
                                      </div>
                                  </td>
                              </tr>
                          </tbody>
                      </table>
                  </div>
              </div>
          </div>
          <div class="returns-registration__pagination">
              <div class="pagination">
                  <div class="pagination__container">
                      <div class="pagination__prev">
                          <a href="#" class="button-navigation--prev">
                              <span class="visually-hidden">Vorherige Seite</span>
                          </a>
                      </div>

                      <ul class="pagination__pages">
                          <li class="pagination__page">
                              <a href="#" class="pagination__page-link">1</a>
                          </li>
                          <li class="pagination__page">
                              <a href="#" class="pagination__page-link--active">2</a>
                          </li>
                          <li class="pagination__page">
                              <a href="#" class="pagination__page-link">3</a>
                          </li>
                          <li class="pagination__page">
                              <a href="#" class="pagination__page-link">4</a>
                          </li>
                          <li class="pagination__page">
                              <span class="pagination__page-dots">…</span>
                          </li>
                          <li class="pagination__page">
                              <a href="#" class="pagination__page-link">32</a>
                          </li>
                      </ul>

                      <div class="pagination__next">
                          <a href="#" class="button-navigation--next">
                              <span class="visually-hidden">Nächste Seite</span>
                          </a>
                      </div>
                  </div>
              </div>
          </div>
          <div class="returns-registration__back-button-bottom">
              <a href="#" class="button-icon--icon-text-large -icon-arrow-left">
                  Zurück zu Retourenübersicht
              </a>
          </div>
      </div>
      <div class="sticky-toolbar">
          <div class="sticky-toolbar__container">
              <div class="button-toolbar">
                  <div class="button-toolbar__button-wrapper">
                      <button class="button--primary" type="submit"> Retourenliste ansehen
                      </button>
                  </div>
              </div>

          </div>
      </div>
  </div>
{% include '@SharedComponents/modules/offag-returns/templates/returns-registration/returns-registration.twig' %}
{
  "header": {
    "title": "Retouren erfassen",
    "headingLevel": "3",
    "subtitle": "(1–10 / 60 Retournierbare Artikel)"
  },
  "navgiationButton": {
    "variant": "icon-text-large",
    "title": "Zurück zu Retourenübersicht",
    "icon": "arrow-left",
    "type": "a",
    "href": "#"
  },
  "filters": {
    "resetButton": {
      "variant": "tertiary-light-small",
      "type": "button",
      "role": "reset",
      "title": "Zurücksetzen",
      "value": "yes",
      "disabled": false
    },
    "submitButton": {
      "variant": "primary-small",
      "type": "button",
      "role": "submit",
      "title": "Suchen",
      "value": "yes",
      "disabled": false
    },
    "filters": [
      {
        "path": "modules/shared/components/form-components/date-picker/date-picker",
        "data": {
          "variant": "light",
          "language": "",
          "format": "",
          "minDate": "",
          "maxDate": "",
          "id": "dateFrom",
          "name": "dateFrom",
          "label": "Lieferdatum von",
          "required": false,
          "value": "",
          "disabled": false,
          "type": "text",
          "autocomplete": "",
          "error": "",
          "helper": ""
        }
      },
      {
        "path": "modules/shared/components/form-components/date-picker/date-picker",
        "data": {
          "variant": "light",
          "language": "",
          "format": "",
          "minDate": "",
          "maxDate": "",
          "id": "dateTo",
          "name": "dateTo",
          "label": "Lieferdatum bis",
          "required": false,
          "value": "",
          "disabled": false,
          "type": "text",
          "autocomplete": "",
          "error": "",
          "helper": ""
        }
      },
      {
        "path": "modules/shared/components/form-components/text-field/text-field",
        "data": {
          "variant": "light",
          "id": "orderNumber",
          "name": "orderNumber",
          "label": "Auftrags-/Bestellnummer",
          "required": false,
          "value": "",
          "disabled": false,
          "type": "text",
          "autocomplete": "",
          "error": "",
          "helper": ""
        }
      },
      {
        "path": "modules/shared/components/form-components/text-field/text-field",
        "data": {
          "variant": "light",
          "id": "articleNumber",
          "name": "articleNumber",
          "label": "Artikelnummer",
          "required": false,
          "value": "",
          "disabled": false,
          "type": "text",
          "autocomplete": "",
          "error": "",
          "helper": ""
        }
      }
    ]
  },
  "returnsTable": {
    "include": "...returns-registration-table--default"
  },
  "pagination": {
    "include": "...pagination--with-next-and-prev"
  },
  "returnsToolbar": {
    "include": "...returns-toolbar--with-primary-only"
  }
}
  • Content:
    import './returns-registration.scss';
    import ReturnsRegistration from 'cando-cx-components-library/components/modules/offag-returns/templates/returns-registration/returns-registration';
    
    export default ReturnsRegistration;
  • URL: /components/raw/offag-returns-registration-template/returns-registration.js
  • Filesystem Path: src/components/modules/offag-returns/templates/returns-registration/returns-registration.js
  • Size: 222 Bytes

No notes defined.